Card with corner markers
The default card — translucent white on backdrop blur, pixel-corner markers, and subtle SVG noise. Used for hero info, project detail, and standard page bodies.
Finding signal in the noise.
The Labyrica visual language is grayscale, light-dominant, and built from precise primitives. This page is the live reference — every token and component below uses the styles shipped with the site.
Pastable brief for AI tools. Drop into
Claude, ChatGPT, or Cursor to generate Labyrica-matched UI.
01
Principles
Five rules. If a decision conflicts with one, the rule wins. Memorize these and most design questions answer themselves.
01
Grayscale only
Black, white, and neutral grays. Status colors are reserved for system state — never for decoration.
02
Light is the brand
A soft #F2F2F2 page with white cards. Inverted from the typical dark tech aesthetic.
03
Sharp, never soft
Border radius caps at 4px. No pills, no balloon buttons, no gentle blobs.
04
One primary action
A single black-on-white CTA per major view. Anything else is secondary.
05
Texture, not decoration
Pixel artifacts — noise, dot grids, dithered lines — provide quiet tech personality without ornament.
06
Readability first
Body text sits at black/65 minimum. Every text/background pair clears WCAG AA contrast.
Never: accent colors, dark mode, large rounded corners, pill buttons, generic AI gradients, drop shadows for elevation.
02
Color
Every surface, ink, and hairline is a single CSS variable defined once
on :root. No per-component overrides — change a token, the
whole site moves with it.
Surfaces
Ink
Hairlines
Status (system state only)
Live
Beta
In Development
Status colors are the only color in the system. They mark project state — not anything decorative.
03
Typography
One sans for everything, one mono for technical signal. Headings are semibold with tight letter-spacing; body sits at default tracking with relaxed leading.
Type scale
display56 / 600 / -0.025em
The display heading
h140 / 600 / -0.02em
A page heading
h228 / 600 / -0.015em
A section heading
h318 / 600 / -0.005em
A sub-section heading
lede20 / 300 / 1.6 lh
Lighter, slightly larger intro copy used for taglines and section opens.
body17 / 400 / 1.7 lh
Default reading text. Comfortable for long-form prose with generous leading and a max width near 56 characters.
small14 / 400 / 1.6 lh
Captions, helper text, secondary metadata.
label11 / 500 / 0.12em
UPPERCASE SECTION LABEL
monoJetBrains Mono
--ink: #0A0A0A; padding: 0.75rem 1rem;
04
Geometry
Spacing follows a 4-unit ladder. Radius caps at 4px and is reserved for buttons and small chips — surfaces stay sharp.
Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
Radius
0px
2px
3px
4px
Container widths
| Token | Value | Use |
|---|---|---|
| --max | 1440px | Default page container |
| --max-narrow | 1000px | Reading-focused pages (about, articles) |
05
Buttons
One primary, one secondary. The arrow nudges right on hover — a quiet affordance, not an animation.
.btn .btn-primary · .btn .btn-secondary · black on hover-invert
06
Labels & Eyebrows
Small typographic signals that anchor a section without competing with the heading.
Boxed eyebrow
Plain eyebrow
Feature tag
.eyebrow · .eyebrow--plain · .feature-tag
07
Cards
Three card densities. All share the same hairline border and translucent surface — the only difference is opacity and padding.
Solid surface variant
Use when content needs full opacity over the network background — forms, dense data, anything where translucency would hurt readability.
Soft card
Compact 60%-white panel for inline notes and secondary content.
.card · .card.card--white · .card.card--soft · combine with .noise and .pixel-corners
08
Status badges
The one place color enters the system — and only to communicate the current state of a project or service.
Live
Beta
In Development
.status-badge .status-live · .status-beta · .status-development
09
Highlight stats
Mono numerals on a dot-grid surface. Used for headline metrics on project detail pages.
8+AI
Modules
100%
Self-hosted
12ms
P50 response
0
Trackers
.highlights[data-count="4"] with .highlight children
10
Feature cards
Three-column grid for capability lists. Each card has a small tag, bold title, and one-line description.
Privacy
No third parties
Everything runs on infrastructure you control. No data leaves your perimeter.
Performance
Edge-cached HTML
Last-modified aware, sub-50ms TTFB on static pages, zero JavaScript required.
Ownership
SQLite + flat files
Your content lives in a single file you can copy, version, and back up.
.features-grid with .feature > .feature-tag, .feature-title, .feature-desc
11
Form inputs
White surface, hairline border, and a focus ring that swaps the border to ink. No outlines on the field itself.
.form-grid wraps label + input | textarea pairs
12
Pixel textures
Four utility classes that add quiet tech personality. Layer them on cards and panels — never on body text.
.noise
.dot-grid
.pixel-corners
.dither-line
SVG fractal noise · 12px dot grid · L-shaped corner markers · 2/2 dashed separator
13
Motion & accessibility
Motion is a confirmation, not entertainment. Everything is short, specific, and disabled when the user prefers reduced motion.
200msHover state changes
300msSurface & border transitions
400msImage scale, gallery zoom
500msSection reveals
Focus
2px solid rgba(10,10,10,0.6) · offset 2px
Reduced motion
When
prefers-reduced-motion: reduce is set, all animations collapse to 0.01ms and the Three.js network background is hidden entirely.
Contrast floor
Body copy never sits below black/65 on the page background.
All token pairings clear WCAG AA (4.5:1) for body text and AA Large
(3:1) for headings & labels.