# Sumeru Systems · Brand Kit
Generated by `scripts/build-brand-kit.mjs`. Run `npm run brand` to regenerate.
## What's in here
```
brand-kit/
├── marks/
│ ├── vertex-axis-dark.svg ★ canonical primary mark
│ ├── vertex-axis-light.svg
│ ├── vertex-master-dark.svg (no-axis fallback)
│ ├── vertex-master-light.svg
│ ├── vertex-calibrated-dark.svg (editorial / hero-only)
│ ├── vertex-mono-white.svg (single-color, transparent bg)
│ ├── vertex-mono-ink.svg
│ ├── vertex-mono-gold.svg
│ └── vertex-favicon.svg (favicon-optimized)
├── lockups/
│ ├── vertical-{dark,light}.svg
│ ├── horizontal-{dark,light}.svg
│ ├── compact-{dark,light}.svg
│ └── wordmark-{dark,light}.svg
├── favicon/
│ ├── favicon.svg (master, 64×64 viewBox)
│ ├── favicon-16.png
│ ├── favicon-32.png
│ ├── favicon-48.png
│ ├── favicon-180.png (apple-touch-icon)
│ ├── favicon-192.png (android)
│ └── favicon-512.png (PWA / maskable)
├── social/
│ ├── og-default.svg / .png (1200×630)
│ ├── avatar.svg / .png (400×400 — Twitter, GitHub, etc.)
│ └── linkedin-banner.svg / .png (1584×396)
├── tokens/
│ ├── sumeru.css (CSS custom properties)
│ └── tokens.json (design-tokens spec for Figma / tooling)
├── reference/
│ ├── brand-overview.svg (one-sheet system view)
│ └── brand-overview.png
└── README.md
```
## Use
### Web
```html
```
### CSS
```css
@import "/brand-kit/tokens/sumeru.css";
.cta { background: var(--color-gold); color: var(--color-ink); }
```
### Light mode
```html
```
Token aliases (`--bg`, `--fg-primary`, etc.) automatically swap.
## Brand principle
> Drafted, not designed. Every line earns its place. Every dot has reason.
The mark is **Vertex · Axis** — Mount Meru as the cosmic axis at the heart of the system.
The Gold apex is the only point of warmth. The dashed Gold axis is the only narrative.
Everything else is restraint.