Casso Brand Kit
Tải trọn bộ logo

Tải trọn bộ

Casso Brand Kit12 thương hiệu · 40 file logo SVG, WebP · kèm brand.jsonTải tất cả · ZIP 3,9 MBbrand.jsonllms.txtGuideline

Hệ sinh thái Casso

Mục lục

Foundations

Colors

Color scheme
Brand
Density
Radius
Emphasis
Type scale

Section 01

Tier 3: Semantic

Khi viết giao diện, dùng tier này. Màu ở đây đặt tên theo vai trò, không theo giá trị. Lưới caro phía sau là cố ý, vì nhiều token semantic là màu alpha (trong suốt một phần) chứ không phải màu solid.

Color/Background: 193 token

Background/Accent/Flat/Default--color-background-accent-flat-default#FFFFFF00
Background/Accent/Flat/Hover--color-background-accent-flat-hover#00A32F0B
Background/Accent/Flat/Pressed--color-background-accent-flat-pressed#00B1321A
Background/Accent/Ghost/Default--color-background-accent-ghost-default#FFFFFF
Background/Accent/Ghost/Hover--color-background-accent-ghost-hover#00A32F0B
Background/Accent/Ghost/Pressed--color-background-accent-ghost-pressed#00B1321A
Background/Accent/Solid/Default--color-background-accent-solid-default#00A85E
Background/Accent/Solid/Hover--color-background-accent-solid-hover#009A54
Background/Accent/Solid/Pressed--color-background-accent-solid-pressed#008241
Background/Accent/Subtle/Default--color-background-accent-subtle-default#00B1321A
Background/Accent/Subtle/Hover--color-background-accent-subtle-hover#00B1312A
Background/Accent/Subtle/Pressed--color-background-accent-subtle-pressed#00A9323E
Background/Active/Accent/Solid--color-background-active-accent-solid#00A85E
Background/Active/Accent/Subtle--color-background-active-accent-subtle#00B1321A
Background/Active/Neutral/Solid--color-background-active-neutral-solid#0D0D0D
Background/Active/Neutral/Subtle--color-background-active-neutral-subtle#01010110
Background/Black-Overlay/Default--color-background-black-overlay-default#000000B2
Background/Black-Overlay/Hover--color-background-black-overlay-hover#000000CC
Background/Black-Overlay/Pressed--color-background-black-overlay-pressed#000000E5
Background/Black-Solid/Default--color-background-black-solid-default#0D0D0D
Background/Black-Solid/Hover--color-background-black-solid-hover#5C5C5C
Background/Black-Solid/Pressed--color-background-black-solid-pressed#7E7E7E
Background/Canvas/Alt--color-background-canvas-alt#FFFFFF
Background/Canvas/Default--color-background-canvas-default#F7F7F7
Background/Container--color-background-container#FFFFFF
Background/Flat-Disabled--color-background-flat-disabled#FFFFFF00
Background/Ghost-Disabled--color-background-ghost-disabled#FFFFFF00
Background/Info/Flat/Default--color-background-info-flat-default#FFFFFF00
Background/Info/Flat/Hover--color-background-info-flat-hover#056DFF0C
Background/Info/Flat/Pressed--color-background-info-flat-pressed#0267FF19
Background/Info/Solid/Default--color-background-info-solid-default#0A85FF
Background/Info/Solid/Hover--color-background-info-solid-hover#0074E0
Background/Info/Solid/Pressed--color-background-info-solid-pressed#004E98
Background/Info/Subtle/Default--color-background-info-subtle-default#0267FF19
Background/Info/Subtle/Hover--color-background-info-subtle-hover#006EFF38
Background/Info/Subtle/Pressed--color-background-info-subtle-pressed#006DFF50
Background/Inverse/Flat/Default--color-background-inverse-flat-default#FFFFFF00
Background/Inverse/Flat/Hover--color-background-inverse-flat-hover#FCFCFC09
Background/Inverse/Flat/Pressed--color-background-inverse-flat-pressed#FCFCFC11
Background/Inverse/Solid/Default--color-background-inverse-solid-default#FFFFFF
Background/Inverse/Solid/Hover--color-background-inverse-solid-hover#F7F7F7
Background/Inverse/Solid/Pressed--color-background-inverse-solid-pressed#EFEFEF
Background/Inverse/Subtle/Default--color-background-inverse-subtle-default#FCFCFC11
Background/Inverse/Subtle/Hover--color-background-inverse-subtle-hover#FFFFFF1A
Background/Inverse/Subtle/Pressed--color-background-inverse-subtle-pressed#FDFDFD20
Background/Inverse-Disabled--color-background-inverse-disabled#FFFFFF24
Background/Negative/Flat/Default--color-background-negative-flat-default#FFFFFF00
Background/Negative/Flat/Hover--color-background-negative-flat-hover#FF3B000D
Background/Negative/Flat/Pressed--color-background-negative-flat-pressed#FF350219
Background/Negative/Solid/Default--color-background-negative-solid-default#E5532E
Background/Negative/Solid/Hover--color-background-negative-solid-hover#D03E19
Background/Negative/Solid/Pressed--color-background-negative-solid-pressed#941B00
Background/Negative/Subtle/Default--color-background-negative-subtle-default#FF350219
Background/Negative/Subtle/Hover--color-background-negative-subtle-hover#FF370038
Background/Negative/Subtle/Pressed--color-background-negative-subtle-pressed#FF360050
Background/Neutral/Flat/Default--color-background-neutral-flat-default#FFFFFF00
Background/Neutral/Flat/Hover--color-background-neutral-flat-hover#05050508
Background/Neutral/Flat/Pressed--color-background-neutral-flat-pressed#01010110
Background/Neutral/Ghost/Default--color-background-neutral-ghost-default#FFFFFF
Background/Neutral/Ghost/Hover--color-background-neutral-ghost-hover#05050508
Background/Neutral/Ghost/Pressed--color-background-neutral-ghost-pressed#01010110
Background/Neutral/Pale/Default--color-background-neutral-pale-default#05050508
Background/Neutral/Pale/Hover--color-background-neutral-pale-hover#01010110
Background/Neutral/Pale/Pressed--color-background-neutral-pale-pressed#02020215
Background/Neutral/Solid/Default--color-background-neutral-solid-default#0D0D0D
Background/Neutral/Solid/Hover--color-background-neutral-solid-hover#5C5C5C
Background/Neutral/Solid/Pressed--color-background-neutral-solid-pressed#7E7E7E
Background/Neutral/Subtle/Default--color-background-neutral-subtle-default#01010110
Background/Neutral/Subtle/Hover--color-background-neutral-subtle-hover#02020215
Background/Neutral/Subtle/Pressed--color-background-neutral-subtle-pressed#0101011D
Background/Overlay--color-background-overlay#00000040
Background/Popover/Default--color-background-popover-default#FFFFFFE5
Background/Popover/Overlay--color-background-popover-overlay#000000DB
Background/Positive/Flat/Default--color-background-positive-flat-default#FFFFFF00
Background/Positive/Flat/Hover--color-background-positive-flat-hover#2BAA000C
Background/Positive/Flat/Pressed--color-background-positive-flat-pressed#45DD0025
Background/Positive/Solid/Default--color-background-positive-solid-default#6ED507
Background/Positive/Solid/Hover--color-background-positive-solid-hover#63CA00
Background/Positive/Solid/Pressed--color-background-positive-solid-pressed#41810B
Background/Positive/Subtle/Default--color-background-positive-subtle-default#45DD0025
Background/Positive/Subtle/Hover--color-background-positive-subtle-hover#48D6003D
Background/Positive/Subtle/Pressed--color-background-positive-subtle-pressed#45C90055
Background/Solid-Disabled--color-background-solid-disabled#EFEFEF
Background/Subtle-Disabled--color-background-subtle-disabled#01010110
Background/Support/Blue/Deep--color-background-support-blue-deep#002B56
Background/Support/Blue/Pale--color-background-support-blue-pale#056DFF0C
Background/Support/Blue/Soft--color-background-support-blue-soft#AFD1FF
Background/Support/Blue/Solid--color-background-support-blue-solid#0A85FF
Background/Support/Blue/Subtle--color-background-support-blue-subtle#0267FF19
Background/Support/Brand/Deep--color-background-support-brand-deep#193D26
Background/Support/Brand/Pale--color-background-support-brand-pale#00A32F0B
Background/Support/Brand/Soft--color-background-support-brand-soft#C1EACD
Background/Support/Brand/Solid--color-background-support-brand-solid#00A85E
Background/Support/Brand/Subtle--color-background-support-brand-subtle#00B1321A
Background/Support/Bronze/Deep--color-background-support-bronze-deep#571400
Background/Support/Bronze/Pale--color-background-support-bronze-pale#FF49000E
Background/Support/Bronze/Soft--color-background-support-bronze-soft#FBC2AC
Background/Support/Bronze/Solid--color-background-support-bronze-solid#DC754C
Background/Support/Bronze/Subtle--color-background-support-bronze-subtle#FF50011D
Background/Support/Brown/Deep--color-background-support-brown-deep#422301
Background/Support/Brown/Pale--color-background-support-brown-pale#FF6A0111
Background/Support/Brown/Soft--color-background-support-brown-soft#EBC8AC
Background/Support/Brown/Solid--color-background-support-brown-solid#9F6838
Background/Support/Brown/Subtle--color-background-support-brown-subtle#FF6D0121
Background/Support/Crimson/Deep--color-background-support-crimson-deep#590023
Background/Support/Crimson/Pale--color-background-support-crimson-pale#FF051E0A
Background/Support/Crimson/Soft--color-background-support-crimson-soft#FFBDC6
Background/Support/Crimson/Solid--color-background-support-crimson-solid#E94E75
Background/Support/Crimson/Subtle--color-background-support-crimson-subtle#FF021A15
Background/Support/Cyan/Deep--color-background-support-cyan-deep#00374A
Background/Support/Cyan/Pale--color-background-support-cyan-pale#02C0FF14
Background/Support/Cyan/Soft--color-background-support-cyan-soft#9DD7EE
Background/Support/Cyan/Solid--color-background-support-cyan-solid#10AEDA
Background/Support/Cyan/Subtle--color-background-support-cyan-subtle#00B7FF27
Background/Support/Golden/Deep--color-background-support-golden-deep#423822
Background/Support/Golden/Pale--color-background-support-golden-pale#FFA00218
Background/Support/Golden/Soft--color-background-support-golden-soft#EDCA85
Background/Support/Golden/Solid--color-background-support-golden-solid#C99A2C
Background/Support/Golden/Subtle--color-background-support-golden-subtle#FFA40132
Background/Support/Green/Deep--color-background-support-green-deep#003914
Background/Support/Green/Pale--color-background-support-green-pale#10C70112
Background/Support/Green/Soft--color-background-support-green-soft#A9DBAC
Background/Support/Green/Solid--color-background-support-green-solid#3FAB53
Background/Support/Green/Subtle--color-background-support-green-subtle#01B40922
Background/Support/Indigo/Deep--color-background-support-indigo-deep#0F0075
Background/Support/Indigo/Pale--color-background-support-indigo-pale#0537FF0A
Background/Support/Indigo/Soft--color-background-support-indigo-soft#C0CDFF
Background/Support/Indigo/Solid--color-background-support-indigo-solid#4752F0
Background/Support/Indigo/Subtle--color-background-support-indigo-subtle#023EFF15
Background/Support/Neutral/Deep--color-background-support-neutral-deep#0D0D0D
Background/Support/Neutral/Pale--color-background-support-neutral-pale#05050508
Background/Support/Neutral/Soft--color-background-support-neutral-soft#E2E2E2
Background/Support/Neutral/Solid--color-background-support-neutral-solid#8D8D8D
Background/Support/Neutral/Subtle--color-background-support-neutral-subtle#01010110
Background/Support/Orange/Deep--color-background-support-orange-deep#542A08
Background/Support/Orange/Pale--color-background-support-orange-pale#FF6A0111
Background/Support/Orange/Soft--color-background-support-orange-soft#FFC295
Background/Support/Orange/Solid--color-background-support-orange-solid#ED8002
Background/Support/Orange/Subtle--color-background-support-orange-subtle#FF6D0121
Background/Support/Pink/Deep--color-background-support-pink-deep#570041
Background/Support/Pink/Pale--color-background-support-pink-pale#FF05770B
Background/Support/Pink/Soft--color-background-support-pink-soft#FFBADF
Background/Support/Pink/Solid--color-background-support-pink-solid#E854B2
Background/Support/Pink/Subtle--color-background-support-pink-subtle#FF027A15
Background/Support/Plum/Deep--color-background-support-plum-deep#46004E
Background/Support/Plum/Pale--color-background-support-plum-pale#FF05E80B
Background/Support/Plum/Soft--color-background-support-plum-soft#F7BBF6
Background/Support/Plum/Solid--color-background-support-plum-solid#BB4ABF
Background/Support/Plum/Subtle--color-background-support-plum-subtle#FF02F416
Background/Support/Purple/Deep--color-background-support-purple-deep#360057
Background/Support/Purple/Pale--color-background-support-purple-pale#9B05FF0A
Background/Support/Purple/Soft--color-background-support-purple-soft#E4C1FF
Background/Support/Purple/Solid--color-background-support-purple-solid#9141C3
Background/Support/Purple/Subtle--color-background-support-purple-subtle#9A02FF14
Background/Support/Red/Deep--color-background-support-red-deep#580300
Background/Support/Red/Pale--color-background-support-red-pale#FF3B000D
Background/Support/Red/Soft--color-background-support-red-soft#FFC0AF
Background/Support/Red/Solid--color-background-support-red-solid#E5532E
Background/Support/Red/Subtle--color-background-support-red-subtle#FF350219
Background/Support/Teal/Deep--color-background-support-teal-deep#003932
Background/Support/Teal/Pale--color-background-support-teal-pale#02CC9A14
Background/Support/Teal/Soft--color-background-support-teal-soft#9EDACD
Background/Support/Teal/Solid--color-background-support-teal-solid#02B19C
Background/Support/Teal/Subtle--color-background-support-teal-subtle#00BE9027
Background/Support/Violet/Deep--color-background-support-violet-deep#27006E
Background/Support/Violet/Pale--color-background-support-violet-pale#2105FF09
Background/Support/Violet/Soft--color-background-support-violet-soft#CEC9FF
Background/Support/Violet/Solid--color-background-support-violet-solid#7755E7
Background/Support/Violet/Subtle--color-background-support-violet-subtle#1E01FF12
Background/Support/Yellow/Deep--color-background-support-yellow-deep#45371B
Background/Support/Yellow/Pale--color-background-support-yellow-pale#FF9C0217
Background/Support/Yellow/Soft--color-background-support-yellow-soft#FFD796
Background/Support/Yellow/Solid--color-background-support-yellow-solid#FFBA1A
Background/Support/Yellow/Subtle--color-background-support-yellow-subtle#FF9E012F
Background/Surface/Alt--color-background-surface-alt#F7F7F7
Background/Surface/Default--color-background-surface-default#FFFFFF
Background/Surface/Glass--color-background-surface-glass#FFFFFF8E
Background/Warning/Flat/Default--color-background-warning-flat-default#FFFFFF00
Background/Warning/Flat/Hover--color-background-warning-flat-hover#FF9C0217
Background/Warning/Flat/Pressed--color-background-warning-flat-pressed#FF9E012F
Background/Warning/Solid/Default--color-background-warning-solid-default#FFBA1A
Background/Warning/Solid/Hover--color-background-warning-solid-hover#E8A800
Background/Warning/Solid/Pressed--color-background-warning-solid-pressed#946B00
Background/Warning/Subtle/Default--color-background-warning-subtle-default#FF9E012F
Background/Warning/Subtle/Hover--color-background-warning-subtle-hover#FF9E0069
Background/Warning/Subtle/Pressed--color-background-warning-subtle-pressed#F49B0091
Background/White-Disabled--color-background-white-disabled#FFFFFF24
Background/White-Overlay/Default--color-background-white-overlay-default#FFFFFF4D
Background/White-Overlay/Hover--color-background-white-overlay-hover#FFFFFF66
Background/White-Overlay/Pressed--color-background-white-overlay-pressed#FFFFFF80
Background/White-Solid/Default--color-background-white-solid-default#FFFFFF
Background/White-Solid/Hover--color-background-white-solid-hover#F7F7F7
Background/White-Solid/Pressed--color-background-white-solid-pressed#EFEFEF

Color/Border: 94 token

Border/Accent/Solid/Default--color-border-accent-solid-default#00A85E
Border/Accent/Solid/Hover--color-border-accent-solid-hover#009A54
Border/Accent/Solid/Pressed--color-border-accent-solid-pressed#008241
Border/Accent/Subtle/Default--color-border-accent-subtle-default#00A9323E
Border/Accent/Subtle/Hover--color-border-accent-subtle-hover#00A53557
Border/Accent/Subtle/Pressed--color-border-accent-subtle-pressed#009F3579
Border/Active/Accent/Solid--color-border-active-accent-solid#00A85E
Border/Active/Accent/Subtle--color-border-active-accent-subtle#00A53557
Border/Active/Neutral/Solid--color-border-active-neutral-solid#0D0D0D
Border/Active/Neutral/Subtle--color-border-active-neutral-subtle#01010124
Border/Container/Solid--color-border-container-solid#0D0D0D
Border/Container/Subtle--color-border-container-subtle#01010110
Border/Disabled--color-border-disabled#EFEFEF
Border/Info/Solid/Default--color-border-info-solid-default#0A85FF
Border/Info/Solid/Hover--color-border-info-solid-hover#0074E0
Border/Info/Solid/Pressed--color-border-info-solid-pressed#004E98
Border/Info/Subtle/Default--color-border-info-subtle-default#006DFF50
Border/Info/Subtle/Hover--color-border-info-subtle-hover#006FFF67
Border/Info/Subtle/Pressed--color-border-info-subtle-pressed#0070FF79
Border/Inverse--color-border-inverse#FFFFFF
Border/Negative/Solid/Default--color-border-negative-solid-default#E5532E
Border/Negative/Solid/Hover--color-border-negative-solid-hover#D03E19
Border/Negative/Solid/Pressed--color-border-negative-solid-pressed#941B00
Border/Negative/Subtle/Default--color-border-negative-subtle-default#FF360050
Border/Negative/Subtle/Hover--color-border-negative-subtle-hover#FF350066
Border/Negative/Subtle/Pressed--color-border-negative-subtle-pressed#FF330078
Border/Neutral/Pale/Default--color-border-neutral-pale-default#01010110
Border/Neutral/Pale/Hover--color-border-neutral-pale-hover#02020215
Border/Neutral/Pale/Pressed--color-border-neutral-pale-pressed#0101011D
Border/Neutral/Solid/Default--color-border-neutral-solid-default#0D0D0D
Border/Neutral/Solid/Hover--color-border-neutral-solid-hover#5C5C5C
Border/Neutral/Solid/Pressed--color-border-neutral-solid-pressed#7E7E7E
Border/Neutral/Subtle/Default--color-border-neutral-subtle-default#0101011D
Border/Neutral/Subtle/Hover--color-border-neutral-subtle-hover#01010124
Border/Neutral/Subtle/Pressed--color-border-neutral-subtle-pressed#0101012F
Border/Overlay/Pale/Default--color-border-overlay-pale-default#FCFCFC11
Border/Overlay/Pale/Hover--color-border-overlay-pale-hover#FFFFFF1A
Border/Overlay/Pale/Pressed--color-border-overlay-pale-pressed#FDFDFD20
Border/Overlay/Solid/Default--color-border-overlay-solid-default#F5F5F5
Border/Overlay/Solid/Hover--color-border-overlay-solid-hover#CECECE
Border/Overlay/Solid/Pressed--color-border-overlay-solid-pressed#959595
Border/Overlay/Subtle/Default--color-border-overlay-subtle-default#FFFFFF1A
Border/Overlay/Subtle/Hover--color-border-overlay-subtle-hover#FDFDFD20
Border/Overlay/Subtle/Pressed--color-border-overlay-subtle-pressed#FFFFFF2A
Border/Popover/Solid--color-border-popover-solid#0D0D0D
Border/Popover/Subtle--color-border-popover-subtle#01010110
Border/Positive/Solid/Default--color-border-positive-solid-default#6ED507
Border/Positive/Solid/Hover--color-border-positive-solid-hover#63CA00
Border/Positive/Solid/Pressed--color-border-positive-solid-pressed#41810B
Border/Positive/Subtle/Default--color-border-positive-subtle-default#45C90055
Border/Positive/Subtle/Hover--color-border-positive-subtle-hover#40B9006D
Border/Positive/Subtle/Pressed--color-border-positive-subtle-pressed#3DAA008C
Border/Support/Blue/Solid--color-border-support-blue-solid#0A85FF
Border/Support/Blue/Subtle--color-border-support-blue-subtle#006DFF50
Border/Support/Brand/Solid--color-border-support-brand-solid#00A85E
Border/Support/Brand/Subtle--color-border-support-brand-subtle#00A9323E
Border/Support/Bronze/Solid--color-border-support-bronze-solid#DC754C
Border/Support/Bronze/Subtle--color-border-support-bronze-subtle#F3440053
Border/Support/Brown/Solid--color-border-support-brown-solid#9F6838
Border/Support/Brown/Subtle--color-border-support-brown-subtle#C2560053
Border/Support/Crimson/Solid--color-border-support-crimson-solid#E94E75
Border/Support/Crimson/Subtle--color-border-support-crimson-subtle#FF002342
Border/Support/Cyan/Solid--color-border-support-cyan-solid#10AEDA
Border/Support/Cyan/Subtle--color-border-support-cyan-subtle#0097D362
Border/Support/Golden/Solid--color-border-support-golden-solid#C99A2C
Border/Support/Golden/Subtle--color-border-support-golden-subtle#D990007A
Border/Support/Green/Solid--color-border-support-green-solid#3FAB53
Border/Support/Green/Subtle--color-border-support-green-subtle#01940956
Border/Support/Indigo/Solid--color-border-support-indigo-solid#4752F0
Border/Support/Indigo/Subtle--color-border-support-indigo-subtle#0135FF3F
Border/Support/Neutral/Solid--color-border-support-neutral-solid#8D8D8D
Border/Support/Neutral/Subtle--color-border-support-neutral-subtle#0101011D
Border/Support/Orange/Solid--color-border-support-orange-solid#ED8002
Border/Support/Orange/Subtle--color-border-support-orange-subtle#FF6C006A
Border/Support/Pink/Solid--color-border-support-pink-solid#E854B2
Border/Support/Pink/Subtle--color-border-support-pink-subtle#FF008945
Border/Support/Plum/Solid--color-border-support-plum-solid#BB4ABF
Border/Support/Plum/Subtle--color-border-support-plum-subtle#E100DD44
Border/Support/Purple/Solid--color-border-support-purple-solid#9141C3
Border/Support/Purple/Subtle--color-border-support-purple-subtle#9001FF3E
Border/Support/Red/Solid--color-border-support-red-solid#E5532E
Border/Support/Red/Subtle--color-border-support-red-subtle#FF360050
Border/Support/Teal/Solid--color-border-support-teal-solid#02B19C
Border/Support/Teal/Subtle--color-border-support-teal-subtle#009E7C61
Border/Support/Violet/Solid--color-border-support-violet-solid#7755E7
Border/Support/Violet/Subtle--color-border-support-violet-subtle#1800FF36
Border/Support/Yellow/Solid--color-border-support-yellow-solid#FFBA1A
Border/Support/Yellow/Subtle--color-border-support-yellow-subtle#F49B0091
Border/Warning/Solid/Default--color-border-warning-solid-default#FFBA1A
Border/Warning/Solid/Hover--color-border-warning-solid-hover#E8A800
Border/Warning/Solid/Pressed--color-border-warning-solid-pressed#946B00
Border/Warning/Subtle/Default--color-border-warning-subtle-default#F49B0091
Border/Warning/Subtle/Hover--color-border-warning-subtle-hover#E39200A1
Border/Warning/Subtle/Pressed--color-border-warning-subtle-pressed#D48900AB

Color/Content: 89 token

Content/Accent/Base--color-content-accent-base#008241
Content/Accent/Light--color-content-accent-light#009A54
Content/Accent/Strongest--color-content-accent-strongest#193D26
Content/Disabled--color-content-disabled#00000044
Content/Hyperlink/Default--color-content-hyperlink-default#0074E0
Content/Hyperlink/Pressed--color-content-hyperlink-pressed#004E98
Content/Hyperlink/Visited--color-content-hyperlink-visited#002B56
Content/Info/Base--color-content-info-base#004E98
Content/Info/Light--color-content-info-light#0074E0
Content/Info/Strongest--color-content-info-strongest#002B56
Content/Inverse/Base--color-content-inverse-base#FFFFFFCB
Content/Inverse/Light--color-content-inverse-light#FFFFFF8E
Content/Inverse/Strongest--color-content-inverse-strongest#F5F5F5
Content/Negative/Base--color-content-negative-base#941B00
Content/Negative/Light--color-content-negative-light#D03E19
Content/Negative/Strongest--color-content-negative-strongest#580300
Content/Neutral/Base--color-content-neutral-base#000000A3
Content/Neutral/Light--color-content-neutral-light#00000081
Content/Neutral/Strongest--color-content-neutral-strongest#0D0D0D
Content/On-Accent/Default--color-content-on-accent-default#FFFFFF
Content/On-Accent/Hover--color-content-on-accent-hover#FFFFFF
Content/On-Accent/Pressed--color-content-on-accent-pressed#FFFFFF
Content/On-Brights--color-content-on-brights#000000DB
Content/On-Colors--color-content-on-colors#FFFFFF
Content/On-Dark-Overlay/Base--color-content-on-dark-overlay-base#FFFFFFCB
Content/On-Dark-Overlay/Disabled--color-content-on-dark-overlay-disabled#FFFFFF39
Content/On-Dark-Overlay/Light--color-content-on-dark-overlay-light#FFFFFF5C
Content/On-Dark-Overlay/Placeholder--color-content-on-dark-overlay-placeholder#FFFFFF55
Content/On-Dark-Overlay/Strongest--color-content-on-dark-overlay-strongest#FFFFFFF4
Content/On-White-Overlay/Base--color-content-on-white-overlay-base#000000A3
Content/On-White-Overlay/Disabled--color-content-on-white-overlay-disabled#0101012F
Content/On-White-Overlay/Light--color-content-on-white-overlay-light#01010172
Content/On-White-Overlay/Placeholder--color-content-on-white-overlay-placeholder#00000044
Content/On-White-Overlay/Strongest--color-content-on-white-overlay-strongest#000000F2
Content/Placeholder--color-content-placeholder#00000044
Content/Positive/Base--color-content-positive-base#41810B
Content/Positive/Light--color-content-positive-light#63CA00
Content/Positive/Strongest--color-content-positive-strongest#274218
Content/Support/Blue/Base--color-content-support-blue-base#004E98
Content/Support/Blue/Light--color-content-support-blue-light#0074E0
Content/Support/Blue/Strongest--color-content-support-blue-strongest#002B56
Content/Support/Bronze/Base--color-content-support-bronze-base#883717
Content/Support/Bronze/Light--color-content-support-bronze-light#C8623A
Content/Support/Bronze/Strongest--color-content-support-bronze-strongest#571400
Content/Support/Brown/Base--color-content-support-brown-base#754B24
Content/Support/Brown/Light--color-content-support-brown-light#8C5725
Content/Support/Brown/Strongest--color-content-support-brown-strongest#422301
Content/Support/Crimson/Base--color-content-support-crimson-base#941140
Content/Support/Crimson/Light--color-content-support-crimson-light#D33965
Content/Support/Crimson/Strongest--color-content-support-crimson-strongest#590023
Content/Support/Cyan/Base--color-content-support-cyan-base#005F7B
Content/Support/Cyan/Light--color-content-support-cyan-light#009AC3
Content/Support/Cyan/Strongest--color-content-support-cyan-strongest#00374A
Content/Support/Golden/Base--color-content-support-golden-base#8C6E28
Content/Support/Golden/Light--color-content-support-golden-light#B58808
Content/Support/Golden/Strongest--color-content-support-golden-strongest#423822
Content/Support/Green/Base--color-content-support-green-base#006425
Content/Support/Green/Light--color-content-support-green-light#259842
Content/Support/Green/Strongest--color-content-support-green-strongest#003914
Content/Support/Indigo/Base--color-content-support-indigo-base#272DB1
Content/Support/Indigo/Light--color-content-support-indigo-light#383DDB
Content/Support/Indigo/Strongest--color-content-support-indigo-strongest#0F0075
Content/Support/Orange/Base--color-content-support-orange-base#A15200
Content/Support/Orange/Light--color-content-support-orange-light#D47000
Content/Support/Orange/Strongest--color-content-support-orange-strongest#542A08
Content/Support/Pink/Base--color-content-support-pink-base#8F146B
Content/Support/Pink/Light--color-content-support-pink-light#D23FA0
Content/Support/Pink/Strongest--color-content-support-pink-strongest#570041
Content/Support/Plum/Base--color-content-support-plum-base#781A7F
Content/Support/Plum/Light--color-content-support-plum-light#A736AC
Content/Support/Plum/Strongest--color-content-support-plum-strongest#46004E
Content/Support/Purple/Base--color-content-support-purple-base#621E8D
Content/Support/Purple/Light--color-content-support-purple-light#7E2DB0
Content/Support/Purple/Strongest--color-content-support-purple-strongest#360057
Content/Support/Red/Base--color-content-support-red-base#941B00
Content/Support/Red/Light--color-content-support-red-light#D03E19
Content/Support/Red/Strongest--color-content-support-red-strongest#580300
Content/Support/Teal/Base--color-content-support-teal-base#006358
Content/Support/Teal/Light--color-content-support-teal-light#009C8A
Content/Support/Teal/Strongest--color-content-support-teal-strongest#003932
Content/Support/Violet/Base--color-content-support-violet-base#4A2BA4
Content/Support/Violet/Light--color-content-support-violet-light#6641D3
Content/Support/Violet/Strongest--color-content-support-violet-strongest#27006E
Content/Support/Yellow/Base--color-content-support-yellow-base#946B00
Content/Support/Yellow/Light--color-content-support-yellow-light#E8A800
Content/Support/Yellow/Strongest--color-content-support-yellow-strongest#45371B
Content/Warning/Base--color-content-warning-base#946B00
Content/Warning/Light--color-content-warning-light#E8A800
Content/Warning/Strongest--color-content-warning-strongest#45371B

Color/Focus: 4 token

Focus/Accent/Solid--color-focus-accent-solid#00A85E
Focus/Accent/Subtle--color-focus-accent-subtle#00A53557
Focus/Neutral/Solid--color-focus-neutral-solid#0D0D0D
Focus/Neutral/Subtle--color-focus-neutral-subtle#0101012F

Color/Shadow: 9 token

Shadow/Inverse/Base--color-shadow-inverse-base#00000014
Shadow/Inverse/Light--color-shadow-inverse-light#0000000A
Shadow/Inverse/Strong--color-shadow-inverse-strong#0000001F
Shadow/Inverse/Stronger--color-shadow-inverse-stronger#00000073
Shadow/Inverse/Strongest--color-shadow-inverse-strongest#0D0D0D
Shadow/Neutral/Base--color-shadow-neutral-base#00000014
Shadow/Neutral/Light--color-shadow-neutral-light#0000000A
Shadow/Neutral/Strong--color-shadow-neutral-strong#0000001F
Shadow/Neutral/Strongest--color-shadow-neutral-strongest#00000029

Darkmode: 1 token

Darkmode--darkmode—

Section 02

Color Tiers

Files by Tier

1
src/styles/color/1-global.cssTier 1, thang màu gốc. Token riêng của hệ thống, dùng thẳng là mất theming.
2
src/styles/color/2-base.cssTier 2, bảng màu của brand. Mode data-brand (casso | cas-id).
3
src/styles/color/3-semantic.cssTier 3, màu theo vai trò. Mode data-theme (light | dark). Tier nên dùng.
4
src/styles/color/4-component.cssTier 4, màu riêng của component. Mode data-emphasis (brand | neutral).

One Color Through Four Tiers

--button-primary-background-default       tier 4  Button only
        ↓
--color-background-accent-solid-default   tier 3  role: accent solid background
        ↓
--_b-brand-9                              tier 2  brand palette
        ↓
--_g-casso-light-casso-9   =  #00A85E     tier 1  global scale

Tên token tier 1 và tier 2 bắt đầu bằng dấu gạch dưới (--_g, --_b) vì đây là token riêng của hệ thống. Dùng thẳng thì mất theming: bật Dark mode hay đổi brand, màu không đổi theo.

Hai token cùng màu nhưng khác vai trò thì chọn theo vai trò, không chọn theo giá trị.