# Paris Baguette — design system (from the live site CSS)

A design-system spec for [Paris Baguette](https://parisbaguette.com/), the
neighborhood bakery-cafe chain. Unofficial — not an internal brand guideline —
but the values below are read straight from the site's published theme
stylesheet (the Genesis child theme "Paris Baguette" v1.0.40 by 5.12 Design
Lab), so they match what the website actually renders.

The rule is: **write values, not vibes.**

Note: the front-end site theme is deliberately restrained — white, near-black
text, one blue action color. The louder brand identity (Midnight Blue,
Supernova yellow, the custom "PB Signature" face) lives on packaging and
marketing, not in the site CSS. This file documents the **site**.

---

## Typography

- **Body: "Roboto"**, sans-serif (fallbacks Gotham, "Helvetica Neue",
  Helvetica, Arial). Base size **18px**, weight **300**, line-height **1.5**,
  color `#333`. Bold text is weight **700**.
- **Headings: "Source Sans 3" (Source Sans Pro)**, sans-serif, weight **400**,
  line-height **1.2**. In-content h3/h4 step up to weight **600**.
- No serif, no script anywhere — the warmth comes from photography and copy,
  not type.

### Scale (px) — exact values from the theme

| Element | Size | Weight | Notes |
| --- | --- | --- | --- |
| h1 / entry title | 30 | 400 | Page + post titles |
| h2 | 27 | 400 | Section titles |
| h3 | 24 | 400 (600 in content) | Card / block titles |
| h4 | 20 | 400 (600 in content) | Sub-headings |
| h5 | 18 | 400 | |
| h6 | 16 | 400 | |
| body | 18 | 300 | Default text |
| small / meta / caption | 14–16 | 400–600 | Meta rows, captions |

## Color palette

Light theme only — the site lives on white. Values as written in the
stylesheet:

| Token | Value | Role |
| --- | --- | --- |
| --bg | #FFFFFF | Page background |
| --fg | #333333 | Body text (and default button fill) |
| --action | #0073E5 | Links, primary action, and every hover / active accent |
| --panel | #F5F5F5 | Sidebar, sticky posts, author box, pagination background |
| --border | #EEEEEE | Rules, table borders, footer border, card edges |
| --input-border | #DDDDDD | Form-field borders (also the `mark` highlight) |
| --focus | #CCCCCC | Focus outline |
| --disabled-bg | #EEEEEE | Disabled button background |
| --disabled-fg | #777777 | Disabled button text |

- There is one action color: **blue `#0073E5`**. Links are blue and
  underlined; on hover they turn `#333` and drop the underline.
- Buttons invert the relationship: dark `#333` by default, turning **blue
  `#0073E5`** on hover.
- Near-black `#333` on white is the text pairing everywhere — it clears WCAG
  AAA at body size.

## Spacing scale

- Base line-height **1.5**.
- Paragraph spacing: **28px** bottom margin.
- Page gutters / content padding: **30px**; content column caps at **1140px**.
- Vertical section rhythm: **40px** between widgets and blocks, opening to
  **60px** on desktop.
- Button padding **15px 30px**; input padding **15px**.

## Radius scale

| Token | Value | Use |
| --- | --- | --- |
| --radius-button | 5px | Buttons |
| --radius-highlight | 3px | Highlighted nav item ("Order Now") |
| --radius-avatar | 50% | Avatars (circle) |

Buttons are **lightly rounded 5px rectangles, not pills**. Cards have square
corners.

## Elevation & borders

- Almost flat. The one shadow in the system is the header bar:
  `box-shadow: 0 0 20px rgba(0,0,0,0.05)`.
- Cards use a single `#EEEEEE` hairline border and **no drop shadow**.
- Hairlines everywhere — 1px `#EEEEEE` for rules and card edges, 1px `#DDDDDD`
  for input fields.

## Component recipes

### Link
- Color `--action` (#0073E5), underlined. Hover: color `#333`, underline
  removed. Transition `color 0.2s ease-in-out`.

### Button
- Default: bg `#333`, text `#fff`, radius **5px**, padding `15px 30px`,
  font-size **16px**, weight **600**, centered.
- Hover / focus: bg `--action` (#0073E5), text stays `#fff`.
- Secondary: transparent with a `#333` border, fills blue on hover.
- Disabled: bg `#eee`, text `#777`, `cursor: not-allowed`.
- Transition: `all 0.2s ease-in-out`.

### Nav
- White header bar with a soft shadow (`box-shadow: 0 0 20px
  rgba(0,0,0,0.05)`), logo left.
- Menu links: `#333`, 15px, weight 400; hover `--action`. The current item is
  also `--action`.
- The conversion action is a **highlighted menu item**: bg `#333`, radius 3px,
  white text, weight 600 — hover `--action`. This is the "Order Now"
  treatment.

### Input
- bg `#fff`, 1px `--input-border` (#ddd), padding **15px**, full width,
  font-size 18px. Focus: border `#999`, outline removed.
- Placeholder color `#333` at full opacity.

### Card (menu-item / feature)
- Photo hero on top, then title, a short description, then actions — a primary
  button plus a "Details" link. Sits on white with `--border` hairlines. The
  photo is the hero; no overlays on food photography.

## Motion

- One transition everywhere: **0.2s ease-in-out**, on links, buttons, inputs,
  and images. No parallax, no autoplaying carousels.

## Accessibility constraints

- Focus: visible `1px solid #CCC` outline on focus — never removed without
  replacement.
- Full screen-reader-text and skip-link patterns are built into the theme.
- Text/background is `#333` on `#fff` (AAA). Alt text names the product, not
  "delicious pastry".
- Hit targets stay comfortable — buttons pad `15px 30px`.

## Hard rules

1. Light theme only, on white `#FFFFFF`. Never a dark page.
2. One action color: blue `#0073E5`. Links blue + underlined; buttons dark
   `#333` turning blue on hover.
3. Buttons are **5px rounded rectangles, not pills**.
4. Body is **Roboto 300**; headings are **Source Sans Pro 400**. No serif, no
   script.
5. Never place text over food photography.
6. Voice is warm and neighborly — "your neighborhood bakery cafe", "where
   smiles are served daily" — never corporate, never shouty caps. Product
   names are appetizing and specific ("Lemon meets Blueberry").

## Sources

- parisbaguette.com published theme stylesheet — the Genesis child theme
  "Paris Baguette" v1.0.40 by 5.12 Design Lab. Every color, font, size,
  radius, and spacing value above is taken from it.
- parisbaguette.com page content — nav labels, CTA copy, product names, and
  voice.