# Berlin Bytes Style Guide

> Brand & design system for Berlin Bytes. Platform-agnostic design tokens, brand
> guidelines, and reusable components for building on-brand artifacts.
> Machine-readable inventory for LLMs and agents.

## Start here

- [Brand Context Pack](brand/BRAND.md): portable quick brief — the single best entry point for any agent or tool.
- [DESIGN.md Projection](brand/DESIGN.md): auto-generated machine-readable projection for DESIGN.md-compatible tooling.
- [Visual Prompt Pack](brand/VISUAL-PROMPT-PACK.md): brand pack for image/video generators (Higgsfield, Midjourney, etc.).

## Guidelines

- [Design System](brand/guidelines/design-system.md): canonical long-form human reference — color, type, leaf radii, components.
- [Voice & Tone](brand/guidelines/voice-and-tone.md): verbal brand guidelines.

## Tokens & code

- [tokens.json](tokens/tokens.json): single source of truth, W3C DTCG format.
- [dist/tokens.css](dist/tokens.css): generated CSS custom properties.
- [dist/tokens.ts](dist/tokens.ts): generated TypeScript token map.
- [dist/tailwind.preset.js](dist/tailwind.preset.js): generated Tailwind preset.
- [css/berlin-bytes.css](css/berlin-bytes.css): full stylesheet (fonts + tokens + helper classes).
- [ui/react](ui/react): React component kit.

## Assets

- [assets](assets): logo, Bearnie mascot (6 emotions), 14 brand symbols, spotlight blur.
- [fonts](fonts): Space Grotesk, Inter, Space Mono (Open Font License).
- [examples](examples): rendered design-system specimen cards.

## For agents

- [AGENTS.md](/AGENTS.md): instructions for IDE agents (Cursor, Copilot, Cline, Windsurf).
- [skill/SKILL.md](skill/SKILL.md): Claude skill front-matter.
- [skill/design-review-panel/SKILL.md](skill/design-review-panel/SKILL.md): optional scored review loop for UI polish.

## Optional workflow (quality gate)

1. Start with [brand/BRAND.md](brand/BRAND.md) for quick decisions.
2. Use [brand/guidelines/design-system.md](brand/guidelines/design-system.md) for full visual and component rules.
3. Use [brand/DESIGN.md](brand/DESIGN.md) when tooling expects DESIGN.md structure.
4. Execute generation flow via [skill/SKILL.md](skill/SKILL.md).
5. For UI polish/redesign/QA, optionally run [skill/design-review-panel/SKILL.md](skill/design-review-panel/SKILL.md) with [skill/design-review-panel/panel_workflow.js](skill/design-review-panel/panel_workflow.js).
6. If you use the review, continue iterating until the verdict is `CLEARED`.

## Rules of thumb

- Mustard `#FBCB12` on cream/white or on sapphire/indigo. Two colors per surface, max.
- Space Grotesk headlines, Inter body, Space Mono numerics. Sentence case.
- Leaf radius: top-left + bottom-right rounded; top-right + bottom-left = 0. No circles.
- Logo placement: default top-left; follow-up slides bottom-left; social media visuals always bottom-right. No separate logo background box.
- Start from `brand/BRAND.md`, then escalate to `brand/guidelines/design-system.md` for depth.