Color
25 color tokens. Each colour is shown with the text colour meant for it, in light and dark, with its contrast.
palette
surfaces & text
page, cards, popovers and the text on themlightAa
darkAa
/
/
light 18.9 · AAdark 16.9 · AA
used by 33 components · on 9 pages
ByIdSection · CID-057CopyChip · CID-065DesignSystemSection · CID-056FaqSection · CID-062FinalCta · CID-063GettingStartedSection · CID-059Hero · CID-053KillerLine · CID-054LandingHeader · CID-052OpenSourceSection · CID-061ProblemSection · CID-055ProofSection · CID-058SiteFooter · CID-064ToolsSection · CID-060DsTour · CID-010HeroShowcase · CID-012CoherentMark · CID-013Logo · CID-014PageIntro · CID-066SiteHeader · CID-029ToolsMenu · CID-030VerifyPreview · CID-031ExtractResultView · CID-036HeroPreview · CID-037MotionPreview · CID-038PalettePreview · CID-039TypographyPreview · CID-041Alert · CID-042Badge · CID-044Button · CID-045Input · CID-047Label · CID-048Switch · CID-051
/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor
lightAa
darkAa
/
/
light 8.0 · AAdark 7.0 · AA
used by 14 components · on 7 pages
BreakpointsPreview · CID-033ExtractForm · CID-035ExtractResultView · CID-036HeroPreview · CID-037MotionPreview · CID-038PalettePreview · CID-039SpacingPreview · CID-040TypographyPreview · CID-041Avatar · CID-043Button · CID-045Card · CID-046Input · CID-047Progress · CID-049Skeleton · CID-050
/agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /tools · /tools/designmd-extractor
lightAa
darkAa
/
/
light 19.8 · AAdark 16.1 · AA
used by 7 components · on 5 pages
BreakpointsPreview · CID-033HeroPreview · CID-037MotionPreview · CID-038PalettePreview · CID-039SpacingPreview · CID-040TypographyPreview · CID-041Card · CID-046
/gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor
lightAa
darkAa
/
/
light 19.8 · AAdark 14.9 · AA
used by 1 component · on 6 pages
/ · /agent · /gallery · /gallery/[slug] · /tools · /tools/designmd-extractor
brand & actions
buttons, links, highlightslightAa
darkAa
/
/
light 5.4 · AAdark 7.7 · AA
used by 7 components · on 5 pages
BreakpointsPreview · CID-033MotionPreview · CID-038SpacingPreview · CID-040Badge · CID-044Button · CID-045Progress · CID-049Switch · CID-051
/agent · /errors · /errors/[code] · /tools · /tools/designmd-extractor
lightAa
darkAa
/
/
light 7.5 · AAdark 7.7 · AA
lightAa
darkAa
/
/
light 5.4 · AAdark 7.7 · AA
used by 23 components · on 9 pages
ByIdSection · CID-057CopyChip · CID-065DesignSystemSection · CID-056FinalCta · CID-063GettingStartedSection · CID-059Hero · CID-053KillerLine · CID-054LandingHeader · CID-052OpenSourceSection · CID-061ProblemSection · CID-055ProofSection · CID-058SiteFooter · CID-064ToolsSection · CID-060SiteBadge · CID-006DsTour · CID-010HeroShowcase · CID-012CoherentMark · CID-013Logo · CID-014SectionLabel · CID-028SiteHeader · CID-029ToolsMenu · CID-030VerifyPreview · CID-031VersionBadge · CID-032
/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor
light
dark
/
used by 7 components · on 9 pages
LandingHeader · CID-052OpenSourceSection · CID-061ProblemSection · CID-055DsTour · CID-010SiteHeader · CID-029ToolsMenu · CID-030VerifyPreview · CID-031
/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor
light
dark
/
not referenced in components or pages; may be used from the stylesheet
status
errors, success, warningslightAa
darkAa
/
light 4.8 · AAdark 3.0 · AA large
used by 6 components · on 2 pages
ProblemSection · CID-055HeroShowcase · CID-012ExtractForm · CID-035Alert · CID-042Badge · CID-044Button · CID-045
/ · /tools/designmd-extractor
light
dark
/
used by 2 components · on 0 pages
light
dark
/
used by 4 components · on 6 pages
/ · /agent · /gallery · /gallery/[slug] · /tools · /tools/designmd-extractor
light
dark
/
not referenced in components or pages; may be used from the stylesheet
lines & focus
borders, inputs, focus ringslight
dark
/
used by 22 components · on 9 pages
ByIdSection · CID-057DesignSystemSection · CID-056FaqSection · CID-062FinalCta · CID-063GettingStartedSection · CID-059Hero · CID-053KillerLine · CID-054LandingHeader · CID-052OpenSourceSection · CID-061ProblemSection · CID-055ProofSection · CID-058SiteFooter · CID-064ToolsSection · CID-060SiteBadge · CID-006BrowserShot · CID-007HeroShowcase · CID-012SectionLabel · CID-028SiteHeader · CID-029ToolsMenu · CID-030VerifyPreview · CID-031Alert · CID-042Badge · CID-044
/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor
light
dark
/
used by 3 components · on 1 page
/tools/designmd-extractor
light
dark
/
used by 3 components · on 1 page
/tools/designmd-extractor
other
custom colorslight
dark
/
used by 17 components · on 9 pages
ByIdSection · CID-057CopyChip · CID-065FaqSection · CID-062FinalCta · CID-063GettingStartedSection · CID-059Hero · CID-053LandingHeader · CID-052OpenSourceSection · CID-061ProblemSection · CID-055ToolsSection · CID-060SiteBadge · CID-006BrowserShot · CID-007DsTour · CID-010HeroShowcase · CID-012SiteHeader · CID-029ToolsMenu · CID-030VerifyPreview · CID-031
/ · /agent · /errors · /errors/[code] · /gallery · /gallery/[slug] · /lab/logos · /tools · /tools/designmd-extractor