# Print Cafe Brand System

Source of truth: `Resuverse-Website\concepts\printcafe\index.html` (concept site), `concepts\printcafe\img\logo.svg` + `logo-mark.svg`, the drink and model images in `concepts\printcafe\img\`, and the earlier brand study in `Resuchron\printcafe\` (moodboard, persona, brand collage, also used on `work\print-cafe.html`).
Every value below is taken from those files. Anything not found there is listed under **Open questions** at the end.

---

## 1. Brand summary

- **What it is:** a fictional cafe in Berlin, created by Resuchron for Instagram and then the web, part of Resuverse concepts. Specialty coffee, pastries baked in house, and six enclosed 3D printers next to the espresso bar that guests rent while they sit.
- **Core idea (site headline):** Order a coffee. Start a print.
- **Tagline:** Sip. Print. Repeat. (page title and footer)
- **Other lines from the brand study images:** "More than a cafe. It's a makerspace." / "Print. Create. Relax. Repeat." / "3D Print. Coffee. Community." / "Fuel for creators."
- **Audience:** young makers who work, study and create on the go. Persona from the brand study: age 23, student, living in a city.
- **What the guest gets (from the site):** 6 printers on the floor, 4 colours per print, 25 × 25 × 25 cm build volume, printing 24 h (also overnight), own files (.stl, .3mf, .obj) or a model from the library, free reprint if the cafe's printer fails.
- **Fictional details used on the site:** Filamentstraße 3, Berlin. Mon to Fri 8:00 to 20:00, Sat and Sun 9:00 to 18:00, printers run overnight. Domain shown on the Resuverse card: `printcafe.coffee`.
- **Personality (from the copy):** warm, nerdy, relaxed, precise. Coffee and printing are always told as one thing.

## 2. Logo

**Files**
| File | What it is |
|---|---|
| `Brand\PrintCafe-logo.svg` (copy of `concepts\printcafe\img\logo.svg`) | Full logo: cup symbol + "Print" script + "CAFE". viewBox 111 × 56 |
| `Brand\PrintCafe-logo-mark.svg` (copy of `logo-mark.svg`) | Cup symbol only, one solid vector shape. viewBox 75 × 39 |

**What the logo is made of**
- **Cup symbol:** a coffee cup with a handle, seen from the side. A 3D printer nozzle points down into the top, and a swoosh of coffee (or filament) curls out of the bottom. The outline is vector; in the full logo it is filled with a small embedded JPEG gradient (75 × 39 px).
- **"Print":** a bold, rounded script, vector paths, brown gradient `#754e26` → `#987858` (92%) → `#ae9378`.
- **"CAFE":** small caps under the script, right aligned, live text in Microsoft Sans Serif with the same gradient.

**How the website uses it:** never in its original brown gradient. The site uses the logo as a one colour shape (CSS mask) that takes the colour of the section:
| Place | Size (box) | Colour |
|---|---|---|
| Header | 116 × 58 px | cream `#f3ead9`; ink `#1b130c` on the caramel Spirulina slide |
| Header, after scrolling | 44 px tall | cream |
| Footer | 150 × 75 px | caramel `#c69a69` |
| Cup symbol as a bullet (Print Lab rules) | 62 × 32 px | ice `#a9c8f5` |

**Usage (based on the site)**
- One colour versions in palette colours are the default on the website. The brown gradient original is the brand study version.
- The cup symbol works alone (icons, bullets, round badges in the brand study).
- Smallest size used on the site: 44 px tall (full logo), 32 px tall (cup symbol).
- **Don't:** redraw the letters, stretch or rotate the logo, separate "CAFE" from "Print", put the full colour gradient version on the navy or brown sections (the site always switches to one colour there).

## 3. Colours

All hex values are exact from the code (`:root` variables and section styles), unless marked as coming from an image.

**Core palette (CSS variables)**
| Name in code | Hex | Role |
|---|---|---|
| `--navy` | `#121b27` | Main background: page, Cappuccino slide, Print Lab, glass nav (86% opacity) |
| `--navy-2` | `#1a2738` | Cards on navy |
| `--cobalt` | `#3f7fe0` | Main accent: highlight words, "Best value" card, slider, light waves |
| `--ice` | `#a9c8f5` | Kickers and small marks on navy, printer glass |
| `--espresso` | `#3a2617` | Dark brown details (icons, cake) |
| `--brown` | `#6e4a2c` | Matcha slide background, Model library section |
| `--caramel` | `#c69a69` | Spirulina slide background, accents on brown, prices on the menu, footer logo |
| `--cream` | `#f3ead9` | Main text colour on dark, buttons, calculator result card |
| `--ink` | `#1b130c` | Footer background, text on caramel and cream |
| `--bean` | `#2a1a10` | Menu section background |
| `--bean-2` | `#1a100a` | Menu section, darkest point; text on caramel tab |

**Drink themes (hero slider)**
| Drink | Background | Text | Accent | Light wave |
|---|---|---|---|---|
| Cappuccino | `#121b27` navy | `#f3ead9` | `#3f7fe0` | `#3f7fe0` |
| Matcha latte | `#6e4a2c` brown | `#f3ead9` | `#b7d36a` | `#d9b48a` |
| Spirulina latte | `#c69a69` caramel | `#1b130c` | `#1f5fd1` | `#2f6fe0` |

**Section backgrounds (gradients in code)**
| Section | Gradient |
|---|---|
| Hero curve | `#253e62` → `#1e3150` → `#1b2c45` |
| Printers showcase | glow `#24406a` over `#1b2c45` → `#142034` → `#0d1520` |
| Menu | radial `#4a2f1b` → `#2a1a10` → `#1a100a` |
| Print Lab | radial `#1c2f4a` → `#121b27` → `#0b111a` |
| Model library | radial `#8a5d38` → `#6e4a2c` → `#3f2817` |
| Footer | flat `#1b130c` |
| Featured price card | `#3f7fe0` → `#2556a8` |

**Supporting colours**
| Hex | Where |
|---|---|
| `#4fd38a` | "printing now" live dot and printer LED |
| `#2c5fae` | long print bars |
| `#1d2b3e` | empty bar track |
| `#2a3a52` | borders on navy |
| `#3a2c20` | footer divider |
| `#ffe9c4` | warm light inside the printer illustration |

**Menu icon colours (drinks, top view)**
Cappuccino `#c98d4f`, Matcha `#9cc04a`, Spirulina `#3f8ae6`, Espresso `#5a3418`, Flat white `#b07a45` + `#e9d2b0`, Dirty chai `#c9915a`, Cold brew `#4a2c16`, Hot chocolate `#5b3420`. Pastry fills: `#e8c38f`, `#d9a46a`, `#b98451`, `#e2bd86`, `#d6a565`, `#dcb07a`; pistachio green `#7da34a`.

**Logo gradient (from logo.svg):** `#754e26` → `#987858` → `#ae9378`.

**Brand study palette (from the moodboard image, not in the site code):** `#A0805F`, `#D6A877`, `#C1B1A3`, `#E0D5CB`.

**Summary of the system as built:** navy and cobalt carry the printing side, browns, caramel and cream carry the coffee side. Each section is one of the two, and they alternate down the page.

## 4. Typography

All Google Fonts, loaded in the site `<head>`.

| Use | Font | Weights loaded | Fallback |
|---|---|---|---|
| Display, headlines and body | **Bricolage Grotesque** (optical size 12 to 96) | 400, 600, 800 | system-ui, sans-serif |
| Accent words in headlines | **Instrument Serif** italic | 400 | Georgia, serif |
| Labels, prices, data | **JetBrains Mono** | 400, 600 | ui-monospace |

**Signature move:** every H2 is two lines. Line 1 in Bricolage 800, line 2 in Instrument Serif italic in the section's accent colour ("Fuel for / *makers*", "Order a coffee / *Start a print*", "No file? / *Pick one of ours*").

**Scale used on the site**
| Level | Font | Weight | Size | Other |
|---|---|---|---|---|
| Hero drink name (H1) | Bricolage | 800 | 54 to 132 px | line height 0.88, tracking -0.04em, second word in accent colour |
| Section headline (H2) | Bricolage + Instrument Serif italic | 800 / 400 | 40 to 88 px (showcase 44 to 96) | line height 0.95, tracking -0.035em |
| Big price | Bricolage | 800 | 64 to 110 px | tracking -0.05em |
| Kicker / eyebrow | JetBrains Mono | 400 | 13 px | UPPERCASE, tracking 0.14em, accent colour |
| Nav | JetBrains Mono | 400 | 13 px | UPPERCASE, tracking 0.08em |
| Lede | Bricolage | 400 | 17 to 21 px | line height 1.45, max 30 characters wide |
| Body | Bricolage | 400 | 18 px | line height 1.55 |
| Menu item name | Bricolage | 600 | 20 px | |
| Menu item text | Bricolage | 400 | 14 px | 70% opacity |
| Price on menu / hero | JetBrains Mono | 600 | 16 px / 28 px | |
| Tag / badge | JetBrains Mono | 400 | 11 px | UPPERCASE, tracking 0.08em, pill |
| Button | Bricolage | 600 | 15 px | pill, cream on navy |

Phone sizes: H1 46 to 80 px, lede 16 px.

**Brand study fonts (moodboard image, not on the site):** title in **Bambank** (bold script, close to the "Print" in the logo), subtitle and text in a plain sans serif. Logo "CAFE": Microsoft Sans Serif.

## 5. Voice

**Tone (from the copy):** warm, relaxed and a little nerdy. Cafe language and 3D printing language mixed in the same sentence, so the jokes work for makers and still make sense to everyone else. Short sentences, friendly promises, no fine print feeling.

**Example phrases (exact, from the site)**
1. "72 layers. Yes, we counted, like a slicer would." (butter croissant)
2. "Steeped 18 hours. About as long as a big print." (cold brew)
3. "Spaghetti, warping or a layer shift caused by our printer means a second print on us. No arguing, no forms."

More: "Dark chocolate, eleven layers, zero supports needed." / "Done before your coffee gets cold." / "Calm energy for long prints." / "Plenty of time for another coffee." / "Everything here fits next to a laptop and a slicer preview."

**Recurring devices:** printing words used for food (layers, supports, slicer), time told in prints ("about as long as a big print"), arrow CTAs ("See the menu →"), live printer status ("Printer 04 · 02:41 left", "Layer 184 / 312").

**Words to avoid:** not defined in the files. See open questions.

## 6. Imagery and graphic style

**Shapes and layout**
- Wavy section edges: every section ends in a soft wave and the next one slides under it.
- A big lighter blue curve sweeps through the hero into the section below.
- Light waves: thin glowing lines like long exposure light trails, drifting slowly, tinted per section.
- Pills everywhere: buttons, tags, tabs, status chips (`border-radius: 999px`).
- Rounded cards, 20 to 26 px radius. On dark sections they are "glass": a faint white gradient, thin light border, background blur.
- Faint 48 px grid lines (5% opacity) in the hero, like a print bed.
- Soft radial glow behind products and printers.

**Photos and illustrations**
- Drinks: round cups shot from straight above, latte art, cut out, floating with a soft dark shadow. They roll in on a curve when the slide changes.
- Printers: enclosed multi colour printers, cut out, with a deep drop shadow and a blue glow.
- Printed models: cut outs in warm filament colours (vase, planter, chess set, keychain, organiser, phone stand), slightly warmed (sepia 12%).
- Menu icons: simple flat illustrations, 64 px, brown 2.4 px outlines, drinks always as top view circles.
- Printer illustration: navy body, glass door, warm light inside, a cream vase growing layer by layer.

**Brand study images (July):** warm cafe interiors in wood and beige with printers on the counter, a young woman with a laptop in a patchwork jacket, kraft packaging, cups and mugs in brown and cream.

## 7. Business card

**Decision (2026-11-05): both options are used.** 85 × 55 mm, for portfolio display only.
| Card | Front | Back |
|---|---|---|
| A "Night shift" (printing side) | navy hero curve, light waves, grid, cream logo | cream, name in Bricolage 800, role in Instrument Serif italic cobalt, mono contact rows, "Printing now" pill |
| B "Layer by layer" (coffee side) | caramel with printed layer lines, ink logo, "Order a coffee. Start a print." | espresso brown gradient, caramel cup symbol, print progress bar "Job: say hello" |

Fictional contact used: Lena Brandt, Founder, lena@printcafe.coffee, +49 30 555 0193, Filamentstraße 3, Berlin.

## 8. Cafe items

**Decision (2026-11-05): both directions are used**, matching the two business cards.
| Direction | Look | Mockup backgrounds (site sections) |
|---|---|---|
| Night shift (printing side) | navy, grid, cobalt light waves, cream logo, cream paper inside | Printers showcase, Print Lab |
| Layer by layer (coffee side) | caramel and cream, printed layer lines, ink logo | Menu (bean brown), Model library (brown), Spirulina caramel |

Items: to-go cup with sleeve, ceramic mug, notebook (front, back, dotted inside page with "Date / Print time / Layer" and the cup symbol), A5 menu (drinks on the front, baked goods on the back, all names, descriptions and prices from the site). Transparent graphics in `Cafe Items\graphics`, flat mockups in `Cafe Items`.

## 9. Print price list and filament guide

Files in `Price List`: A4 sheets in Layer by layer (price sheet, filament sheet) and wall signs in Night shift (price sign, filament sign).

**Prices from the site:** Quick print €5 up to 1 h, Long print €10 up to 8 h (flat), free reprint if our printer fails, overnight printing with pickup the next day, library models €5 or €10 by print time.

**Added prices, approved 2026-11-05:**
| Item | Price |
|---|---|
| Extra hours after 8 h | €1.50 per started hour |
| Silk, TPU or wood-fill filament | +€2 per print |
| We print it for you, pick up later | +€3 |

**Filament guide (approved 2026-11-05):** PLA "the everyday one", Silk PLA "shiny like crema", PETG "the tough one", TPU "soft and bendy", Wood-fill "smells like a workshop". Colour names and swatches use only hex values from the site (Cream, Caramel, Espresso, Matcha, Cobalt, Navy, Ice, Ink, Light oak `#d9a46a`, Walnut `#6e4a2c`).

---

## Open questions

1. **Which palette leads?** The July brand study (moodboard, collage, logo) is warm beige and brown (`#A0805F`, `#D6A877`, `#C1B1A3`, `#E0D5CB`). The website is navy and cobalt plus coffee browns. Which one should the business card, cafe items and price sheets follow? (Suggestion: the website, since the showcase is built around it.)
2. **Logo colour:** keep the brown gradient original anywhere, or use only the one colour versions like the site does?
3. **Name spelling:** the site says "Print Cafe", the Resuverse work page and logo orbit say "Print Café". Which one is official?
4. **Brand study fonts:** Bambank is in the moodboard but not on the site. Drop it, or keep it for anything?
5. **Words to avoid:** nothing in the files. Do you want rules here (for example no technical jargon without a joke or an explanation)?
6. **Build volume typo on the site:** the strip says "25 cm³", the model library says "25 × 25 × 25 cm". The second is correct for a printer this size. Fix the site later?
7. **Print prices for step 4:** the site has two flat tiers (Quick print €5 up to 1 h, Long print €10 up to 8 h), not a per hour rate. Use those as they are, or add a per hour price?
8. **Filaments for step 4:** the site mentions "4 colours per print" and a blue filament, but no materials or colour list. These will need concept values for your approval.
9. **Email:** the site footer uses `hello@printcafe.example`. Switch the site to `printcafe.coffee` too, to match the business card?

**Working defaults used while building (2026-11-05), until answered otherwise:**
- Questions 1 to 3: the website palette leads, the logo is used in one colour like on the site, and the name is written "Print Cafe".
- Question 7: answered. The flat tiers stay (€5 up to 1 h, €10 up to 8 h), plus €1.50 per hour after 8 h (approved).
- Question 8: answered. The filament list in section 9 is approved.
- Business card and cafe items use `printcafe.coffee` for the email and web address.