| # | Name | Color Value | Style | Applicable Scenarios | Suggestions |
|---|---|---|---|---|---|
| 1 | Modern and Healthy | #006d77 #83c5be #edf6f9 #ffddd2 #e29578 |
Fresh, Healing | Healthcare, Psychological Counseling, Skincare, Yoga Spa | Use dark cyan for titles, light pink for backgrounds |
| 2 | Business and Authority | #2b2d42 #8d99ae #edf2f4 #ef233c #d90429 |
Rigorous, Classic | Annual Reports, Financial Analysis, Corporate Introductions, Government Reports | Dark blue conveys professionalism, bright red emphasizes data |
| 3 | Nature and Outdoors | #606c38 #283618 #fefae0 #dda15e #bc6c25 |
Steady, Earth Tones | Outdoor Gear, Environmental Protection, Agricultural Projects, History and Culture | Dark green as the base, beige for text |
| 4 | Retro and Academic | #780000 #c1121f #fdf0d5 #003049 #669bbc |
Classic, Scholarly | Academic Lectures, Historical Reviews, Museums, Retro Brands | Strong contrast between dark red and dark blue |
| 5 | Soft and Creative | #cdb4db #ffc8dd #ffafcc #bde0fe #a2d2ff |
Dreamy, Candy Colors | Maternal and Baby Products, Dessert Shops, Women's Fashion, Kindergartens | Use dark gray or black for text |
| 6 | Bohemian | #ccd5ae #e9edc9 #fefae0 #faedcd #d4a373 |
Gentle, Low Saturation | Wedding Planning, Home Furnishings, Organic Food, Slow Living | Beige background, green and brown accents |
| 7 | Vitality and Technology | #8ecae6 #219ebc #023047 #ffb703 #fb8500 |
High Energy, Sports | Sports Events, Gyms, Startup Pitch Decks, Children's Education | Dark blue anchors, orange as the focal point |
| 8 | Craftsmanship and Handmade | #7f5539 #a68a64 #ede0d4 #656d4a #414833 |
Rustic, Coffee Tones | Coffee Shops, Handicrafts, Traditional Culture, Baking Instruction | Suitable for paper/leather textures |
| 9 | Technology and Nightscape | #000814 #001d3d #003566 #ffc300 #ffd60a |
Deep, High Brightness | Tech Launches, Astronomy, Night Economy, High-end Cars | Dark mode is a must |
| 10 | Education and Charts | #264653 #2a9d8f #e9c46a #f4a261 #e76f51 |
Clear, Highly Logical | Statistical Reports, Education and Training, Market Analysis, General Business | Perfect chart color scheme |
| 11 | Forest and Environmental Protection | #dad7cd #a3b18a #588157 #3a5a40 #344e41 |
Monochromatic Gradient, Forest Style | Landscape Design, ESG Reports, Environmental Public Welfare, Plant Research | Monochromatic schemes are safe and won't get messy |
| 12 | Elegance and Fashion | #edafb8 #f7e1d7 #dedbd2 #b0c4b1 #4a5759 |
Low Saturation, Morandi | Haute Couture, Art Galleries, Beauty Brands, Magazine Style | White space is key |
| 13 | Art and Cuisine | #335c67 #fff3b0 #e09f3e #9e2a2b #540b0e |
Rich, Retro Poster | Food Documentaries, Art Exhibitions, Ethnic Style, Retro Restaurants | Suitable for large color block collages |
| 14 | Light Luxury and Mystery | #22223b #4a4e69 #9a8c98 #c9ada7 #f2e9e4 |
Cool and Elegant, Purple Tones | Jewelry Display, Hotel Management, High-end Consulting, Psychology | Purple creates a high-end atmosphere |
| 15 | Pure Tech Blue | #03045e #0077b6 #00b4d8 #90e0ef #caf0f8 |
Futuristic, Pure | Cloud Computing/AI, Water Conservancy and Ocean, Hospitals and Healthcare, Clean Energy | Gradient from deep sea to sky |
| 16 | Coastal Coral | #0081a7 #00afb9 #fdfcdc #fed9b7 #f07167 |
Refreshing, Summery | Travel and Vacation, Summer Events, Beverage Brands, Ocean Themes | Cyan and coral are complementary and eye-catching |
| 17 | Vibrant Orange Mint | #ff9f1c #ffbf69 #ffffff #cbf3f0 #2ec4b6 |
Bright, cheerful | Children's activities, promotional posters, FMCG, social media | Orange catches the eye, mint green is refreshing |
| 18 | Platinum White-Gold | #0a0a0a #0070F3 #D4AF37 #f5f5f5 #ffffff |
High-end, professional | Agent products, corporate websites, fintech, high-end brands | Platinum white as the main tone, blue for actions, gold for emphasis |
Agent Design System - Complete Color Palette
Based on the Platinum White-Gold Theme from tokens.css/ts, providing a complete color scale for fine-grained design use.
White color family (backgrounds and light surfaces)
| Color scale | Color value | Usage |
|---|---|---|
| white-0 | #ffffff |
Main background |
| white-50 | #fefefe |
Slightly warm white |
| white-75 | #fcfcfc |
Slightly grayish white |
| white-100 | #fafafa |
Secondary background |
| white-200 | #f7f7f7 |
Card background |
| white-300 | #f5f5f5 |
Tertiary background |
| white-400 | #f0f0f0 |
Divider area |
| white-500 | #ebebeb |
Light border |
| white-600 | #e5e5e5 |
Disabled state background |
| white-700 | #e0e0e0 |
Dark grayish white |
| white-800 | #d9d9d9 |
Placeholder |
| white-900 | #d4d4d4 |
Divider line |
| white-1000 | #cccccc |
Darkest white |
Gold color family (platinum business accent color)
| Color scale | Color value | Usage |
|---|---|---|
| gold-25 | #FFFDF5 |
Very light gold background |
| gold-50 | #FEF9E7 |
Light gold background |
| gold-75 | #FCF3D0 |
Pale gold highlight |
| gold-100 | #FAECB8 |
Gold hover state |
| gold-200 | #F5DC8A |
Bright gold emphasis |
| gold-300 | #E8C860 |
Gold hover |
| gold-400 | #D4AF37 |
Primary gold (core) |
| gold-500 | #B8972E |
Gold text |
| gold-600 | #9A7E26 |
Deep gold emphasis |
| gold-700 | #7C651E |
Dark gold border |
| gold-800 | #5E4C16 |
Deep gold background |
| gold-900 | #40330F |
Very deep gold |
| gold-1000 | #221A08 |
Black gold |
Blue color family (primary action color)
| Color scale | Color value | Usage |
|---|---|---|
| blue-25 | #F0F7FF |
Very light blue background |
| blue-50 | #E0EFFF |
Info alert background |
| blue-75 | #C2DFFF |
Light blue highlight |
| blue-100 | #A3CFFF |
Disabled state blue |
| blue-200 | #66AFFF |
Bright blue |
| blue-300 | #338FFF |
Blue hover |
| blue-400 | #0070F3 |
Primary blue (core) |
| blue-500 | #005FCC |
Blue text |
| blue-600 | #004FA6 |
Deep blue emphasis |
| blue-700 | #003F80 |
Dark blue border |
| blue-800 | #002F5A |
Deep blue background |
| blue-900 | #001F3D |
Very deep blue |
| blue-1000 | #001026 |
Black blue |
Gray color family (text and neutral colors)
| Color scale | Color value | Usage |
|---|---|---|
| gray-0 | #ffffff |
White |
| gray-50 | #fafafa |
Very light gray |
| gray-75 | #f5f5f5 |
Light gray background |
| gray-100 | #ededed |
Light divider line |
| gray-200 | #d4d4d4 |
Light border |
| gray-300 | #a3a3a3 |
Quaternary text |
| gray-400 | #737373 |
Tertiary text |
| gray-500 | #525252 |
Secondary text |
| gray-600 | #404040 |
Dark gray |
| gray-700 | #2e2e2e |
Dark background |
| gray-800 | #1f1f1f |
Deep background |
| gray-900 | #141414 |
Very deep background |
| gray-1000 | #0a0a0a |
Primary text color (core) |
Opacity color values
Opacity Black (black transparency)
| Opacity | Color value | Usage |
|---|---|---|
| 0% | #0a0a0a00 |
Fully transparent |
| 2% | #0a0a0a05 |
Faint overlay |
| 4% | #0a0a0a0a |
Secondary interactive background |
| 8% | #0a0a0a14 |
Border/divider |
| 15% | #0a0a0a26 |
Pressed state |
| 20% | #0a0a0a33 |
Light mask |
| 25% | #0a0a0a40 |
Medium mask |
| 50% | #0a0a0a80 |
Semi-transparent |
| 70% | #0a0a0ab2 |
Dark mask |
| 80% | #0a0a0acc |
Hover state |
| 90% | #0a0a0ae5 |
tooltip |
| 95% | #0a0a0af2 |
Modal |
Opacity White
| Opacity | Color value | Usage |
|---|---|---|
| 0% | #ffffff00 |
Fully transparent |
| 2% | #ffffff05 |
Faint mask |
| 4% | #ffffff0a |
Secondary interactive background |
| 8% | #ffffff12 |
Border/Divider |
| 15% | #ffffff26 |
Pressed state |
| 20% | #ffffff33 |
Light mask |
| 25% | #ffffff40 |
Medium mask |
| 50% | #ffffff80 |
Semi-transparent |
| 70% | #ffffffb2 |
Dark mask |
| 80% | #ffffffcc |
Hover state |
| 90% | #ffffffe5 |
tooltip |
| 95% | #fffffff2 |
Modal |
Font Family - Font Specification
Recommended fonts
| Language | Default font | Optional fonts |
|---|---|---|
| Chinese | Microsoft YaHei | — |
| English | Arial | Georgia, Calibri, Cambria, Trebuchet MS |
- For mixed Chinese and English text: use Microsoft YaHei for Chinese and the selected font for English
- Prioritize system built-in fonts to ensure cross-platform compatibility
- Headings and body text can use different font pairings (e.g., Georgia + Calibri)