luciekrulichova.com / system

The systemunderneath.

Sophisticated intelligence, with elegance. Every value on this site comes from the tokens below, and every component is named. Press I anywhere to see them in place.

Wordmark

The mark carries the character.

Monoline heavyOne stroke weight, no contrast.
Squared roundsBowls are rectangles with soft inner corners.
Flat terminalsEvery stroke ends square.
CompactNarrow, tall letters, tight counters.
The sparkThe one expressive detail. The type around it stays quiet, so the mark keeps the personality.

Typography directions

Three directions.

A — Extended Grotesk

Chosen

Product & Design Leader

+23% · 2,500+ · $125K

I believe in a universe where products can be both beautiful & data informed to create impact.

Mona Sans Expanded · Mona Sans · Geist Mono

Wide, light and sharp: authority from proportion and spacing, not weight. The same family reads beautifully at text size.

B — Swiss Neutral

Product & Design Leader

+23% · 2,500+ · $125K

I believe in a universe where products can be both beautiful & data informed to create impact.

Geist · Geist Mono

Precise and technical, very clean. Without a width axis the uppercase stays compact and the luxury comes only from spacing, so it reads closer to a product UI than to editorial.

C — Refined Grotesk

Product & Design Leader

+23% · 2,500+ · $125K

I believe in a universe where products can be both beautiful & data informed to create impact.

Instrument Sans (width axis)

Elegant and slightly idiosyncratic; excellent in sentence case. At display size its details draw attention to themselves, which works against the restraint.

Type scale

Hierarchy.

Display XLProduct & designHero and major statementsMona Expanded 380 · wdth 118 · +.01em
Display LProduct & designSection and project titlesMona Expanded 380 · wdth 118
H1Product & designChapters, decisionsMona 420 · wdth 112
H2Product & designCard headlines, optionsMona 500 · sentence case
Body LShow the decision, not the deliverable.OpeningsMona 400 · 1.45
BodyShow the decision, not the deliverable.Long-form readingMona 420 · 1.6
LabelProduct & designUppercase metadata, buttons, navMona Expanded 500 · wdth 115 · +.14em
Tech labelProduct & designSystem annotation only. Trace amounts.Geist Mono 400 · +.06em

Colour

One accent.

#121215--inkCharcoal near-black. Text and the dark grounds.
#F4F3F1--paperSoft white ground.
#EAE9E6--paper-2Secondary ground, placeholders.
#9EA2AA--coolThe one cool grey support tone.
#B27A8B--accentMineral rose. Graphic accent on light.
#8A4B5E--accent-inkMuted raspberry. Rose as text on light (AA).
#D3A3B1--accent-on-inkCool blush. Rose on charcoal and in the hero’s system layer.

Grid, space, shape

Foundations.

Grid: 12 columns · gutter clamp(16, 2vw, 32) · margin clamp(16, 4vw, 72) · max 1680
Space: 4 · 8 · 12 · 16 · 24 · 32 · 48 · then fluid 56–80 · 72–128 · 96–192 (section rhythm)
Radius: Media 20 (14 on phones) · panels 14 · small 8 · controls pill
Border: 1px ink @ 14% · strong 32% · on ink: paper @ 16%
Images: Rounded + bordered frame · intrinsic size always set · AVIF/WebP · lazy below the fold
Breakpoints: S ≤ 720 · M ≤ 1100 · L ≤ 1600 · XL · plus container queries for components

Motion

Cause → effect.

Entry

Masked line rise · clip-path media reveal · once per element

IntersectionObserver → .is-in · 1100ms · ease-out

Hover

Monochrome becomes colour; nothing jumps

CSS · 900ms filter · 420ms elsewhere

Signature

The hero dissolve; the non-linear constellation

Canvas particles sampled from the photograph · SVG

Scroll

Diagrams activate node by node; metrics count once; the belief hairline fills

GSAP ScrollTrigger (scrub) · GSAP tween · rAF

Transition

Position in a case is always visible

Scroll-spy rail · 40% line

State change

Toggles morph content, never the frame

React state · aria-pressed / aria-checked

Reduced motion

Everything visible, nothing moves

html[data-motion=off] · no counters · no pulse

Components

Inventory.

Nav
Hero
DecisionField
Belief
Profile
WorkCard
WorkIndex
Principle
Constellation
DesignCodeComparison
RoomMap
EvidenceList
MetricGrid
PathList
Testimonial
LabCard
EvidenceStudy
Contact
Footer
SectionHead
Media
CaseHero
ChapterRail
ContextGrid
RoleMatrix
DecisionModule
SystemDiagram
AnnotatedScreen
Alignment
TechNote
OutcomeGrid
NextCase
InspectToggle