---
name: berlin-bytes-design
description: Use this skill to create Berlin Bytes-branded interfaces and visual artifacts that feel distinctive, not templated, while staying tightly aligned to the brand system.
user-invocable: true
---

Read `../brand/BRAND.md` first. Then use these as the deeper sources of truth when needed:

- `../brand/guidelines/design-system.md` — tokens, components, and rules
- `../brand/guidelines/voice-and-tone.md` — copy and tone rules
- `../tokens/tokens.json` — canonical design tokens
- `../css/berlin-bytes.css` — full styling bundle
- `../ui/react/` — React reference components
- `../assets/` — logo, Bearnie, symbols, blur assets
- `../examples/` — specimen cards
- `../brand/VISUAL-PROMPT-PACK.md` — image/video generation guidance

If you are creating visual artifacts, copy assets out and build static HTML that imports `../css/berlin-bytes.css`. If you are working on production code, map the same brand rules to the target stack instead of assuming React or web defaults. This skill is platform-agnostic: apply the same brand system to Flutter, React/Next.js, Vue, native iOS/Android, desktop apps, kiosks, and other digital UI frameworks. If invoked without guidance, ask what to build, then act as an expert designer who outputs artifacts and implementation-ready guidance for the target platform.

## Core rule

Make the result unmistakably Berlin Bytes: sharp, clear, vibrant, human. Keep the design visually interesting, but constrain every choice to the brand system so artifacts stay consistent across tools and surfaces.

## What to decide before designing

If the brief is vague, pin down one concrete subject, one audience, and one job to be done before you start. State that choice explicitly. Then design from the subject's real world: its materials, tools, artifacts, and language. Do not fall back to generic product UI.

## Distinctive design doctrine

- Treat the hero as the thesis. Open with the most characteristic thing in the subject's world.
- Make structure mean something. Numbering, labels, dividers, and eyebrows should encode real information, not decoration.
- Use one signature move and keep everything else disciplined. Boldness belongs in one memorable place.
- Take one real aesthetic risk, but only if you can justify it against the brief.
- Let copy, hierarchy, and spacing do real work. Words are design material, not filler.
- Choose motion deliberately. Prefer one orchestrated moment over scattered effects.
- Critique the design as you build. If something reads like a default template, replace it with a choice tied to the brief.

## Berlin Bytes constraints

- Use only the official color ramps. Never invent hex values.
- Keep to two colors per surface, max.
- Mustard `#FBCB12` is the primary accent.
- Use Space Grotesk for display, Inter for body/UI, Space Mono for numerics.
- Keep sentence case by default. The eyebrow is the only ALL-CAPS exception.
- Use the leaf radius: top-left and bottom-right rounded, top-right and bottom-left at 0.
- Never use circles for avatars or image masks.
- Use brand symbols as large graphic accents only; use Material Symbols / Material Icons for UI affordances.
- Do not pair Bearnie with the wordmark.
- Place the logo top-left by default; on follow-up slides place it bottom-left; on social media visuals (e.g. LinkedIn) always place Berlin Bytes bottom-right.
- Keep the logo directly on the surface; never place it inside a separate background shape/box.

## Layout and composition

- Build from the content outward, not from a canned page layout.
- Use whitespace generously; the system should breathe.
- Left-align text in almost all cases.
- On web, prefer clear sections with one dominant focal point, strong type hierarchy, and a deliberate surface treatment.
- If the page needs a background accent, use the brand's spotlight blur intentionally and sparingly.

## Workflow

1. Read the brief and pin the subject, audience, and job.
2. Choose a brand-safe palette, type hierarchy, radius strategy, and one signature element.
3. Draft the page structure and make sure it is not a generic default.
4. Build using only brand assets, tokens, and approved typography.
5. Review the result against the checklist below and remove anything that feels ornamental or off-brand.

## Anti-template checklist

- Does the hero say something specific about this subject?
- Would this still look like a generic AI-generated layout if the content changed?
- Did I use the brand's own shapes, symbols, or leaf geometry instead of stock UI decoration?
- Are the color choices within the official ramps and limited per surface?
- Does the typography feel intentional rather than default?
- Is there one clear memorable element instead of many competing tricks?
- Does the motion, if any, support meaning?

## Practical defaults

- Import `../css/berlin-bytes.css` or `../dist/tokens.css` first.
- Use `var(--...)` tokens instead of raw values in code.
- Use the repo's specimen cards and UI components as reference, not as decoration to remix.
- For polish or redesign work, hand off to `./design-review-panel/SKILL.md` and iterate from screenshot-based critique.

If no direction is given, ask for the target platform and the artifact to create, then proceed with a brand-first, opinionated design that still stays inside the Berlin Bytes system.