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

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.

• 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