# baked.design — Design System Reference

## 1. Visual Theme & Atmosphere

baked.design is a Framer-built agency site with a deliberately confident, editorial character. The palette sits between corporate polish and dark creative — near-black backgrounds anchor the brand, punctuated by a deep navy accent block and crisp white content surfaces. The overall mood is focused and premium, projecting trustworthiness without coldness. Motion (Framer Motion) is present but restrained; the site moves to guide attention, not to entertain. There are no gradients, no illustrative decorations. Typography leans into tight negative tracking for a compressed, modern headline feel. The absence of custom CSS properties signals a Framer-native build — everything is composed through Framer's visual layer rather than a token-driven system.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Page background | `rgb(23, 23, 23)` | Body / dark sections |
| Near-black surface | `rgb(33, 33, 33)` | Secondary dark cards |
| Dark card | `rgb(84, 84, 84)` | Mid-tone surfaces, dividers |
| Content surface | `rgb(255, 255, 255)` | Cards, light sections |
| Off-white | `rgb(250, 250, 250)` | Subtle panel fill |
| Warm light | `rgb(242, 241, 237)` | Feature backgrounds |
| Brand accent | `rgb(37, 84, 138)` | CTA blocks, highlight sections |
| Link / interactive | `rgb(0, 0, 238)` | Default browser-blue links |

The palette is essentially two-temperature: dark (near-black) and light (white/off-white), bridged by the navy accent. No warm or saturated hues appear outside the accent block. The browser-default link blue (`rgb(0, 0, 238)`) is a deliberate choice — raw and unrefined, echoing a web-native confidence.

## 3. Typography Rules

**Primary typeface:** Inter Display (with Inter Display Placeholder fallback) — a high-fidelity variable display cut optimised for large sizes.

**Body fallback:** `sans-serif` (system default) — used for base-level UI, suggesting inter is loaded only for editorial content.

| Level | Size | Weight | Tracking | Line Height |
|-------|------|--------|----------|-------------|
| Display / paragraphs | 24px | 400 | −0.9px | 28px |
| Body UI | 12px | 400 | normal | normal |

The tight −0.9px letter-spacing on 24px text is the defining typographic gesture — it compresses the Inter Display letterforms into a dense, confident headline rhythm. No uppercase transforms, no variable weights beyond regular. What's absent is notable: no declared heading hierarchy (h1–h6), no weight variation — Framer builds visual hierarchy through size and positioning, not CSS selectors.

## 4. Component Stylings

**Buttons / CTAs:** White background with browser-blue text and border. Pill shapes appear via `99px` and `999px` border radii. No hover states detected in CSS — Framer handles hover transforms in its own layer.

**Cards:** Rounded at `24px` or `12px`. Light surfaces (`#fafafa`, `#f2f1ed`) against the dark page. Minimal borders.

**Nav / links:** Transparent background, browser-blue text. Focus state adds a `rgb(0, 95, 204) auto 1px` outline — accessible but default-browser styled.

**Chip / tag elements:** `4px` radius for small inline components.

## 5. Layout Principles

Built entirely in Framer's absolute/relative canvas model. Breakpoints at **809.98px** and **1199.98px** define three tiers: mobile (<810px), tablet (810–1199px), desktop (≥1200px). Spacing is Framer-generated — no CSS custom property scale exists. Sections stack vertically with no detected gap/padding patterns at the CSS level; all composition happens in Framer's visual layer. Content width feels generous on desktop with full-bleed dark sections anchoring the page rhythm.

## 6. Depth & Elevation

Shadowless. No `box-shadow` values are present anywhere in the extracted data. Elevation is communicated entirely through **color contrast** — dark page vs light cards creates the sense of lift. The navy accent block (`rgb(37, 84, 138)`) reads as the highest-emphasis surface simply by being the only chromatic element. Z-index layering exists in Framer's component tree but is not surfaced as CSS custom properties.

## 7. Do's and Don'ts

**Do:**
- Use near-black (`#171717`) as the default page canvas for dark sections
- Apply tight negative tracking (−0.9px) on Inter Display at 24px+ sizes
- Use the navy accent (`#25548A`) sparingly — one section, one CTA
- Keep border radii generous (24px, 99px) for primary interactive elements
- Let color contrast do the heavy lifting — avoid decorative shadows

**Don't:**
- Introduce gradients or textured backgrounds — the system is flat and intentional
- Use the browser-default link blue as the only interactive affordance on dark backgrounds (contrast fails)
- Add weight variation beyond regular (400) — this system relies on size, not weight, for hierarchy
- Override Framer's motion layer with CSS animations — duplication creates jank

## 8. Responsive Behavior

Three breakpoints: **mobile** (<810px), **tablet** (810–1199px), **desktop** (≥1200px). Layout reflow is managed by Framer's responsive variants — not CSS Grid or Flexbox media queries. Text scaling is not fluid (no `clamp()` detected); sizes are fixed per breakpoint. Expect column-to-stacked transitions at the 810px threshold.

## 9. Agent Prompt Guide

> "Design in the style of baked.design: dark near-black canvas (`#171717`), white card surfaces, a single navy accent block (`#25548A`). Use Inter Display at 24px with −0.9px letter-spacing for all headline text. Pill-shaped CTAs (border-radius: 99px) with white fill and browser-blue label. No shadows — elevation through color contrast only. Framer Motion for subtle entrance animations. Three-column desktop layout collapses at 810px."

---

*Generated by Sparkbites — extracted from live CSS analysis*