---
name: bennybytes-design
description: Style pages in the BennyBytes visual system — warm cream and harbour navy, Cormorant Garamond display type, soft raised cards. Use when building or restyling a page, card grid, panel, or button set for bennybytes.net, or when asked to match the site's colours, type, or card style.
metadata:
  category: web
  tags: [design, css, colour, typography, cards]
  version: 1.0.0
  summary: "The BennyBytes visual system: colour tokens, the type scale and its spacing, and the card, panel, and control recipes."
---

# BennyBytes design

Warm cream paper, deep harbour navy, one muted green, and a tall serif for display.
Surfaces are soft and slightly raised; nothing is square, nothing is loud.

## Colour

```css
:root {
  color-scheme: light;
  --bg: #f7f6ed;        /* page: warm cream paper */
  --text: #173344;      /* deep harbour navy, all body copy */
  --muted: #50656b;     /* secondary copy, metadata */
  --line: #17334426;    /* hairline borders (navy at 15%) */
  --accent: #446c60;    /* muted green: hover, categories, small marks */
  --card: #fffdf5;      /* raised surfaces */
  --code-bg: #173943;   /* dark ink panels */
  --code-text: #fffbed;
}
```

Three more that are part of the system but not variables:

| Colour | Where |
|---|---|
| `#f9e5be` sand | emphasis **on dark only** — an italic in a dark heading, the `$` in a command block |
| `#bc602e` rust | the focus ring; the warm accent in print |
| `#e5ece4` sage | tinted panels that need to sit apart from a plain card |

Two rules do most of the work:

- **Sand is a dark-background colour.** It disappears on cream. On light surfaces the
  emphasis colour is `--accent`, or rust if it needs to be warm.
- **One accent per view.** If a heading is already carrying colour, the buttons stay navy.

Text on cream is always `--text`; drop to `--muted` for anything secondary. Don't
introduce a third grey.

## Type and spacing

```css
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('…/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('…/cormorant-garamond-500-italic.woff2') format('woff2'); }

body { font: 16px/1.7 'Avenir Next', system-ui, sans-serif; }
h1, h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(48px, 6vw, 78px); line-height: 1; margin: 0 0 24px; max-width: 760px; }
h2 { font-size: 38px; line-height: 1.1; margin: 0 0 14px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
```

**The display face ships in 500 only**, upright and italic. Never request bold — it
synthesises and smears. Emphasis comes from size, colour, or italic.

Spacing that goes with the type:

| | Value | Why |
|---|---|---|
| Display tracking | `-.035em` | Cormorant is loose by default; without this it reads scattered |
| Display leading | `1` on `h1`, `1.1` on `h2` | Tall serif; normal leading opens a hole between lines |
| Body leading | `1.7` | Airy enough to read against a warm background |
| Eyebrow | 10px, `letter-spacing: 2.5px`, uppercase | The only tracked-out text in the system |
| Card title | `35px/1.1`, display face | Steps down from `h2` without competing |
| Section rhythm | `padding: 48px 0` | Every section, no exceptions |
| Content width | `min(1040px, calc(100% - 64px))` | 40px gutters under 700px |

Headlines are short — two beats, often with the second line italic and coloured. Keep
each line under about six words; the face is tall and thin and long lines go limp.
**Never set body copy, labels, or UI in the display face.** Display only.

Body copy runs 14–16px. Card blurbs are 14px `--muted`, capped at `76ch`. Metadata
rows are 11px.

## Cards and surfaces

```css
/* card */
padding: 28px;
border: 1px solid #fff;
border-radius: 24px;
background: linear-gradient(145deg, #fffef9, #eaf0e8);
box-shadow: 0 8px 25px -20px #17334466, inset 0 1px 0 white;
transition: transform .2s, box-shadow .2s;

/* card:hover */
transform: translateY(-3px);
box-shadow: 0 14px 28px -20px #17334480;
```

The card is the signature object. Three things make it work, and dropping any one of
them flattens it:

1. A **white** 1px border, not a grey one — it reads as a lit edge against cream.
2. The **145° gradient** from near-white to a faint sage. A flat fill looks dead.
3. The **inset white highlight** in the shadow, which is what suggests a raised sheet.

The shadow is wide and very negative-spread (`-20px`), so it's a soft lift rather than
a drop shadow. Keep the hover lift at 3px; more feels like a web app.

Other surfaces:

```css
/* tinted panel — CTAs and forms */  background: #e5ece4; border: 1px solid var(--line); border-radius: 24px; padding: 34px;
/* ink panel — commands, code */     background: var(--code-bg); color: var(--code-text); border-radius: 14px; padding: 18px;
/* empty state */                    border: 1px dashed var(--line); border-radius: 20px; padding: 36px;
/* thumbnail */                      border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
```

**The radius ladder** — 24px cards and large panels, 20px small panels and tags, 14px
ink panels, 12px thumbnails, 25px pill controls. Corners are never square, and a radius
should always match its neighbours' step on the ladder.

Card contents stack in a column with `gap: 16px`: a small uppercase category in
`--accent`, a display-face title, a muted blurb, tags, then a thin metadata row.

## Controls

```css
/* button */   min-height: 44px; padding: 12px 20px; border-radius: 25px;
               border: 1px solid var(--line); background: #fffdf5;
               font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px;
/* primary */  background: var(--text); color: #fffbed;
/* hover */    border-color: var(--accent);
/* chip */     min-height: 44px; padding: 8px 18px; border-radius: 24px;
               border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px;
/* chip on */  color: #fffbed; background: var(--text); border-color: var(--text);
/* tag */      padding: 2px 10px; border-radius: 20px; border: 1px solid var(--line);
               color: var(--muted); font-size: 10px;
/* input */    min-height: 48px; padding: 10px 18px; border-radius: 26px;
               border: 1px solid var(--line); background: #fffdf5; font-size: 15px;
```

Buttons and chips are small-text pills: 12px at weight 600, never larger. Icons inside
them are 18px. Tags are read-only and smaller than chips, which are interactive.

## Grids

```css
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 20px;  /* 24px for image-led cards */
```

Use **`auto-fill`, not `auto-fit`** — with a single item `auto-fit` stretches one card
across the whole row. The `min(100%, …)` guard is what keeps it from overflowing on a
narrow phone.

## Non-negotiables

- Interactive targets are at least **44px** tall. Buttons, chips, and nav items already are.
- Focus is `outline: 3px solid #bc602e; outline-offset: 5px`. Never remove it.
- Breakpoints at **700px** (gutters to 40px) and **370px**. No horizontal scroll at 390px.
- Wrap motion in `@media (prefers-reduced-motion: reduce)`.
- Decorative SVG gets `aria-hidden="true"`; real images get a real `alt`.

## In print

The same colours and type work at Letter size, with two changes:

- **No box-shadows.** They rasterise as grey plates in some PDF renderers. Use a
  `1px solid #17334420` hairline instead and keep the gradient.
- Rust `#bc602e` takes the emphasis role sand has on screen, because the page is cream.

Set `@page { size: letter; margin: 0 }`, give the body a fixed `height: 11in` with
`overflow: hidden`, and verify the output is genuinely one page — overflow silently
becomes a second, mostly blank sheet.

## Checklist

1. Cream background, navy text, `--muted` for anything secondary?
2. Display face at 500 with `-.035em` tracking, and nowhere near body copy?
3. Cards: white border, 145° gradient, inset highlight, 24px radius?
4. One accent in play, and sand only on dark?
5. Every corner on the radius ladder?
6. 48px section rhythm?
7. 44px targets, focus ring intact, no horizontal scroll at 390px?