Brand kit
Design Babai theme & brand assets.
Everything anyone at Design Babai needs to create on-brand marketing collateral — logos, colors, typography, and usage rules. Grab assets below, or download the full kit in one go.
01 · Logos
High-quality logo downloads
Vector SVGs use currentColor so the mark takes the color of its container. Fixed black/white variants are also provided for flattening into third-party tools. PNGs ship at 64, 128, 256, 512, and 1024 px from a 2000×2000 master.
App mark — on light
Primary mark. Use on white or very light neutral surfaces.
App mark — on dark
White/inverted mark. Use on near-black canvases or photography.
App mark — on canvas
Default workspace canvas background (#F7F8FA). Matches product screenshots.
Horizontal lockup
Mark + Design Babai wordmark. Preferred for navigation bars, headers, and OG images.
Stacked lockup
Mark above Design Babai wordmark. Use for square placements — social avatars, launch cards.
Logotype
Design Babai wordmark alone. Use when the mark is already present elsewhere in the layout.
Clearspace
Reserve padding equal to 25% of the mark height on every side. Never overlap typography or graphic edges into this zone.
Minimum size
The mark must render at 24 px or larger on screen and 10 mm in print. Below that, drop the mark and use the wordmark only.
02 · Color
Neutral-first palette with a single AI accent
Design Babai leads with a neutral ramp so interior photography can carry the color. Violet is reserved for AI-specific moments — never use it as a generic brand tint. Click any swatch to copy its hex.
Neutrals
Ink
Headlines and body copy.
Surface
Default page canvas.
Panel (dark)
Cards and panels on dark mode.
Canvas
Marketing canvas background.
Hairline
Borders and dividers.
Muted text
Captions and metadata.
Accents
AI accent
Reserved for AI / generate affordances.
AI soft
Chips, bubbles, AI surfaces.
Destructive
Errors and destructive actions.
Chart ramp (lime)
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
03 · Typography
DM Sans for everything, Geist Mono for receipts
Both families are Google Fonts — free to redistribute. Hierarchy is carried by scale and weight, never by color.
Secondary · Monospace
Geist Mono
Aa Bb Cc 123
Use only for IDs, tokens, credit figures, and code samples — never for body copy.
| Role | Size / line-height | Weight | Preview |
|---|---|---|---|
| Display | 72 / 76 | 600 | Design any room. |
| H1 | 48 / 54 | 600 | Brand and theme kit |
| H2 | 32 / 38 | 600 | Section heading |
| H3 | 20 / 26 | 600 | Subheading |
| Body | 16 / 24 | 400 | The quick brown fox jumps over the lazy dog. |
| Small | 14 / 20 | 400 | Fine print and metadata copy. |
| Eyebrow | 11 / 14 | 500 | UPPERCASE · TRACKING 0.18EM |
Font tokens
Radii
Shadows
04 · Usage
The eight rules for on-brand collateral
If you only read one section, read this one. Matches the authoritative list in docs/guides/theme-guide.md.
- 01
Neutral-first.
Lead with the zinc ramp. The AI accent should appear at most once per surface.
- 02
Reserve violet for AI.
Never use #7C3AED for generic brand highlights — it tells users “AI happens here.”
- 03
Warm photography, cool UI.
Interior photos can be warm and saturated; always float them on neutral surfaces with whitespace.
- 04
Prefer pill controls.
Buttons and chips are fully rounded in product. Match this in banners and OG images.
- 05
Use canvas shadows.
When compositing product shots, apply shadow-canvas-card (0 24px 70px rgba(15,23,42,0.14)) so it lifts off the page.
- 06
Light/dark parity.
Every marketing asset ships with a dark-mode variant. The tokens above are already in both themes.
- 07
Hierarchy via scale, not color.
Body copy is always --foreground; metadata is always --muted-foreground. Never colored headlines.
- 08
Screenshot on canvas.
Capture product shots against --workspace-canvas (not pure white) to preserve the canvas-first identity.
Don’t
- · Recolor or gradient the mark.
- · Rotate, skew, or distort the mark.
- · Add drop-shadows or glows to the mark.
- · Place the mark on busy photography without a plate.
- · Substitute fonts — always DM Sans + Geist Mono.
- · Use violet anywhere other than AI affordances.
Got everything?
One-click brand kit.
SVGs (currentColor, black, white) plus PNGs at 64/128/256/512/1024. Horizontal, stacked, and logotype lockups included.