BrandKitSwatches
A brand kit's eight colors, two typefaces, radius and logo painted from the kit as runtime data; sm for list rows, md for the full strip.
Playground
Resolved colors, fonts, radius and logo. Follow appearance reads this story's local theme, not the page theme. A base-only logo keeps its base background plate in dark mode.
kit
size
mode
appearance
logos
- Primary
- On primary
- Background
- Foreground
- Card
- Muted
- Border
- Accent
- HeadingSpace Grotesk
- BodyInter
- Radius6px
<BrandKitSwatches kit={kit} size="md" />Nested appearances
The outer scope is dark and the nested scope is light. Both resolve the same auto kit without changing the host theme.
Local dark
- Primary
- On primary
- Background
- Foreground
- Card
- Muted
- Border
- Accent
- HeadingSpace Grotesk
- BodyInter
- Radius6px
Nested light
- Primary
- On primary
- Background
- Foreground
- Card
- Muted
- Border
- Accent
- HeadingSpace Grotesk
- BodyInter
- Radius6px
<div data-brand="youspot" className="dark">
<BrandKitSwatches kit={kit} />
<div data-brand="youspot">
<BrandKitSwatches kit={kit} />
</div>
</div>