# MDC Root Cellar — Design System

Brand identity and design system for **mdcrootcellar.com**, home of **the beet keeper**.

## Context

MDC Root Cellar is a deliberately quiet brand. The domain exists mostly as plumbing — an inbox (`beetkeeper@mdcrootcellar.com`) that aliases other, more public accounts — plus a Google Business listing and one simple landing page. There is no product, no funnel, no newsletter. The brand's job is to be charming to the few people who ever see it.

**Brand idea:** a root cellar. Open rural fields, a lone stone building (or two) off an unpaved road. Timeless, ruggedly self-sufficient, prudent in effort, planning, and storage. Root vegetables *as stored* — dusty skins in the dark, never the bright cut-open flesh. The tone is playful and mysterious in a vague, irreverent way; "beet keeper" is the house example of the wordplay.

**Sources:** no codebase, Figma, or existing assets were provided. Everything here was created new from the founder's written brief (August 2026). The logo is an original mark made in this project.

## The mark

A beet inside a double-ring seal — an almanac stamp. Flat shapes, reads down to 24px. (Explored alternates live in `assets/explorations/`: the keyhole beet and the cellar-door arch.)

- `assets/logo.svg` — primary (beet + sage, transparent background)
- `assets/logo-ink.svg` / `assets/logo-cream.svg` — one-color for light / dark grounds
- `assets/avatar-parchment-512.png`, `assets/avatar-beet-512.png` — square avatars. **For Google Business, upload `avatar-parchment-512.png`** (512×512, exceeds the 250px minimum; the beet version is the alternate).
- `assets/field-horizon.svg` — flat landscape illustration (fields, two stone buildings, unpaved road, low sun) used as the landing hero.

Usage: keep clear space around the mark of at least half the ring's radius. Don't rotate it, add gradients, put text on the ring, or break the rings. On beet or cellar-dark grounds use the cream mark.

## Content fundamentals

Voice: a laconic rural caretaker who finds the whole internet slightly amusing. Playful, mysterious, irreverent — but dry, never wacky.

- Sentence case everywhere, including headings and buttons' source copy (buttons render uppercase via CSS). Periods even on short lines.
- Understatement over enthusiasm. No exclamation points. No emoji, ever.
- First person is rare; the brand speaks as "the keeper" in third person or not at all. Address the reader as "you" sparingly.
- One pun per surface, maximum. Root/storage/dark wordplay is the house register ("beet keeper", "answered in season", "kept in the dark, on purpose").
- Say less. A line that can lose a word loses it.

Examples in register:
- Tagline: "Good things, kept in the dark."
- Empty state: "Nothing down here yet."
- Success toast: "Stored."
- Error: "That didn't take. Try again."
- CTA: "Knock"
- Footer: "No newsletter, thankfully."

## Visual foundations

**Color.** Parchment field (`--surface-page #F1E8D4`) with loam-ink text (`--ink #251A13`). Primary is beet-skin maroon (`--beet-600 #5F2B3E`) — dusky, never magenta. Supporting "crops": sage (leaves, success), dusty carrot (links, `--carrot-600`), onion-skin amber (focus rings, warnings), dusk blue-gray (info), clay (danger). Everything sits under a film of cellar dust: low chroma, warm, no pure white or black. Max two page background colors per artifact (parchment + one of card/dark).

**Type.** Young Serif for display (chunky, storybook, one weight — size does the talking). Alegreya for body (warm humanist serif; italics for asides and placeholders). Space Mono for the "ledger" layer — labels, buttons, badges, tabs, tables of what's in storage — always uppercase with `--track-label` tracking at small sizes. Hero display uses `--text-hero` (clamp 42–68px); body is 16px/1.6.

**Spacing & layout.** 4px base scale (`--space-1..10`), generous by default; whitespace is the mysterious part. Content measures ≤ `--measure` (60ch); page container 1080px, narrow 720px. Layouts are centered, single-column, calm. No fixed/sticky chrome except a plain top header on the site.

**Backgrounds.** Flat parchment. No gradients, no textures, no photography yet (if photography arrives: warm, grainy, dusk-lit exteriors — never studio-lit vegetables). The one illustration style is flat geometric landscape (`field-horizon.svg`); don't add new illustration styles ad hoc.

**Borders & shadows.** Sturdy 1.5px borders (`--border-w`), ink or `--line-strong`. Shadows are "stamp" shadows: hard offsets, zero blur (`--shadow-stamp` 3px, hover 4px, pressed 1px) — like over-inked print. Cards may use the faint `--shadow-lift`. Soft blur (`--shadow-deep`) is reserved for overlays (dialogs, toasts) only. No inner shadows.

**Corners.** Small radii: 4/8/12/16px. The signature shape is **the arch** (`--radius-arch`) — cellar-door corners, fully round on top, square-footed — used sparingly for hero cards, dialogs, and framed imagery.

**Motion.** Cellar-calm: fades and small rises only (`rc-rise`, `rc-fade`), 130–420ms, `--ease-lantern`. No bounces, no spins, no parallax. Hover: darken one step + lift 1px (stamp shadow grows). Press: sink 2px (shadow shrinks). Focus: 2px `--focus-ring` amber outline — lantern light.

**Transparency & blur.** Essentially none. The dialog backdrop (`rgba(23,13,18,.55)`) is the only sanctioned transparency; no glassmorphism.

**Cards.** Parchment-card ground, 1.5px `--line-strong` border, 16px radius, `--shadow-lift`; variants: `arch`, `sunken` (burlap, no shadow), `dark` (cellar).

## Iconography

No icon system is bundled, deliberately — the brand barely needs icons. Rules:

- Functional glyphs (chevron, check, ×) are drawn inline by the components: 1.75px stroke, round caps, `currentColor`, 16–20px grid.
- If a surface genuinely needs more icons, use **Lucide** from CDN at `stroke-width="1.75"` — its plain stroke style sits well with the mono ledger layer. Flag any heavier usage as a brand decision.
- No emoji. No icon fonts. Unicode ornaments are allowed in the ledger register only: `·` as a separator, `—` for absence.
- The beet mark is a logo, not an icon; don't inline it at glyph sizes below 24px.

## Components

React primitives in `components/`, styled entirely by `css/components.css` classes + tokens (import React only; class prefix `rc-`). Bundle namespace: `window.MDCRootCellarDesignSystem_40c4e2`.

- `actions/` — Button (primary/secondary/ghost/danger; sm/md/lg), IconButton
- `forms/` — Input, Select, Checkbox, Radio, Switch (+ field label/hint wrappers)
- `display/` — Card (default/arch/sunken/dark), Badge (status tones), Tag (removable)
- `overlay/` — Dialog (arch option), Toast (status dot), Tooltip
- `navigation/` — Tabs
- `brand/` — Logo (mark/lockup/stacked; color/ink/cream)

**Intentional additions** (no source inventory existed; standard set sized to a tiny brand): the components above are the full set. `Logo` exists so lockups stay consistent — wordmark type is HTML, not baked into SVG.

## UI kits & templates

- `ui_kits/website/` — the mdcrootcellar.com landing page (hero, ledger of what's kept, knock-to-reveal contact, footer) and a 404. `index.html` is interactive: knock on the cellar door to get the email address.
- `templates/landing-page/` — the landing page as a reusable template (tweaks: contact email, toggle horizon/ledger sections).

## Index

- `styles.css` — global entry; imports everything below
- `tokens/` — `fonts.css` (Google Fonts import), `colors.css`, `typography.css`, `spacing.css`, `surfaces.css`, `motion.css`
- `css/` — `base.css` (resets, links, selection, focus), `components.css` (all `rc-*` classes)
- `assets/` — logo SVGs, avatar PNGs, `field-horizon.svg`
- `components/`, `ui_kits/website/`, `guidelines/` (specimen cards), `thumbnail.html`, `SKILL.md`

## Caveats

- Fonts load from Google Fonts CDN (`tokens/fonts.css`); no binaries are self-hosted. Young Serif has a single weight. If licensed/self-hosted files are preferred, drop them in `assets/fonts/` and replace the import with `@font-face` rules.
- The mark, palette, and voice are new and unratified — nothing here is load-bearing yet; iterate freely.