Skip to content

design.md

Latest commit

 

History

History
249 lines (191 loc) · 11.6 KB

design.md

File metadata and controls

249 lines (191 loc) · 11.6 KB
Raw

OpenDevGen Design System — "Paper Console"

A light editorial system. The dark Verge-derived spec that previously lived in this file is retired: the application is light mode, everywhere. What carries over is the editorial DNA — mono uppercase labels, hairline borders instead of shadows, pill buttons, one loud display face used sparingly — now printed on paper instead of projected in a club.

1. Visual Theme & Atmosphere

The canvas is warm paper white (#fafaf9), the text is near-black ink (#131313), and the interface reads like a well-set technical magazine: calm, flat, precise. Color is scarce and therefore meaningful — Ultraviolet (#5200ff) is the single working accent (links, focus, hover states, active markers), and Mint (#3cffd0) appears only as a small highlight fill (badges, selected pills) always carrying ink text.

Depth is flat. Cards are white rectangles separated from the paper canvas by 1px hairlines (#e6e6e2), never by drop shadows. Primary actions are solid ink-black pills — the highest-contrast object on any screen is always the thing you're supposed to click.

The voice is restrained. The display face (Anton) exists for the wordmark and almost nothing else. Headlines are set in Space Grotesk at normal editorial sizes. The system should feel designed, not generated: no giant type for its own sake, no neon washes, no gradients, no glassmorphism.

Key characteristics:

  • Warm paper canvas (#fafaf9) with white (#ffffff) cards — light mode only
  • Ink #131313 for text and for primary buttons (solid black pill CTAs)
  • Ultraviolet #5200ff as the one working accent; mint #3cffd0 as a rare highlight fill
  • 1px hairline borders do all elevation work — no box-shadows
  • JetBrains Mono UPPERCASE micro-labels with letter-spacing: the system's signature
  • Anton display face reserved for the wordmark; headings are Space Grotesk
  • Zero gradients, zero decorative blurs, solid colors only

2. Color Palette & Roles

Surfaces

  • Paper (#fafaf9): default page background.
  • Card White (#ffffff): cards, inputs, headers, elevated surfaces.
  • Ink Panel (#131313): the single permitted dark surface — the brand panel on auth screens and (later) marketing blocks. White text, mint/UV accents inside. It is a color-block, not a "dark mode".

Text

  • Ink (#131313): headings, body, primary content.
  • Ink Secondary (#6f6f6f): supporting copy, field labels, metadata.
  • Ink Muted (#9c9c9c): placeholders, disabled text, timestamps.
  • Paper text on ink (#ffffff / rgba(255,255,255,0.6)): inside the ink panel only.

Accents

  • Ultraviolet (#5200ff): the working accent. Links, focus borders, active nav markers, primary-button hover, selected states.
  • Deep Violet (#3d00bf): hover state of ultraviolet elements.
  • Mint (#3cffd0): highlight fill only — badges, selected pill tags, small emphasis blocks. Always with ink text. Never used for text on white and never as a background wash.
  • Mint Ink (#309875): positive/success text on light surfaces (mint itself is unreadable on white).
  • Link Hover Blue (#3860be): hover color for inline text links.

Feedback

  • Error Red (#dc2626): error borders and error text. (The old spec used ultraviolet for errors; now that ultraviolet is the primary accent, errors are conventionally red — clarity beats cleverness.)

Borders

  • Hairline (#e6e6e2): default card/input/divider border.
  • Hairline Strong (#131313): emphasized outline (secondary buttons, focused cards).

3. Typography Rules

Font Family

  • Anton (display, weight 400): the wordmark face. OPENDEVGEN in the nav, the auth brand panel, and nowhere else. Uppercase, line-height ~0.95.
  • Space Grotesk (300–700): everything — headings, body, buttons that aren't mono-labeled. The UI workhorse.
  • JetBrains Mono (500/600): UPPERCASE micro-labels exclusively — kickers, field labels, button labels, tags, timestamps. 1.2–1.5px letter-spacing. Lowercase mono appears only in code/diff contexts (chat tool output).

Hierarchy

Role Font Size Weight Tracking Notes
Wordmark Anton 20–32px 400 0.5px Nav + brand panel only, UPPERCASE
Page heading Space Grotesk 28–40px 600 -0.02em One per page
Section heading Space Grotesk 20–24px 600 0
Card heading Space Grotesk 16–18px 600 0
Body Space Grotesk 15–16px 400 0 line-height 1.6
Supporting Space Grotesk 13–14px 400 0 Ink Secondary
Micro-label JetBrains Mono 11–12px 600 1.2–1.5px UPPERCASE, the signature move
Timestamp/meta JetBrains Mono 11px 500 1.2px UPPERCASE, Ink Muted

Principles

  • One loud thing per screen. If the wordmark is big, the heading is calm.
  • Mono is a uniform, not a font. It marks system text — labels, tags, statuses — and is always uppercase with tracking outside code contexts.
  • No display type in UI. Anton never labels a button, heads a card, or sets body copy. If Anton appears outside the wordmark, it's a bug.
  • Negative tracking on large headings (-0.02em), positive tracking on mono caps — never default tracking on either.

4. Component Stylings

Buttons

All button labels are JetBrains Mono 12px/600 UPPERCASE 1.5px tracking, pill radius (999px), padding 10px 24px (sm: 6px 16px), transition ~150ms.

Primary — Ink Pill

  • Fill #131313, text #ffffff, no border.
  • Hover: fill shifts to Ultraviolet #5200ff.
  • Active: fill Deep Violet #3d00bf.
  • Focus-visible: 2px Ultraviolet outline, 2px offset.
  • Disabled: 40% opacity.

Secondary — Outlined

  • Transparent/white fill, 1px solid #131313 border, ink text.
  • Hover: fills ink, text inverts to white.

Ghost — Text

  • No fill/border, Ultraviolet text.
  • Hover: Link Hover Blue #3860be. Used for tertiary actions and links-as-buttons.

Mint Badge (non-interactive)

  • Mint fill, ink text, pill radius, mono 11px/600 UPPERCASE.

Cards & Containers

  • White fill, 1px Hairline border, 16px radius (20px for feature cards).
  • Padding 24–32px.
  • No shadow. Hover (when interactive): border darkens to Hairline Strong; content colors may shift to Ultraviolet. No lift, no scale.

Inputs & Forms

  • Field label: mono micro-label, Ink Secondary, above the input.
  • Input: white fill, 1px Hairline border, 8px radius, 15px Space Grotesk ink text, placeholder Ink Muted, padding 10px 14px.
  • Focus: border Ultraviolet + 3px ultraviolet ring at 12% opacity. No glow.
  • Error: border Error Red; message below in Error Red 12px.
  • Transition: 150ms on border-color and ring.

Navigation

  • App header: white bar, 1px Hairline bottom border, wordmark (Anton, ~20px, ink) left; actions right. Height ~56px.
  • Links: ink at rest → Link Hover Blue on hover, no underline.
  • Active section: 2px Ultraviolet underline (inset), not a color fill.

Auth Screens (Split Panel)

The one place the Ink Panel appears:

  • Desktop ≥1024px: two columns. Left ~44%: #131313 panel — wordmark top, a value statement (Space Grotesk, white, 28–36px/500) with a mint mono kicker, small mono feature list, muted footer line. Right: paper canvas, form centered, max-width ~400px.
  • The form sits directly on paper — no card box. Page heading (28px/600), one line of supporting text, fields, full-width primary button, hairline divider, then the alternate-action line ("No account? SIGN UP" — mono ghost link).
  • Mobile <1024px: ink panel collapses to a slim ink top bar carrying only the wordmark; form fills the paper below.

5. Layout Principles

  • Base unit 8px; component-internal spacing may use 4px steps.
  • Section spacing: 48–64px between major regions, 20–24px inside cards, fields stacked at 20px gaps.
  • Container: content max-width 1200px, 24px page padding mobile / 48px desktop.
  • Radius scale: 8px inputs, 16px cards, 20px feature cards, 999px pills, 50% avatars. Five values, no others.
  • Whitespace is structure: with no shadows and few colors, spacing and hairlines carry the entire hierarchy. When in doubt, add space, not a box.

6. Depth & Elevation

Level Treatment Use
0 Paper, no border Page background
1 White fill + 1px Hairline Cards, inputs, header
2 1px Hairline Strong Secondary buttons, hover
3 Solid ink or mint fill Primary CTA, badges
4 Ink Panel color-block Auth brand panel only

No box-shadows anywhere. Elevation is fill + border, full stop.

7. Do's and Don'ts

Do

  • Use paper #fafaf9 for pages and white for cards — light mode only.
  • Make the primary action a solid ink pill; let hover turn it ultraviolet.
  • Set every label, tag, and button caption in mono UPPERCASE with tracking.
  • Use hairlines for separation; darken them for emphasis.
  • Keep ultraviolet scarce — if it's everywhere, it ranks nothing.
  • Put ink text on every mint fill.
  • Use red — not ultraviolet — for errors.

Don't

  • Don't reintroduce dark backgrounds outside the Ink Panel. There is no dark mode.
  • Don't use box-shadows, gradients, glass blur, or color washes.
  • Don't use Anton beyond the wordmark, or for anything interactive.
  • Don't use mint for text on white, or ultraviolet text below 13px.
  • Don't put giant display type on app screens — the loud masthead era is over.
  • Don't add new accent colors; the system is ink + ultraviolet + mint (+ red for errors).

8. Responsive Behavior

Breakpoint Width Changes
Mobile <640px Single column; 24px page padding; full-width buttons
Tablet 640–1023px Single column, wider padding; auth panel collapses to bar
Desktop ≥1024px Auth split panel; app sidebar + content
Wide ≥1280px Content capped at 1200px, margins grow

Touch targets ≥44px on mobile. Mono labels never shrink below 11px.

9. Agent Prompt Guide

Quick reference when generating UI:

  • Page bg: Paper #fafaf9 · Card: #ffffff + 1px #e6e6e2, 16px radius
  • Text: Ink #131313 / secondary #6f6f6f / muted #9c9c9c
  • Primary button: ink fill, white mono-caps label, pill; hover #5200ff
  • Links/focus/active: Ultraviolet #5200ff; text-link hover #3860be
  • Highlight badge: Mint #3cffd0 fill + ink text
  • Errors: #dc2626 border + message
  • Labels: JetBrains Mono 11–12px 600 UPPERCASE, 1.2–1.5px tracking
  • Headings: Space Grotesk 600, -0.02em; Wordmark only: Anton caps

Example prompt: "A settings card on paper #fafaf9: white 16px-radius card with a 1px #e6e6e2 border, a JetBrains Mono 11px UPPERCASE 1.2px-tracked kicker in #6f6f6f, a 18px/600 Space Grotesk title in #131313, body 14px #6f6f6f, and a solid-ink pill button whose label is mono 12px UPPERCASE — hover fills ultraviolet #5200ff. No shadows."