System
A living specimen of the design system for victormaragioglio.com. Every element on this page is built from the tokens, primitives and components it documents.
Typography
One grotesk family; one secondary mono for technical contexts. Each role fixes size, line-height, tracking and weight. Metrics are measured live at this viewport.
- text-display-xl
Once per page at most. Name, hero title, a single statement.
Victor Maragioglio
- text-display-lg
Project titles in heroes, Next project, page titles.
Type, grid, space, image
- text-heading-lg
Editorial statements, major section headings.
Frontend Developer working across interfaces, design systems and visual experimentation.
- text-heading-md
Section headings, index row titles.
The interface is quieter than the work it contains.
- text-heading-sm
Small headings in dense layouts; group titles.
Metadata is precise, almost clinical.
- text-body-lg
Lede paragraphs, introductions.
This page is a living specimen. Every element on it is built from the tokens, primitives and components it documents.
- text-body-md
Default body copy.
Sizes are tuned optically rather than derived from a modular ratio. Fluid roles interpolate between a 375px and a 1600px viewport and clamp at both ends, so display type reaches its full size on large screens while body copy barely moves. Line length is controlled by grid spans and the measure token, not by font size.
- text-body-sm
Secondary copy, navigation, metadata values.
Secondary copy, navigation and metadata values. Set at 14px with generous line height.
- text-meta
Metadata labels and small data.
- text-caption
Media captions.
Fig. 1 Captions are factual: what the image shows, at which width, in which state.
- text-technical
Mono only: code, token names, technical data.
--text-display-xl: clamp(3rem, 1.786rem + 5.714vw, 7.5rem)
Weights
Two only. Regular carries everything, including display. Medium is for small headings and rare emphasis.
Regular 400
Medium 500
Numerals
Tabular figures for indices, years and data; proportional in running text.
01 11 2022—2024
01 11 2022—2024
Font tokens
Components reference tokens, never a family. Swap the face in lib/fonts.ts.
Color
Paper, ink, neutrals and one signal. The signal marks state only: focus, current location, live status. Contrast is computed against surface-primary.
- surface-primary
- surface-secondary
- surface-inverse
- text-primary ·
- text-secondary ·
- text-muted ·
- text-inverse ·
- border-primary ·
- border-subtle ·
- accent-signal ·
Inverse scope
The same semantic tokens, swapped for a region.
Components need no changes. Use for one or two regions per page at most. Inline link.
Spacing
A 4px-based scale; keys are multiples of 4px. Only these steps exist. Semantic tokens change per breakpoint, so components don't have to.
Scale
- 00px
- px1px
- 14px
- 28px
- 312px
- 416px
- 624px
- 832px
- 1248px
- 1664px
- 2496px
- 32128px
- 40160px
- 48192px
Semantic
Values at this viewport.
- page-inline Outer page margin.
- grid-gutter Column gutter.
- section-sm Tight section rhythm.
- section-md Default section rhythm.
- section-lg Major divisions.
- section-xl Silence; around a statement.
- content Between blocks inside a section.
- meta Label to value inside a metadata item.
Grid
4 / 8 / 12 columns, fluid, inside the page margins. The grid is infrastructure: it becomes visible only through alignment. Drawn here, and nowhere else.
Composition conventions
Desktop columns. Asymmetry is the default: content starts on meaningful columns and leaves deliberate empty ones.
Layout primitives
Section, Container, Grid, GridItem, Stack, Cluster, Split, Bleed, TextBlock. Each solves one recurring problem. There is no Spacer, Card or Box.
Stack
Vertical flow with a token gap.
Cluster
Horizontal, wrapping, aligned to the first baseline.
Split
3:9 · 4:8 · 5:7. Stacked on mobile, aside first.
Bleed
A non-grid child pulled to the viewport edge. Inside a Grid, use GridItem bleed.
TextBlock
Long-form prose: measure, paragraph rhythm, inline links, lists.
The source of truth is three things that must always agree: the code tokens, the specification in docs/design-system.md, and this page. If one changes, the other two change in the same commit.
- Do not introduce a new color inside a page.
- Do not introduce arbitrary font sizes or spacing.
- Compose existing primitives before creating a component.
Metadata
Precise, almost clinical. A <dl>, never pills. Labels muted and sentence case; values plain. Mono is not the metadata font.
Entry
The example from the brief.
01
The Barn
2022 to 2024
Columns
ProjectMeta. Columns share the grid gutter, so three columns in this nine-column span sit on the page grid.
Inline
Formats
lib/format.ts — never hand-format.
StudyMeta
Specimen values describe this design system.
ExperimentMeta
Links and buttons
Hover discloses or confirms: underline, tone, or a 0.2em directional move. Every hover has a focus equivalent. Buttons are rare; if it goes somewhere, it is a link.
Link variants
Buttons
Symbols
Typographic symbols instead of icons. No emoji, no icon grids.
→ ↗ + −
Project index
An editorial catalogue, not cards — typographic, no imagery. Hover or focus a row: its title moves 0.1em and its arrow appears, its metadata steps up, sibling titles recede one step. Rows: complete, single year, ongoing, messy, minimal.
Media
Images are material: no frames, mockups, radius or shadow. Placement varies in scale. Captions are factual. Specimen plates stand in for project media.
Responsive crop
Portrait on mobile, cinema on desktop. Crops are decisions, not shrinkage.
Video
Ambient: muted, looping, with a pause control. Does not autoplay under reduced motion.
Rules
Square corners. Rules, not boxes. Primary rules start and end a structure; subtle rules separate items within it.
Primary
Subtle
Vertical
Rare: only to separate columns of data.
Motion
Controlled, precise, quiet. CSS for state changes; GSAP only where it gives real control, always through useMotion. Each track moves a block from the first column to the last.
- fast · 160mspower2.out
- standard · 380mspower2.out
- editorial · 900mspower3.out
- long · 1400mspower2.inOut
RuleReveal
A rule draws from its start edge when it enters the viewport. Motion that reinforces layout.
Reveal — fade
Below the fold only. Never per paragraph.
Reveal — mask
Unmasks top-down. For media.
Never
Bounce, elastic, springs. Fade-up on every element. Constant parallax. Pinning every section. Scale to 200%. Split-text reveals. Cursor followers. Magnetic buttons.
Reduced motion
Editorial grammar
Statement, case-study hero, credits, next project. Shown with specimen data; structure only, no invented content.
Frontend Developer working across interfaces, design systems and visual experimentation.
The Barn
Credits
Responsive behavior
Mobile is recomposed, not shrunk. Resize this window: the readout, grid, index and media change composition.
| Desktop (lg+) | Mobile (base) |
|---|---|
| Large type scale, grid tension | Type clamps; fewer large moments |
| Label beside content | Label above content |
| Empty columns, horizontal silence | Vertical rhythm carries the space |
| Index: number · title · year · discipline / type | Number + title, discipline, then year · type |
| Offset and asymmetric media | Full width or bled; crops may change ratio |
| Hover disclosure | Information visible without hover |
Accessibility
Part of the system, not a later pass. Press Tab: the skip link appears first, and every interactive element shows the signal focus outline.