Bryl Minimal Design

bryl-minimal design language

A monochrome, typography-first aesthetic: true black on white, no accent color, texture from halftone dots instead of color, hierarchy from font choice instead of size extremes, and restrained but deliberate motion. It should feel like a well-set technical zine — quiet, precise, slightly playful.

This spec is technology-agnostic. Every rule is given as values and intent; implement it with whatever the project already uses (vanilla CSS, Tailwind, CSS-in-JS, a native toolkit's web view — anything). Never bolt on a new framework just to satisfy this skill.

Philosophy — read this first

Three decisions drive everything else:

1. No accent color. Emphasis comes from inversion (black chip on white page, white text in black pill), from typography (switching to the pixel or mono font), and from texture (halftone dots). If you feel the urge to reach for blue or green, invert instead.
2. Type does the talking. Four font roles with sharply different personalities carry the hierarchy. Sizes stay modest; contrast comes from which font is used, its casing, and its tracking.
3. Whitespace is structure. Content lives in a narrow measure with generous vertical rhythm. Sections are separated by hairline rules and numbered labels, not by boxes or background tints.

Color

The palette is strictly monochrome: a background, an ink, and a nine-step gray ramp between them. Both themes use the same semantic roles; dark mode is a re-mapping, not a redesign.

Usage rules:

• Body text is ink; secondary text is gray 500; tertiary/meta text is gray 400. Never go lighter than gray 400 for anything that must be read.
• Borders and dividers are gray 200 at one-pixel weight. Dividers are hairlines (1px lines), used generously to separate sections and grid cells.
• Filled surfaces are rare. When a card needs a fill, use gray 50 or a barely-there gradient from gray 50 down to the background.
• The one "loud" element allowed per view is an inverted chip: ink background, background-colored text (e.g. a featured badge). Use sparingly — it reads as the highest emphasis on the page.
• Text selection inverts: ink background, background-colored text.

Theming mechanics (adapt to the stack): store colors as semantic tokens (background, ink, gray-50…gray-950) that are swapped wholesale when a dark class or attribute is set on the document root, honoring three user choices: light, dark, and system (following the OS preference). If the platform supports storing color tokens as raw RGB channels so alpha can be applied at point of use, do that. Theme changes crossfade over half a second on background, text, and border colors. Persist the choice; default to system.

Typography

Four fonts, four jobs. All are free and openly licensed:

Geist and Geist Mono load from Google Fonts; Source Serif 4 too. Geist Pixel is Vercel's pixel variant (available via its GitHub releases / CDN as a woff2). Always load fonts with swap behavior so text renders immediately. If Geist Pixel is unavailable in some environment, fall back to Geist Mono in uppercase — never substitute a decorative font.

The scale is compact — base UI text is 15px, not 16:

• Page title (pixel font): about 3rem, line-height 1, lowercase, usually a single word ("blog", "projects").
• Article headings (serif or sans, weight 600, letter-spacing −0.02em): h1 ≈ 1.6rem, h2 ≈ 1.3rem, h3 ≈ 1.1rem.
• Long-form body: 1.0625rem (17px) serif with a roomy 1.75 line-height.
• UI body: 15px sans; small text 13px.
• Micro-labels: 9–11px mono, UPPERCASE, letter-spacing about +1px (wide tracking), gray 400/500. This is the aesthetic's signature register — timestamps, tags, section markers, button captions all live here.

Section headers follow a numbered, em-dashed convention set in the display font at small size and gray 400: "01 — blog", "02 — projects". Page titles and most standalone labels are lowercase; only mono micro-labels are uppercase. Links are underlined with the underline drawn at 25% opacity of the text color, offset ~2px below baseline, rising to full opacity on hover. External links get a trailing "↗".

Layout & spacing

• Content column: narrow — 42rem (672px) max for reading pages; up to 56rem (896px) only when a page genuinely needs multi-column grids.
• Navigation is a fixed left sidebar, 14rem wide, appearing at ≥1024px viewports; content shifts right to clear it. Below that, a sticky top bar (hairline bottom border, ~90%-opaque background with background blur) with a full-screen overlay menu.
• Horizontal page padding: 1rem on mobile, 1.5rem on desktop. Card padding: 1.25rem. Vertical rhythm between sections: large — 3.5rem block spacing. Small gaps inside components: 0.75rem; between grid cards: 0.75–1.5rem.
• Grids are modest: 2 columns on small screens, 3 at ≥1024px. Stat rows divide cells with hairline rules (both axes) instead of gaps — the dividers are the design.
• Sidebar groups separate with 1px gray-200 rules; the active nav item is ink-colored with a small leading arrow, inactive items are gray and darken to ink on hover.