version
name
description
colors
typography
rounded
spacing
components
alpha
MyBrand
One-sentence description of the visual identity.
primary
secondary
tertiary
neutral
on-primary
on-tertiary
#0F172A
#64748B
#2563EB
#F8FAFC
#FFFFFF
#FFFFFF
h1
h2
body-md
label-caps
fontFamily
fontSize
fontWeight
lineHeight
letterSpacing
Inter
3rem
700
1.1
-0.02em
fontFamily
fontSize
fontWeight
lineHeight
Inter
2rem
600
1.2
fontFamily
fontSize
lineHeight
Inter
1rem
1.5
fontFamily
fontSize
fontWeight
letterSpacing
Inter
0.75rem
600
0.08em
sm
md
lg
full
4px
8px
16px
9999px
xs
sm
md
lg
xl
4px
8px
16px
24px
48px
button-primary
button-primary-hover
card
backgroundColor
textColor
rounded
padding
{colors.tertiary}
{colors.on-tertiary}
{rounded.sm}
12px
backgroundColor
textColor
{colors.primary}
{colors.on-primary}
backgroundColor
textColor
rounded
padding
{colors.neutral}
{colors.primary}
{rounded.md}
24px
Overview
Describe the voice and feel of the brand in one or two paragraphs. What mood
does it evoke? What emotional response should a user have on first impression?
Colors
Primary ({colors.primary}): Core text, headlines, high-emphasis surfaces.Secondary ({colors.secondary}): Supporting text, borders, metadata.Tertiary ({colors.tertiary}): Interaction driver — buttons, links,
selected states. Use sparingly to preserve its signal.Neutral ({colors.neutral}): Page background and surface fills.
Typography
Inter for everything. Weight and size carry hierarchy, not font family. Tight
letter-spacing on display sizes; default tracking on body.
Layout
Spacing scale is a 4px baseline. Use md (16px) for intra-component gaps,
lg (24px) for inter-component gaps, xl (48px) for section breaks.
Shapes
Rounded corners are modest — sm on interactive elements, md on cards.
full is reserved for avatars and pill badges.
Components
button-primary is the only high-emphasis action per screen.card is the default surface for grouped content. No shadow by default.
Do's and Don'ts
Do use token references ({colors.primary}) instead of literal hex in
component definitions.Don't introduce colors outside the palette — extend the palette first.Don't nest component variants. button-primary-hover is a sibling,
not a child.
