Extracted from https://stripe.com/ · theme: dark

Design Preview

Dark SaaS interface with near-black backgrounds, muted typography, subtle borders, compact controls, and restrained accent colors.

CSS vars raw13800
CSS vars unique1128
Color hits1260
Component hits156
Colors147
Complex75
Buttons5
Links4
Sections8

Colors

Primary
#533afd
Accent
#533afd
Background
#ffffff
Surface
#ffffff
Surface Alt
#141516
Border
#000000
Text
#533afd
Muted
#533afd

Resolved Token Decisions

primary
#533afd
source: css-variable
confidence: 94%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #e2e4ff (805), #ea2261 (774)
accent
#533afd
source: css-variable
confidence: 86%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #e2e4ff (818), #ea2261 (786)
secondary
#533afd
source: css-variable
confidence: 94%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #e2e4ff (793), #ea2261 (767)
background
#ffffff
source: css-variable
confidence: 94%
evidence: --hds-color-surface-bg-quiet: #fff (weight 72; CSS variable --hds-color-surface-bg-quiet)
alternatives: #e5edf5 (403), #533afd (271)
surface
#ffffff
source: css-variable
confidence: 97%
evidence: --hds-color-surface-bg-quiet: #fff (weight 72; CSS variable --hds-color-surface-bg-quiet)
alternatives: #e5edf5 (492), #533afd (334.8)
surface-alt
#141516
source: fallback
confidence: 35%
evidence: fallback
alternatives: none
border
#000000
source: computed-style
confidence: 86%
evidence: color on [class*="card"]: rgb(0, 0, 0) (weight 281; computed color on [class*="card"])
alternatives: #533afd (1144.6), #061b31 (523.7)
text-primary
#533afd
source: css-variable
confidence: 94%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #061b31 (1169), #ffffff (1110)
text-secondary
#533afd
source: css-variable
confidence: 97%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #061b31 (1282.6), #000000 (1166)
text-muted
#533afd
source: css-variable
confidence: 94%
evidence: color on a: rgb(83, 58, 253) (weight 199; computed color on a)
alternatives: #061b31 (1158), #000000 (1060)
text-subtle
#62666d
source: fallback
confidence: 35%
evidence: fallback
alternatives: none

All Captured Colors

Text

text · 894 hit(s)
#533afd
css variable
text · 414 hit(s)
#fff
css variable
text · 328 hit(s)
rgb(0, 0, 0)
text/content, border/divider, background/surface, card/component surface
text · 306 hit(s)
#2e2b8c
css variable
text · 270 hit(s)
#4032c8
css variable
text · 216 hit(s)
#95a4ba
css variable
text · 198 hit(s)
#e5edf5
css variable
text · 198 hit(s)
#061b31
css variable
text · 180 hit(s)
#273951
css variable
text · 180 hit(s)
#d4dee9
css variable
text · 162 hit(s)
#b9b9f9
css variable
text · 162 hit(s)
#d6d9fc
css variable
text · 182 hit(s)
rgb(83, 58, 253)
text/content, border/divider, background/surface, link/component action
text · 126 hit(s)
#64748d
css variable
text · 126 hit(s)
#e2e4ff
css variable
text · 126 hit(s)
#7f7dfc
css variable
text · 108 hit(s)
#665efd
css variable
text · 108 hit(s)
#50617a
css variable
text · 94 hit(s)
#ea2261
css variable
text · 94 hit(s)
#fed9de
css variable
text · 90 hit(s)
#7d8ba4
css variable
text · 90 hit(s)
#f8fafd
css variable
text · 90 hit(s)
#d8351e
css variable
text · 90 hit(s)
#e8e9ff
css variable
text · 86 hit(s)
#7389ff
css variable
text · 80 hit(s)
#ff6118
css variable
text · 80 hit(s)
#f44bcc
css variable
text · 76 hit(s)
#ffe6f5
css variable
text · 76 hit(s)
#fff2d8
css variable
text · 76 hit(s)
#ffe5da
css variable
text · 76 hit(s)
#e8a30b
css variable
text · 74 hit(s)
#0d1738
css variable
text · 74 hit(s)
#45639d
css variable
text · 72 hit(s)
#1c1e54
css variable
text · 70 hit(s)
#a8bfff
css variable
text · 70 hit(s)
#92adff
css variable
text · 66 hit(s)
#b51145
css variable
text · 62 hit(s)
#5d64fe
css variable
text · 58 hit(s)
#ffd7ef
css variable
text · 58 hit(s)
#ffd8c6
css variable
text · 58 hit(s)
#ffe1a3
css variable
text · 54 hit(s)
#f5f5ff
css variable
text · 54 hit(s)
#00b261
css variable
text · 54 hit(s)
#bac8da
css variable
text · 50 hit(s)
#362baa
css variable
text · 48 hit(s)
#f9b900
css variable
text · 48 hit(s)
#f3432a
css variable
text · 46 hit(s)
#273f73
css variable
text · 46 hit(s)
#23356e
css variable
text · 44 hit(s)
#9b6829
css variable
text · 44 hit(s)
#5d1c3c
css variable
text · 44 hit(s)
#483414
css variable
text · 44 hit(s)
#a51d85
css variable
text · 44 hit(s)
#4f2055
css variable
text · 44 hit(s)
#ab3500
css variable
text · 44 hit(s)
#56281b
css variable
text · 42 hit(s)
#839bc8
css variable
text · 42 hit(s)
#a3b5d6
css variable
text · 40 hit(s)
#a01400
css variable
text · 40 hit(s)
#006f3a
css variable
text · 40 hit(s)
#b6f2c7
css variable
text · 40 hit(s)
#fee8eb
css variable
text · 40 hit(s)
#feb9ac
css variable
text · 38 hit(s)
rgb(80, 97, 122)
text/content, border/divider
text · 38 hit(s)
#c3d3ff
css variable
text · 36 hit(s)
#0d253d
css variable
text · 36 hit(s)
#11273e
css variable
text · 36 hit(s)
#9a9afe
css variable
text · 36 hit(s)
#3c4f69
css variable
text · 36 hit(s)
#e2225f
css variable
text · 36 hit(s)
#0f1137
css variable
text · 36 hit(s)
#161741
css variable
text · 36 hit(s)
#cf2cab
css variable
text · 36 hit(s)
#d04900
css variable
text · 36 hit(s)
#1a2c44
css variable
text · 34 hit(s)
#e4eaff
css variable
text · 34 hit(s)
#182659
css variable
text · 34 hit(s)
#122054
css variable
text · 34 hit(s)
#ccdaff
css variable
text · 40 hit(s)
#1c1b5a
css variable, shadow/elevation
text · 30 hit(s)
#f2f7fe
css variable
text · 30 hit(s)
#6480b2
css variable
text · 30 hit(s)
#2c2484
css variable
text · 26 hit(s)
#c0cee6
css variable
text · 26 hit(s)
#f6f7ff
css variable
text · 26 hit(s)
#d4deef
css variable
text · 22 hit(s)
#e3ecf7
css variable
text · 22 hit(s)
#222069
css variable
text · 22 hit(s)
#171055
css variable
text · 22 hit(s)
#101d4e
css variable
text · 22 hit(s)
#191a51
css variable
text · 18 hit(s)
#f96bee
css variable
text · 18 hit(s)
#f98bf9
css variable
text · 18 hit(s)
#fd6252
css variable
text · 18 hit(s)
#ffd552
css variable
text · 18 hit(s)
#b262f9
css variable
text · 18 hit(s)
#fd5d7c
css variable

Border

border · 168 hit(s)
rgb(6, 27, 49)
text/content, border/divider, button/component action, link/component action, card/component surface
border · 82 hit(s)
rgb(255, 255, 255)
text/content, border/divider, background/surface, link/component action
border · 44 hit(s)
rgb(100, 116, 141)
text/content, border/divider, button/component action

Showing 100 of 147 colors. Full inventory is preserved in tokens.json.

Complex Color Values

Shadow / Complex

ValueUsageOccurrencesWeight
0pxshadow/elevation288576
#ffffff00css variable144576
#d4dee9bfcss variable90360
#1658bc08css variable36144
#acacff1fcss variable36144
2pxshadow/elevation54108
4pxshadow/elevation54108
#4834dbb2css variable26104
#582be233css variable2288
#17297080css variable2288
rgba(255, 255, 255, 0)background/surface2880
5pxshadow/elevation3672
10pxshadow/elevation3672
#0037701ashadow/elevation3672
20pxshadow/elevation3672
-16pxshadow/elevation3672
8pxshadow/elevation3672
-2pxshadow/elevation3672
#003b890ashadow/elevation3672
#4b31d080css variable1872
#a8c3de4dcss variable1872
#ffffffa6css variable1872
#ffffff40css variable1872
#23357a80css variable1872
#7680f54dcss variable1872
#b9b9f999css variable1872
#ffffff80css variable1872
#a3a7ff40css variable1872
#2f458ba6css variable1872
#b9b9f94dcss variable1872
#9a9afe1fcss variable1872
#7591b580css variable1872
color-mix(in srgb,#e5edf5 50%,transparent)css variable1872
#0d173826shadow/elevation2448
#0d173833shadow/elevation2448
#23356ea6css variable1248
rgb(0, 0, 0) rgb(229, 237, 245)border/divider741
#00377014shadow/elevation1836
#003b890fshadow/elevation1836
22pxshadow/elevation1836
#061b311fshadow/elevation1836
#003b890dshadow/elevation1836
0px 20px 80px -16px #00377024,0px 10px 60px -16px #003b890fshadow/elevation1836
0px 6px 22px 0px #0037701a,0px 4px 8px 0px #003b8905shadow/elevation1836
60pxshadow/elevation1836
#003b8905shadow/elevation1836
#27395114shadow/elevation1836
80pxshadow/elevation1836
14pxshadow/elevation1836
15pxshadow/elevation1836
0px 16px 32px rgba(50,50,93,.12)shadow/elevation1836
6pxshadow/elevation1836
0px 15px 40px -2px #0037701a,0px 5px 20px -2px #003b890ashadow/elevation1836
#00377024shadow/elevation1836
0px 2px 10px 0px #0037700f,0px 1px 4px 0px #003b890ashadow/elevation1836
0px 5px 14px 0px #00377014,0px 2px 8px 0px #003b890dshadow/elevation1836
#0037700fshadow/elevation1836
1pxshadow/elevation1836
40pxshadow/elevation1836
#44556699css variable832
#0d17380dcss variable416
#45639d99css variable416
#0000001acss variable416
#23356e00css variable416
#362baa99css variable416
#17105559css variable416
#2c248480css variable416
#273f7380css variable416
color-mix(in srgb,#bac8da 50%,transparent)css variable28
rgb(0, 0, 0) rgb(24, 38, 89)border/divider16
rgb(0, 0, 0) rgb(229, 237, 245) rgb(229, 237, 245)border/divider16
radial-gradient(circle,#f72df3,#533afd 33%,#e5edf5 66%)border/divider12
radial-gradient(circle,#ffad00,#ff7600 33%,#e5edf5 66%)border/divider12

Transparent

ValueUsageOccurrencesWeight
rgba(0, 0, 0, 0)background/surface, button/component action, link/component action, card/component surface3751552
rgb(0, 0, 0) rgba(0, 0, 0, 0)border/divider16

Typography

Heading One

Heading Two

Heading Three

Body text uses the extracted font, rhythm, color, and line height. This sample helps validate whether the hierarchy feels close to the original site.

Example link style

Captured Buttons

default
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
hover
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
focus
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
active
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
variant: link
tag: button
selector: button.hds-button.hds-navigation-menu__trigger.hds-button--transparent
background: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
radius: 4px
padding: 12px 0px 12px 0px
height: 40px
default
bg: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
border: 0px none rgb(100, 116, 141)
hover
bg: rgba(0, 0, 0, 0)
text: rgb(79, 96, 120)
border: 0px none rgb(79, 96, 120)
focus
bg: rgba(0, 0, 0, 0)
text: rgb(69, 87, 111)
border: 0px none rgb(69, 87, 111)
active
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
variant: link
tag: button
selector: button.hds-button.hds-navigation-menu__trigger.hds-button--transparent
background: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
radius: 4px
padding: 12px 0px 12px 0px
height: 40px
default
bg: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
border: 0px none rgb(100, 116, 141)
hover
bg: rgba(0, 0, 0, 0)
text: rgb(80, 97, 121)
border: 0px none rgb(80, 97, 121)
focus
bg: rgba(0, 0, 0, 0)
text: rgb(70, 88, 112)
border: 0px none rgb(70, 88, 112)
active
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
variant: link
tag: button
selector: button.hds-button.hds-navigation-menu__trigger.hds-button--transparent
background: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
radius: 4px
padding: 12px 0px 12px 0px
height: 40px
default
bg: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
border: 0px none rgb(100, 116, 141)
hover
bg: rgba(0, 0, 0, 0)
text: rgb(78, 95, 119)
border: 0px none rgb(78, 95, 119)
focus
bg: rgba(0, 0, 0, 0)
text: rgb(68, 86, 110)
border: 0px none rgb(68, 86, 110)
active
bg: rgba(0, 0, 0, 0)
text: rgb(6, 27, 49)
border: 0px none rgb(6, 27, 49)
variant: link
tag: button
selector: button.hds-button.hds-navigation-menu__trigger.hds-button--transparent
background: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
radius: 4px
padding: 12px 0px 12px 0px
height: 40px
default
bg: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
border: 0px none rgb(100, 116, 141)
hover
bg: rgba(0, 0, 0, 0)
text: rgb(79, 96, 121)
border: 0px none rgb(79, 96, 121)
focus
bg: rgba(0, 0, 0, 0)
text: rgb(70, 88, 112)
border: 0px none rgb(70, 88, 112)
active
bg: rgba(0, 0, 0, 0)
text: rgb(7, 28, 50)
border: 0px none rgb(7, 28, 50)
variant: link
tag: a
selector: a.hds-button.hds-navigation-menu__trigger.hds-button--transparent
background: rgba(0, 0, 0, 0)
text: rgb(100, 116, 141)
radius: 4px
padding: 12px 0px 12px 0px
height: 38px

Captured Links

default
Link 1
color: rgb(83, 58, 253)
decoration: none
border: 0px none rgb(83, 58, 253)
hover
Link 1
color: rgb(46, 43, 140)
decoration: none
border: 0px none rgb(46, 43, 140)
focus
Link 1
color: rgb(46, 43, 140)
decoration: none
border: 0px none rgb(46, 43, 140)
active
Link 1
color: rgb(46, 43, 140)
decoration: none
border: 0px none rgb(46, 43, 140)
tag: a
selector: a.hds-link.navigation-menu-home-link
href: https://stripe.com/
color: rgb(83, 58, 253)
decoration: none
font: 16px / 400
default
Plano de preços
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
hover
Plano de preços
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
focus
Plano de preços
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
active
Plano de preços
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
tag: a
selector: a.hds-button.hds-navigation-menu__trigger.hds-button--transparent
href: https://stripe.com/br/pricing
color: rgb(6, 27, 49)
decoration: none
font: 14px / 400
default
Entrar
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
focus
Entrar
color: rgb(6, 27, 49)
decoration: none
border: 0px none rgb(6, 27, 49)
tag: a
selector: a.hds-button.hds-navigation-menu__trigger.hds-button--transparent
href: https://dashboard.stripe.com/login
color: rgb(6, 27, 49)
decoration: none
font: 14px / 400
default
Comece agora
color: rgb(255, 255, 255)
decoration: none
border: 0px none rgb(255, 255, 255)
focus
Comece agora
color: rgb(255, 255, 255)
decoration: none
border: 0px none rgb(255, 255, 255)
tag: a
selector: a.hds-button.hds-button--primary
href: https://dashboard.stripe.com/register
color: rgb(255, 255, 255)
decoration: none
font: 16px / 400

Background Images

card / [class*="card"]
radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)
Fallback color: rgba(0, 0, 0, 0)
component / [class*="background"]
radial-gradient(50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)
Fallback color: rgba(0, 0, 0, 0)
component / [class*="background"]
radial-gradient(50% 50%, rgba(83, 58, 253, 0.8) 62.5%, rgba(83, 58, 253, 0) 100%)
Fallback color: rgba(0, 0, 0, 0)
component / [class*="background"]
radial-gradient(50% 50%, rgba(243, 99, 243, 0.8) 53.85%, rgba(243, 99, 243, 0) 100%)
Fallback color: rgba(0, 0, 0, 0)
component / [class*="background"]
linear-gradient(rgb(255, 255, 255) 41.35%, rgba(255, 255, 255, 0))
Fallback color: rgba(0, 0, 0, 0)
section / section
radial-gradient(66.35% 66.35%, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0) 100%), none
Fallback color: rgba(255, 255, 255, 0.8)

Cards and Inputs

Card Pattern

Background, border, radius, padding, and shadow come from a confidently detected reusable card.

Input Pattern

Use this as a quick sanity check for forms.

CSS Variables

VariableValueCategoryOccurrences
--hds-button-border-width1pxborder4
--hds-canary-dashed-border1px dashed #e5edf5border18
--hds-canary-layout-content-maxWidth-borderscalc(1264px + 2px)border18
--hds-size-input-popover-border-width0pxborder18
--hds-space-button-border1pxborder18
--hds-space-core-border-lg2pxborder18
--hds-space-core-border-md1.25pxborder18
--hds-space-core-border-none0pxborder18
--hds-space-core-border-sm1pxborder18
--hds-space-input-border-default1.25pxborder18
--section-container-border-inlinenoneborder8
--startups-card-border-gradient-bgradial-gradient(circle,#f72df3,#533afd 33%,#e5edf5 66%)border1
--startups-card-border-gradient-bgradial-gradient(circle,#ffad00,#ff7600 33%,#e5edf5 66%)border1
--accent-gradient-color-stop-1#bdb4ffcolor18
--accent-gradient-color-stop-2#643afdcolor18
--accent-gradient-color-stop-3#533afdcolor18
--browser-graphic-dots-colorcolor-mix(in srgb,#bac8da 50%,transparent)color2
--hds-canary-color-border-focus#635bffcolor18
--hds-canary-ui-mini-stroke#e5edf5color18
--hds-canary-ui-strokecolor-mix(in srgb,#e5edf5 50%,transparent)color18
--hds-color-accent-border-quiet#d6d9fccolor18
--hds-color-accent-border-quiet#533afdcolor4
--hds-color-accent-border-solid#533afdcolor18
--hds-color-accent-charm-bg#533afdcolor18
--hds-color-accent-charm-gradientEnd#4032c8color18
--hds-color-accent-charm-gradientMiddle#533afdcolor18
--hds-color-accent-charm-gradientStart#7f7dfccolor18
--hds-color-accent-icon-solid#533afdcolor18
--hds-color-accent-icon-solid#7389ffcolor4
--hds-color-accent-icon-solidAlt#533afdcolor18
--hds-color-accent-icon-solidAlt#0d1738color4
--hds-color-accent-surface-solid#533afdcolor18
--hds-color-accent-surface-subdued#e2e4ffcolor18
--hds-color-accent-surface-subdued#362baacolor4
--hds-color-accent-surface-subduedAlt#e2e4ffcolor18
--hds-color-accent-surface-subduedAlt#533afdcolor4
--hds-color-accent-text-solid#533afdcolor18
--hds-color-accentColorMode-default-icon-gradientEnd#4032c8color18
--hds-color-accentColorMode-default-icon-gradientMiddle#533afdcolor18
--hds-color-accentColorMode-default-icon-gradientStart#7f7dfccolor18
--hds-color-accentColorMode-default-icon-solidAlt#533afdcolor18
--hds-color-accentColorMode-default-icon-solidAlt#0d1738color4
--hds-color-accentColorMode-default-surface-subduedAlt#e2e4ffcolor18
--hds-color-accentColorMode-default-surface-subduedAlt#533afdcolor4
--hds-color-accentColorMode-lemon-border-quiet#ffe1a3color18
--hds-color-accentColorMode-lemon-border-quiet#9b6829color4
--hds-color-accentColorMode-lemon-icon-gradientEnd#ff9014color18
--hds-color-accentColorMode-lemon-icon-gradientMiddle#ffaf2dcolor18
--hds-color-accentColorMode-lemon-icon-gradientStart#ffd552color18
--hds-color-accentColorMode-lemon-icon-solid#e8a30bcolor18
--hds-color-accentColorMode-lemon-icon-solid#f9b900color4
--hds-color-accentColorMode-lemon-icon-solidAlt#e8a30bcolor18
--hds-color-accentColorMode-lemon-icon-solidAlt#0d1738color4
--hds-color-accentColorMode-lemon-surface-subdued#fff2d8color18
--hds-color-accentColorMode-lemon-surface-subdued#483414color4
--hds-color-accentColorMode-lemon-surface-subduedAlt#fff2d8color18
--hds-color-accentColorMode-lemon-surface-subduedAlt#f9b900color4
--hds-color-accentColorMode-magenta-border-quiet#ffd7efcolor18
--hds-color-accentColorMode-magenta-border-quiet#a51d85color4
--hds-color-accentColorMode-magenta-icon-gradientEnd#b262f9color18
--hds-color-accentColorMode-magenta-icon-gradientMiddle#f96beecolor18
--hds-color-accentColorMode-magenta-icon-gradientStart#f98bf9color18
--hds-color-accentColorMode-magenta-icon-solid#f44bcccolor18
--hds-color-accentColorMode-magenta-icon-solidAlt#f44bcccolor18
--hds-color-accentColorMode-magenta-icon-solidAlt#0d1738color4
--hds-color-accentColorMode-magenta-surface-subdued#ffe6f5color18
--hds-color-accentColorMode-magenta-surface-subdued#4f2055color4
--hds-color-accentColorMode-magenta-surface-subduedAlt#ffe6f5color18
--hds-color-accentColorMode-magenta-surface-subduedAlt#f44bcccolor4
--hds-color-accentColorMode-orange-border-quiet#ffd8c6color18
--hds-color-accentColorMode-orange-border-quiet#ab3500color4
--hds-color-accentColorMode-orange-icon-gradientEnd#fd5d7ccolor18
--hds-color-accentColorMode-orange-icon-gradientMiddle#fd6252color18
--hds-color-accentColorMode-orange-icon-gradientStart#fe8c2dcolor18
--hds-color-accentColorMode-orange-icon-solid#ff6118color18
--hds-color-accentColorMode-orange-icon-solidAlt#ff6118color18
--hds-color-accentColorMode-orange-icon-solidAlt#0d1738color4
--hds-color-accentColorMode-orange-surface-subdued#ffe5dacolor18
--hds-color-accentColorMode-orange-surface-subdued#56281bcolor4
--hds-color-accentColorMode-orange-surface-subduedAlt#ffe5dacolor18
--hds-color-accentColorMode-orange-surface-subduedAlt#ff6118color4
--hds-color-accentColorMode-ruby-border-quiet#fed9decolor18
--hds-color-accentColorMode-ruby-border-quiet#b51145color4
--hds-color-accentColorMode-ruby-icon-gradientEnd#b51145color18
--hds-color-accentColorMode-ruby-icon-gradientMiddle#ea2261color18
--hds-color-accentColorMode-ruby-icon-gradientStart#fd7184color18
--hds-color-accentColorMode-ruby-icon-solid#ea2261color18
--hds-color-accentColorMode-ruby-icon-solidAlt#ea2261color18
--hds-color-accentColorMode-ruby-icon-solidAlt#0d1738color4
--hds-color-accentColorMode-ruby-surface-subdued#fed9decolor18
--hds-color-accentColorMode-ruby-surface-subdued#5d1c3ccolor4
--hds-color-accentColorMode-ruby-surface-subduedAlt#fed9decolor18
--hds-color-accentColorMode-ruby-surface-subduedAlt#b51145color4
--hds-color-action-bg-disabled#e5edf5color18
--hds-color-action-bg-disabled#23356ea6color4
--hds-color-action-bg-quiet#e8e9ffcolor18
--hds-color-action-bg-quiet#2c2484color4
--hds-color-action-bg-quietHover#d6d9fccolor18
--hds-color-action-bg-quietHover#362baacolor4
--hds-color-action-bg-solid#533afdcolor18
--hds-color-action-bg-solidHover#4032c8color18
--hds-color-action-bg-solidHover#5d64fecolor4
--hds-color-action-bg-subdued#e2e4ffcolor18
--hds-color-action-bg-subdued#362baacolor4
--hds-color-action-bg-subduedHover#b9b9f9color18
--hds-color-action-bg-subduedHover#533afdcolor4
--hds-color-action-bg-translucent#ffffffa6color18
--hds-color-action-bg-transparent#ffffff00color18
--hds-color-action-border-disabled#d4dee9color18
--hds-color-action-border-disabled#273f73color4
--hds-color-action-border-quiet#d6d9fccolor18
--hds-color-action-border-quiet#533afdcolor4
--hds-color-action-border-solid#533afdcolor18
--hds-color-action-border-solid#7389ffcolor4
--hds-color-action-border-solidHover#4032c8color18
--hds-color-action-border-solidHover#f2f7fecolor4
--hds-color-action-border-subdued#b9b9f9color18
--hds-color-action-border-subdued#533afdcolor4
--hds-color-action-focus-inner-quiet#fffcolor18
--hds-color-action-focus-inner-quiet#0d1738color4
--hds-color-action-focus-inner-subdued#f8fafdcolor18
--hds-color-action-focus-inner-subdued#122054color4
--hds-color-action-focus-outer#533afdcolor18
--hds-color-action-focus-outer#92adffcolor4
--hds-color-action-focus-surface#ffffff00color18
--hds-color-action-icon-disabled#95a4bacolor18
--hds-color-action-icon-disabled#45639dcolor4
--hds-color-action-icon-navigation-soft#50617acolor18
--hds-color-action-icon-navigation-soft#a3b5d6color4
--hds-color-action-icon-navigation-solid#061b31color18
--hds-color-action-icon-navigation-solid#fffcolor4
--hds-color-action-icon-navigation-subdued#64748dcolor18
--hds-color-action-icon-navigation-subdued#839bc8color4
--hds-color-action-icon-onQuiet#533afdcolor18
--hds-color-action-icon-onQuiet#92adffcolor4
--hds-color-action-icon-onSolid#fffcolor18
--hds-color-action-icon-onSubdued#533afdcolor18
--hds-color-action-icon-onSubdued#92adffcolor4
--hds-color-action-icon-onTranslucent#533afdcolor18
--hds-color-action-icon-onTranslucent#92adffcolor4
--hds-color-action-icon-onTransparent#533afdcolor18
--hds-color-action-icon-onTransparent#7389ffcolor4
--hds-color-action-icon-solid#533afdcolor18
--hds-color-action-icon-solid#7389ffcolor4
--hds-color-action-icon-solidAlternate#533afdcolor18
--hds-color-action-icon-solidAlternate#fffcolor4
--hds-color-action-icon-solidAlternateHover#2e2b8ccolor18
--hds-color-action-icon-solidAlternateHover#7389ffcolor4
--hds-color-action-icon-solidHover#2e2b8ccolor18
--hds-color-action-icon-solidHover#a8bfffcolor4
--hds-color-action-text-disabled#95a4bacolor18
--hds-color-action-text-disabled#45639dcolor4
--hds-color-action-text-onQuiet#533afdcolor18
--hds-color-action-text-onQuiet#92adffcolor4
--hds-color-action-text-onSolid#fffcolor18
--hds-color-action-text-onSubdued#533afdcolor18
--hds-color-action-text-onSubdued#92adffcolor4
--hds-color-action-text-onTranslucent#533afdcolor18
--hds-color-action-text-onTranslucent#92adffcolor4
--hds-color-action-text-onTransparent#533afdcolor18
--hds-color-action-text-onTransparent#7389ffcolor4
--hds-color-action-text-secondary#061b31color18
--hds-color-action-text-secondary#fffcolor4
--hds-color-action-text-solid#533afdcolor18
--hds-color-action-text-solid#7389ffcolor4
--hds-color-action-text-solidAlternate#533afdcolor18
--hds-color-action-text-solidAlternate#fffcolor4
--hds-color-action-text-solidAlternateHover#2e2b8ccolor18
--hds-color-action-text-solidAlternateHover#7389ffcolor4
--hds-color-action-text-solidHover#2e2b8ccolor18
--hds-color-action-text-solidHover#a8bfffcolor4
--hds-color-button-primary-bg#533afdcolor18
--hds-color-button-primary-bgDisabled#e5edf5color18
--hds-color-button-primary-bgDisabled#23356ea6color4
--hds-color-button-primary-bgHover#4032c8color18
--hds-color-button-primary-bgHover#5d64fecolor4
--hds-color-button-primary-icon#fffcolor18
--hds-color-button-primary-iconDisabled#95a4bacolor18
--hds-color-button-primary-iconDisabled#45639dcolor4
--hds-color-button-primary-iconHover#fffcolor18
--hds-color-button-primary-text#fffcolor18
--hds-color-button-primary-textDisabled#95a4bacolor18
--hds-color-button-primary-textDisabled#45639dcolor4
--hds-color-button-primary-textHover#fffcolor18
--hds-color-button-secondary-bg#ffffff00color18
--hds-color-button-secondary-bgHover#ffffff00color18
--hds-color-button-secondary-border#d6d9fccolor18
--hds-color-button-secondary-border#4834dbb2color4
--hds-color-button-secondary-borderDisabled#d4dee9color18
--hds-color-button-secondary-borderDisabled#273f73color4
--hds-color-button-secondary-borderHover#4032c8color18
--hds-color-button-secondary-borderHover#5d64fecolor4
--hds-color-button-secondary-borderOnSubdued#b9b9f9color18
--hds-color-button-secondary-borderOnSubdued#4834dbb2color4
--hds-color-button-secondary-icon#533afdcolor18
--hds-color-button-secondary-icon#7389ffcolor4
--hds-color-button-secondary-iconHover#2e2b8ccolor18
--hds-color-button-secondary-iconHover#a8bfffcolor4
--hds-color-button-secondary-text#533afdcolor18
--hds-color-button-secondary-text#fffcolor4
--hds-color-button-secondary-textDisabled#95a4bacolor18
--hds-color-button-secondary-textDisabled#45639dcolor4
--hds-color-button-secondary-textHover#2e2b8ccolor18
--hds-color-button-secondary-textHover#fffcolor4
--hds-color-button-ui-bg#e8e9ffcolor18
--hds-color-button-ui-bg#2c2484color4
--hds-color-button-ui-bgHover#d6d9fccolor18
--hds-color-button-ui-bgHover#362baacolor4
--hds-color-button-ui-bgOnSubdued#e2e4ffcolor18
--hds-color-button-ui-bgOnSubdued#362baacolor4
--hds-color-button-ui-bgOnSubduedHover#b9b9f9color18
--hds-color-button-ui-bgOnSubduedHover#533afdcolor4
--hds-color-button-ui-borderDisabled#d4dee9color18
--hds-color-button-ui-borderDisabled#273f73color4
--hds-color-button-ui-icon#533afdcolor18
--hds-color-button-ui-icon#7389ffcolor4
--hds-color-button-ui-iconDisabled#95a4bacolor18
--hds-color-button-ui-iconDisabled#45639dcolor4
--hds-color-button-ui-iconHover#2e2b8ccolor18
--hds-color-button-ui-iconHover#a8bfffcolor4
--hds-color-core-brand-100#d6d9fccolor18
--hds-color-core-brand-100A#7680f54dcolor18
--hds-color-core-brand-200#b9b9f9color18
--hds-color-core-brand-25#f5f5ffcolor18
--hds-color-core-brand-25A#acacff1fcolor18
--hds-color-core-brand-300#9a9afecolor18
--hds-color-core-brand-400#7f7dfccolor18
--hds-color-core-brand-50#e8e9ffcolor18
--hds-color-core-brand-500#665efdcolor18
--hds-color-core-brand-50A#a3a7ff40color18
--hds-color-core-brand-600#533afdcolor18
--hds-color-core-brand-700#4032c8color18
--hds-color-core-brand-75#e2e4ffcolor18
--hds-color-core-brand-800#2e2b8ccolor18
--hds-color-core-brand-900#1c1e54color18
--hds-color-core-brand-925#1c1e54color18
--hds-color-core-brand-950#161741color18
--hds-color-core-brand-975#0f1137color18
--hds-color-core-brandDark-100#c3d3ffcolor18
--hds-color-core-brandDark-200#a8bfffcolor18
--hds-color-core-brandDark-25#f6f7ffcolor18
--hds-color-core-brandDark-300#92adffcolor18
--hds-color-core-brandDark-400#7389ffcolor18
--hds-color-core-brandDark-50#e4eaffcolor18
--hds-color-core-brandDark-500#5d64fecolor18
--hds-color-core-brandDark-600#533afdcolor18
--hds-color-core-brandDark-700#362baacolor18
--hds-color-core-brandDark-700A#4834dbb2color18
--hds-color-core-brandDark-75#ccdaffcolor18
--hds-color-core-brandDark-800#2c2484color18
--hds-color-core-brandDark-800A#4b31d080color18
--hds-color-core-brandDark-900#222069color18
--hds-color-core-brandDark-925#1c1b5acolor18
--hds-color-core-brandDark-925A#582be233color18
--hds-color-core-brandDark-950#191a51color18
--hds-color-core-brandDark-975#171055color18
--hds-color-core-error-100#feb9accolor18
--hds-color-core-error-400#f3432acolor18
--hds-color-core-error-500#d8351ecolor18
--hds-color-core-error-600#a01400color18
--hds-color-core-global-transparent#ffffff00color18
--hds-color-core-lemon-100#ffe1a3color18
--hds-color-core-lemon-200#f9b900color18
--hds-color-core-lemon-25#fff2d8color18
--hds-color-core-lemon-300#e8a30bcolor18
--hds-color-core-lemon-500#9b6829color18
--hds-color-core-lemon-800#483414color18
--hds-color-core-magenta-100#ffd7efcolor18
--hds-color-core-magenta-350#f44bcccolor18
--hds-color-core-magenta-50#ffe6f5color18
--hds-color-core-magenta-500#cf2cabcolor18
--hds-color-core-magenta-600#a51d85color18
--hds-color-core-magenta-800#4f2055color18
--hds-color-core-neutral-0#fffcolor18
--hds-color-core-neutral-100#d4dee9color18
--hds-color-core-neutral-200#bac8dacolor18
--hds-color-core-neutral-200A#7591b580color18
--hds-color-core-neutral-25#f8fafdcolor18
--hds-color-core-neutral-25A#1658bc08color18
--hds-color-core-neutral-300#95a4bacolor18
--hds-color-core-neutral-400#7d8ba4color18
--hds-color-core-neutral-50#e5edf5color18
--hds-color-core-neutral-500#64748dcolor18
--hds-color-core-neutral-50A#a8c3de4dcolor18
--hds-color-core-neutral-600#50617acolor18
--hds-color-core-neutral-700#3c4f69color18
--hds-color-core-neutral-800#273951color18
--hds-color-core-neutral-900#1a2c44color18
--hds-color-core-neutral-950#11273ecolor18
--hds-color-core-neutral-975#0d253dcolor18
--hds-color-core-neutral-990#061b31color18
--hds-color-core-neutralDark-100#d4deefcolor18
--hds-color-core-neutralDark-200#c0cee6color18
--hds-color-core-neutralDark-25#f2f7fecolor18
--hds-color-core-neutralDark-300#a3b5d6color18
--hds-color-core-neutralDark-400#839bc8color18
--hds-color-core-neutralDark-50#e3ecf7color18
--hds-color-core-neutralDark-500#6480b2color18
--hds-color-core-neutralDark-600#45639dcolor18
--hds-color-core-neutralDark-700#273f73color18

Showing 300 of 1128 variables. Full inventory is preserved in tokens.json.

Layout Sections

SelectorBackgroundBorderRadiusPaddingSize
.hds-navigation-menu__item.navigation-itemrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px0px137px x 40px
.hds-navigation-menu__item.navigation-itemrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px0px109px x 40px
.hds-navigation-menu__item.navigation-itemrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px0px243px x 44px
.hds-button.navigation-cta-buttonrgb(83, 58, 253)0px none rgb(255, 255, 255)4px15.5px 20px 16.5px243px x 40px
sectionrgb(255, 255, 255)0px none rgb(0, 0, 0)0px0px 16px1440px x 889px
.logo-carousel__itemrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px0px172px x 72px
.modular-solutions-bento-card__border-colorrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px0px1076px x 1076px
.payments-graphic__checkout-payment-methods-itemrgba(0, 0, 0, 0)0px none rgb(0, 0, 0)0px11px 8px241px x 33px