# mockdown.design — Design System

## 1. Visual Theme & Atmosphere

mockdown.design speaks the language of developer tools — everything is rendered in JetBrains Mono, a coding typeface, used universally from body copy to navigation. The palette is near-monochrome: a brilliant white canvas (`lab(100 0 0)`) against almost-black text, with a single electric blue (`rgb(37, 99, 235)`) acting as the only interactive signal. The atmosphere is precise, low-noise, and confident in its refusal of decoration. It feels like a well-designed terminal or a minimal code editor — deliberate and technical without being sterile.

---

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Background | `lab(100 0 0)` (pure white) | Page canvas |
| Foreground | `lab(2.75 0 0)` (near-black) | All body text, headings |
| Border / divider | `lab(90.95 0 0)` (light grey) | Structural separators |
| Primary CTA | `rgb(37, 99, 235)` | Links, primary buttons |
| Button text on CTA | `rgb(255, 255, 255)` | White on blue |
| Muted text | `oklab(0.145 … / 0.7)` (70% opacity near-black) | Secondary UI text |

The palette is binary by design: content is near-black, actions are blue, everything else is white. No secondary colours, no tints.

---

## 3. Typography Rules

**Typeface:** JetBrains Mono exclusively — the same font used in IDEs and terminals. This is a deliberate identity statement: the product is for developers, and the visual language makes that immediately clear.

| Context | Size | Weight | Notes |
|---|---|---|---|
| Body / H1 | 16px / 24px lh | 400 | Regular weight, code-like density |
| Links / nav | 10px / 13.3px lh | 700 | Bold + `letter-spacing: 1.2px` + `text-transform: uppercase` |
| Buttons | 12px / 16px lh | 500 | Medium weight, compact |
| Textarea | 16px / 24px lh | 400 | Matches body — consistent input feel |

- Links are the only element with uppercase transformation and tracked letter-spacing — they read as labels or tags.
- The monospaced rhythm is intentional: equal-width characters create a grid-like, structured feel throughout.

---

## 4. Component Stylings

- **Primary button (`button.w-full`):** Blue fill `rgb(37,99,235)`, white text, no border radius specified — likely square or very slightly rounded.
- **Default button:** Transparent background, 70% opacity text — ghost style.
- **Textarea:** Inherits body styles exactly. No visual distinction from reading content — immersive editing experience.
- **Links:** Blue background + white text when rendered as pill/tag. When inline, presumably blue text on white.
- **Shadows:** A single subtle shadow found: `rgba(0,0,0,0.1) 0px 1px 3px` + `rgba(0,0,0,0.1) 0px 1px 2px -1px` — classic Tailwind `shadow-sm`, used very sparingly.

---

## 5. Layout Principles

- Body has zero padding/margin — layout is fully controlled at the component level.
- Single breakpoint at `600px` — mobile-first binary layout: one configuration below 600px, one above.
- Minimal structural complexity. The sparse CSS suggests a single-page or two-column application layout.
- Section-level spacing is absent at the CSS root — components define their own rhythm.

---

## 6. Depth & Elevation

Nearly flat. The one detected shadow (`shadow-sm` equivalent) is extremely subtle — reserved for a single floating element like a card or modal. The design avoids depth metaphors entirely; hierarchy comes from type weight and the blue accent.

---

## 7. Do's and Don'ts

**Do:**
- Use JetBrains Mono at every level — body, headings, inputs, buttons.
- Reserve blue `rgb(37,99,235)` exclusively for interactive / actionable elements.
- Use `text-transform: uppercase` + `letter-spacing: 1.2px` for navigation labels and metadata.
- Keep the shadow vocabulary to a single, minimal elevation only.

**Don't:**
- Introduce a second typeface — the mono-only system is the brand.
- Add colour beyond black, white, and blue. No greys, no tints.
- Use multiple shadow depths — one level maximum.
- Style inactive text at full opacity — use the 70% opacity pattern for secondary labels.

---

## 8. Responsive Behavior

A single breakpoint at `600px` signals a focused, intentional responsive strategy:
- Below 600px: stacked, single-column layout, likely with adjusted padding.
- Above 600px: the primary designed experience — likely a centred, constrained-width panel.
- Typography does not rescale — the monospace rhythm holds at all sizes.

---

## 9. Agent Prompt Guide

> "Design in the style of mockdown.design: JetBrains Mono everywhere, pure white background, near-black text. One interactive colour only: `rgb(37,99,235)` blue for links and CTAs. Navigation labels in uppercase with `letter-spacing: 1.2px` at 10px bold. Buttons are flat: blue fill or transparent ghost. No decorative shadows. Single 600px breakpoint. Technical, minimal, developer-native."

---

*Generated by Sparkbites — extracted from live CSS analysis*