---
version: alpha
name: Poch Studio
description: Playful editorial warmth — Fontdiner Swanky retro-script display over Inter body, a buttery cream canvas with deep olive ink, candy-pink and acid-green accents, and big pillowy radii (20–40px) that make every surface feel soft and bloomed.
colors:
  # Canvas + ink
  background: "#fff6c6"
  surface: "#ffffff"
  surface-cream: "#fff6c6"
  ink: "#243000"
  ink-olive: "#465907"
  ink-pure: "#000000"

  # Brand accents
  primary: "#465907"      # olive — primary action / brand green
  accent-pink: "#ffa5c6"  # candy pink
  accent-green: "#83fb89"  # acid mint green
  accent-blue: "#416afc"  # electric blue

  # Neutral scale
  gray-100: "#ececeb"
  white: "#ffffff"

  # On-color
  on-primary: "#fff6c6"
  on-pink: "#243000"
  on-green: "#243000"

typography:
  display-hero:
    fontFamily: "'Fontdiner Swanky', cursive"
    fontSize: 150px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display-large:
    fontFamily: "'Fontdiner Swanky', cursive"
    fontSize: 110px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "'Fontdiner Swanky', cursive"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0px
  heading:
    fontFamily: "Inter, sans-serif"
    fontSize: 40px
    fontWeight: 650
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Inter, sans-serif"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, sans-serif"
    fontSize: 20px
    fontWeight: 420
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 17px
    fontWeight: 420
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 28px
  2xl: 40px
  3xl: 50px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-pink:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.on-pink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink-olive}"
  badge:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.on-green}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
  card-pink:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.gray-100}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
---

# Poch Studio Design System

## Overview

Poch Studio is a design studio that helps brands "bloom," and its own site is a love letter to that promise — warm, friendly, and unmistakably hand-made in feel. The canvas is a buttery cream (`{colors.background}`), not white, which immediately softens the whole experience and sets a nostalgic, sun-warmed mood. Against that cream, deep olive ink (`{colors.ink}`) does the reading work, while a brighter olive (`{colors.ink-olive}`) carries brand identity and primary actions.

The defining typographic move is the pairing of **Fontdiner Swanky** — a chunky retro-script display face with mid-century diner energy — against the clean neutrality of **Inter** for body copy. This is the editorial-playful tension at the heart of the brand: the display type is loud, characterful, and enormous (up to 150px), and Inter calms it down into legible paragraphs. The contrast keeps the page feeling like a friendly poster rather than a corporate deck.

Color is used like confetti. A candy pink (`{colors.accent-pink}`), an acid mint green (`{colors.accent-green}`), and an electric blue (`{colors.accent-blue}`) punctuate the cream-and-olive base in cards, badges, and buttons. Nothing is muted — the accents are saturated and joyful, but they're rationed so the cream canvas always reads as the home base.

Shapes are soft and pillowy everywhere. Border radii cluster at 20px and 40px, with full pills (`{rounded.pill}`) on buttons, so every surface feels rounded, bloomed, and approachable — no hard corners, no sharp edges.

**Key Characteristics:**
- Buttery cream canvas (`{colors.background}`) instead of white — warm and nostalgic
- Fontdiner Swanky retro-script display (up to 150px) paired with Inter body
- Deep olive ink (`{colors.ink}`) and brand olive (`{colors.ink-olive}`)
- Confetti accents: candy pink, acid green, electric blue — saturated and rationed
- Big pillowy radii (20–40px) with full-pill buttons
- Playful poster energy over corporate restraint

## Colors

### Primary
- **Cream** (`{colors.background}`): The signature canvas — warm, buttery, nostalgic.
- **Deep Olive** (`{colors.ink}`): Primary reading text and headings on cream.
- **Brand Olive** (`{colors.ink-olive}`): Primary action color and brand-green elements.
- **White** (`{colors.surface}`): Inner card surfaces that lift off the cream.

### Accents
- **Candy Pink** (`{colors.accent-pink}`): Feature cards, accent buttons, highlights.
- **Acid Green** (`{colors.accent-green}`): Badges, fun callouts.
- **Electric Blue** (`{colors.accent-blue}`): Links and pops of contrast.

### Neutral
- **Gray 100** (`{colors.gray-100}`): Hairline dividers, input borders.

## Typography

### Font Family
- **Display**: `'Fontdiner Swanky', cursive` — retro diner-script for hero/headline moments.
- **Body**: `Inter, sans-serif` — neutral, legible reading and UI text.

### Hierarchy

The full scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 150px Fontdiner Swanky — billboard hero |
| `display-large` | 110px display moments |
| `display` | 50px section display headers |
| `heading` | 40px Inter headings |
| `sub-heading` | 25px sub-section titles |
| `body-large` | 20px lead paragraphs |
| `body` | 17px standard reading |
| `body-small` | 15px UI text |
| `caption` | 12px metadata, badges |
| `button-ui` | 15px button labels |

### Principles
- **Display loud, body calm**: Fontdiner Swanky carries personality at large sizes; Inter handles everything readable.
- **Scale is dramatic**: Hero type jumps to 110–150px against generous cream space.
- **Inter weights**: 420 for relaxed body, 600–650 for headings and labels.

## Layout

### Spacing System
Base rhythm is 8px. The scale jumps from `{spacing.2xl}` (40px) to `{spacing.3xl}` (64px) to `{spacing.4xl}` (120px) for big poster-like section gaps.

### Grid & Container
- Generous margins around a centered content column
- Feature work shown in large rounded cards, often colored
- Cream sections alternate with white/colored cards for rhythm

### Whitespace Philosophy
- **Warm emptiness**: The cream canvas does heavy lifting — lots of breathing room around oversized display type.
- **Color as punctuation**: Saturated accents appear in bounded cards/buttons, never as full-bleed washes that overwhelm the cream.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 5px | Tiny chips |
| `sm` | 10px | Small containers |
| `md` | 15px | Inputs |
| `lg` | 20px | Standard cards |
| `xl` | 28px | Medium cards |
| `2xl` | 40px | Large feature cards |
| `3xl` | 50px | Hero panels |
| `pill` | 100px | Buttons, badges, tags |

## Components

The full spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Brand olive fill, cream text, full pill.
- **`button-pink`** — Candy pink fill with olive text, full pill.
- **`button-secondary`** — White fill with olive outline.

### Cards
- **`card`** — White surface lifting off the cream, big 40px radius.
- **`card-pink`** — Candy-pink feature card with olive text.

### Badges
- **`badge`** — Acid-green pill with olive text for fun labels.

### Navigation
- **`nav-bar`** — Cream header matching the canvas, olive links.

## Do's and Don'ts

### Do
- Use the cream canvas (`{colors.background}`) as home base — not white
- Pair Fontdiner Swanky display with Inter body
- Keep all corners soft — 20–40px radii, full-pill buttons
- Use accents as rationed confetti in cards and buttons
- Keep olive ink for all reading text

### Don't
- Don't put dark olive ink on the saturated pink/green without checking contrast — keep body copy on cream or white
- Don't use white as the primary page background — cream is the identity
- Don't introduce hard 0px corners on cards or buttons
- Don't flood the page with saturated accents — they punctuate, they don't dominate

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales 150px → ~50px |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | >1024px | Full layout, oversized display hero |

### Collapsing Strategy
- Hero display type scales down dramatically but keeps Fontdiner Swanky character
- Colored feature cards stack to single column
- Nav collapses to a menu toggle

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Cream `{colors.background}`
- Body text: Deep Olive `{colors.ink}`
- Primary CTA: Brand Olive `{colors.primary}` with cream text
- Accent card: Candy Pink `{colors.accent-pink}`
- Badge: Acid Green `{colors.accent-green}`

### Example Component Prompts
- "Hero on cream `{colors.background}`. Headline in Fontdiner Swanky at 110px, deep olive `{colors.ink}`. Subtitle in Inter 20px weight 420. Pill CTA: brand olive `{colors.primary}` fill, cream text, 100px radius."
- "Feature card: candy pink `{colors.accent-pink}` background, olive `{colors.ink}` text, 40px radius, 32px padding."
- "Badge: acid green `{colors.accent-green}`, olive text, full pill, 4px 12px padding, Inter 12px weight 600."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Poch Studio. Brand names and trademarks belong to their respective owners.