100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
|
---
|
||
|
|
version: alpha
|
||
|
|
name: MyBrand
|
||
|
|
description: One-sentence description of the visual identity.
|
||
|
|
colors:
|
||
|
|
primary: "#0F172A"
|
||
|
|
secondary: "#64748B"
|
||
|
|
tertiary: "#2563EB"
|
||
|
|
neutral: "#F8FAFC"
|
||
|
|
on-primary: "#FFFFFF"
|
||
|
|
on-tertiary: "#FFFFFF"
|
||
|
|
typography:
|
||
|
|
h1:
|
||
|
|
fontFamily: Inter
|
||
|
|
fontSize: 3rem
|
||
|
|
fontWeight: 700
|
||
|
|
lineHeight: 1.1
|
||
|
|
letterSpacing: "-0.02em"
|
||
|
|
h2:
|
||
|
|
fontFamily: Inter
|
||
|
|
fontSize: 2rem
|
||
|
|
fontWeight: 600
|
||
|
|
lineHeight: 1.2
|
||
|
|
body-md:
|
||
|
|
fontFamily: Inter
|
||
|
|
fontSize: 1rem
|
||
|
|
lineHeight: 1.5
|
||
|
|
label-caps:
|
||
|
|
fontFamily: Inter
|
||
|
|
fontSize: 0.75rem
|
||
|
|
fontWeight: 600
|
||
|
|
letterSpacing: "0.08em"
|
||
|
|
rounded:
|
||
|
|
sm: 4px
|
||
|
|
md: 8px
|
||
|
|
lg: 16px
|
||
|
|
full: 9999px
|
||
|
|
spacing:
|
||
|
|
xs: 4px
|
||
|
|
sm: 8px
|
||
|
|
md: 16px
|
||
|
|
lg: 24px
|
||
|
|
xl: 48px
|
||
|
|
components:
|
||
|
|
button-primary:
|
||
|
|
backgroundColor: "{colors.tertiary}"
|
||
|
|
textColor: "{colors.on-tertiary}"
|
||
|
|
rounded: "{rounded.sm}"
|
||
|
|
padding: 12px
|
||
|
|
button-primary-hover:
|
||
|
|
backgroundColor: "{colors.primary}"
|
||
|
|
textColor: "{colors.on-primary}"
|
||
|
|
card:
|
||
|
|
backgroundColor: "{colors.neutral}"
|
||
|
|
textColor: "{colors.primary}"
|
||
|
|
rounded: "{rounded.md}"
|
||
|
|
padding: 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.
|