# Berlin Bytes — Brand Context Pack

> **Self-contained brand brief.** Paste this whole file into any AI tool, agent, or
> chat to make it produce on-brand Berlin Bytes artifacts. No repo access required.
> For richer detail see the links at the bottom.

Berlin Bytes is a full-service digital agency in Berlin — "We blend real-world
experience with AI to help turn big ideas into scalable solutions." The brand is
**sharp, clear, vibrant, human.**

---

## Document role (read this first)

This file is the **portable quick brief** for humans and agents. Keep it compact and
decision-oriented.

- **This file (`brand/BRAND.md`)**: quick rules, defaults, and pre-ship guardrails.
- **`brand/guidelines/design-system.md`**: full human reference (canonical long-form
  system doc for visual and component behavior).
- **`brand/DESIGN.md`**: auto-generated machine projection from
  `tokens/tokens.json` for tooling interoperability.

If content overlaps, use this as the fast entry point and escalate to
`design-system.md` for full rationale/examples.

---

## 1. Color (the whole palette, in plain hex)

**Brand families** (each has 6 steps; the ★ step is the canonical use):

```
Honey Mustard   100 #FFF2CC  200 #FFE599  300 #FFD963  ★400 #FBCB12  500 #E4A814  600 #C9861E
Grape           100 #E3A8C3  200 #D47CA6  300 #C65188  ★400 #B8256A  500 #8A1C50  600 #5C1335
Sapphire        100 #8C83C4  200 #6155B8  300 #372B91  ★400 #1E1655  500 #1C1A3B  600 #181729
Elephant        100 #4E98AC  200 #3A798A  300 #265A68  ★400 #1A3B40  500 #012429  600 #001519
```

**Neutrals:**

```
White #FFFFFF   Cream #F6F5F2 (workhorse off-white)   Grey #F7F8F7…#767676
Charcoal #3C3C3C   Ink #1A1A1A (body text)   Black #000000 (wordmark only)
```

**Spotlight-blur gradient stops:** light surfaces `#FFEB9E → #FBCB12`; dark surfaces `#FF406F → #882654`.

### Color rules
- **Mustard `#FBCB12` is the only primary.** Mustard on cream/white, OR mustard on sapphire/indigo.
- **Two colors per surface, max.** Pink/grape are accents on top — never the main fill.
- **Dark surfaces:** black `#000000` (e.g. website homepage), sapphire/indigo `#1E1655`, or deep grape `#5C1335`–`#882654`. Keep two colors max (mustard as the accent).
- **Never** use mustard for body text or icons (contrast on white fails).
- **Never** invent colors outside the ramps above.

---

## 2. Typography

- **Space Grotesk** — headlines, titles, short impactful statements (always 18px+).
- **Inter** — body text, captions, buttons, all general UI.
- **Space Mono** (Bold) — large metrics, data labels, numerics. Used rarely.

All three are free Google Fonts.

### Type rules
- **Sentence case everywhere** for running text/headlines. The **eyebrow** (small label) is the one ALL-CAPS exception (~0.14em tracking).
- No Space Grotesk for long body copy. No font effects, stretching, or distortion.
- Tracking: tight on big display (`-0.025em`), neutral on body, looser on pills/eyebrows (`+0.02em`).

Scale (1080 canvas — scale down for product UI): Display 96/72/56 · H1 46 · H2 36 · H3 30 · Lead 22 · Body 16 · Caption 12 · Metric (Space Mono) 60.

---

## 3. The leaf radius (the signature move)

Large surfaces are rounded on **two diagonally opposite corners only**: **top-left + bottom-right rounded, top-right + bottom-left stay sharp (0px).** This makes the "leaf" silhouette.

```
CSS shorthand:  border-radius: <r> 0 <r> 0;
  small (chips)   4px 0 4px 0
  cards (default) 24px 0 24px 0
  hero/sections   80px 0 80px 0
```

- Full-width web sections may round all four corners at 80px.
- Pills & chips are full capsules (`border-radius: 999px`).
- **Top-right and bottom-left must never have a radius.**
- Photos use the **same leaf mask** — **no circles, ever** (not even avatars).

---

## 4. Backgrounds — the spotlight blur

The brand's most distinctive treatment: a soft, grainy radial "spotlight / bokeh" docked to a canvas edge.

- Light surface → honey-mustard gradient. Dark surface → grape gradient.
- Covers **20–40%** of the canvas, **touches ≥1 edge**, shape is an **oval** like the official asset `assets/Blur_mustard.png` (~5:3, mostly bleeding off-canvas; never stretch it into a circle), grain texture required.
- **One focal blur per surface** — never multiple. Foreground content sits on solid surfaces, never floating on blur alone.
- No noise/mesh gradients beyond the simple radial. No repeating patterns. Imagery is photographic, warm, real-people, masked into leaf shapes.

---

## 5. Components (quick specs)

- **Buttons** — all full pill (999px). Primary: mustard fill + ink text. Ghost: transparent + 1.5px ink border. Dark: ink fill + white text. Arrow glyph `→` for forward motion.
- **Pills/chips** — solid fills only, never outlines. Inter 14, +0.02em.
- **Stat cards** — **default:** cream leaf card, large grape numeral in Space Mono Bold, grape label (top-left or inline), mustard star symbol top-right. On dark/indigo surfaces the numeral goes cream or mustard with a white label. Numerals: `+100`, `95%`, `400+`. (Hero stat blocks may bend the two-colors rule for emphasis — but cream + grape is the default.)
- **Cards** — left-aligned text, always. Default to plain cream leaf cards; reach for blur-shape variants consciously (one featured item per row).

---

## 6. Brand symbols & mascot

- **14 hand-drawn mustard symbols** (sun, 8-star, 12-star, isotoxal, 4-circles, quote, play, equal, curve, brush…). Use **large** (60–240px) as graphic accents. **Never** as small UI icons (they read as blobs). For UI icons use the brand set: **Material Symbols / Material Icons** (Google).
- **Bearnie** — friendly grape-pink bear holding a mustard cursor speech-bubble. The human face of the brand. 6 emotions (default, laughing, winking, determined, worried, cyber). **Internal & team-facing only** — internal slides/presentations, team/culture/office moments, and internal assets (merch, hoodies, standees, signage). **Never in external communication or marketing** (no website, ads, sales material). Place in the bleed (peeking from an edge). **Don't pair Bearnie with the wordmark** in the same composition.

---

## 7. Logo

Custom wordmark: **"Berlin" in ink, "Bytes" in mustard.** There is **no B-symbol mark** — the wordmark *is* the logo; don't invent one.

Positioning:
- **Default**: place the logo **top-left** (website, Word documents, templates, entry slides).
- **Exception (follow-up slides)**: on slides after the opener, place the logo **bottom-left**.
- **Exception (social media, e.g. LinkedIn post visuals)**: always place the logo **bottom-right**. The post is shared by Berlin Bytes or a Berlin Bytes team member, so the platform already shows the brand top-left (profile/company logo).

The logo always sits directly on the surface — **never** inside a separate background shape or box.

---

## 8. Voice (short version)

Two registers, kept strictly apart. **External** (marketing, sales, website, customers):
**German, formal "Sie"**, professional, confident, precise — orient on berlin-bytes.de
("Launchen Sie ein Produkt, das Ihr Unternehmen voranbringt."). No Bearnie, no emoji.
**Internal** (team, culture): **always English**, warm and free to be cheeky/funny/ironic.
Both: short sentences, direct verbs, no buzzwords; never third-person corporate; big
numbers as `+100`, `95%`. See `brand/guidelines/voice-and-tone.md`.

---

## 9. Pre-ship checklist

- [ ] Two colors max per surface, both from the official ramps
- [ ] Space Grotesk headlines · Inter body · Space Mono numerics
- [ ] Sentence case (eyebrow is the only ALL CAPS); no font effects
- [ ] Leaf radius: top-left + bottom-right rounded; top-right + bottom-left = 0
- [ ] All text left-aligned; photos use the leaf mask, no circles
- [ ] Blur (if any) docks an edge, 20–40%, grainy, one per surface
- [ ] Symbols large, not as UI icons; Bearnie not paired with the wordmark
- [ ] Logo: "Berlin" ink + "Bytes" mustard; default top-left, follow-up slides bottom-left, social media always bottom-right; never in a separate background box

---

## Deeper references (in this repo)

- `brand/guidelines/design-system.md` — full human design-system reference (canonical long-form)
- `brand/DESIGN.md` — machine-readable generated projection (from `tokens/tokens.json`)
- `brand/guidelines/voice-and-tone.md` — full verbal guidelines
- `brand/VISUAL-PROMPT-PACK.md` — for image/video generators (Higgsfield, Midjourney, etc.)
- `tokens/tokens.json` — machine-readable design tokens (W3C DTCG)
- `dist/tokens.css` · `dist/tokens.ts` · `dist/tailwind.preset.js` — generated outputs
- `assets/` — logo, Bearnie variants, 14 symbols, blur