One quiet system.
Type, rhythm, surfaces, and movement — the same elements used throughout the site.
System contract · v1
One shared foundation for the Astro product. These are the current implementation rules; visual studies are kept separately.
Change a semantic token or shared component first. Page-specific spacing, timing and hover exceptions require a named role and a documented reason.
Semantic spacing
Live values come from the current viewport. Related copy stays close; separate groups have more space. The 4 px scale supplies these roles, rather than arbitrary page gaps.
| Role | Use | Current value |
|---|---|---|
--section-gap | Between sections64 / 48 px on mobile | |
--intro-gap | Introduction → content32 / 24 px on mobile | |
--block-gap | Related blocks24 px | |
--heading-gap | Section heading → content16 px | |
--paragraph-gap | Paragraph → paragraph in long-form reading16 px | |
--summary-gap | Grouped introduction paragraphs and supporting copy8 px | |
--row-padding | Space on each side of a list divider16 px; first row has no top padding | |
--item-gap | Miniature → content12 px | |
--copy-gap | Title → subtitle or description4 px | |
--meta-gap | Description → metadata8 px | |
--nav-section-gap | Primary navigation → Collection24 px | |
--nav-footer-gap | Developer links → utility icons → main action16 px | |
--nav-category-height | Compact Collection row32 px; 44 px on touch | |
--nav-category-icon | Neutral Collection icon16 px; primary icons remain 18 px |
Text composition
A text role explains why a group exists, not how many elements it contains. A narrative can be one paragraph or several; splitting or merging that copy must not change the surrounding rhythm.
The group owns its internal flow. The composition owns the larger distance between roles. HTML still describes the document; these roles describe the product’s visual semantics.
| Role | Job | Typical contents | Flow |
|---|---|---|---|
orientation | Names the subject and gives just enough context. | Page title + description or item title + summary. | --flow-orientation |
identity | Establishes who or what is speaking. | Name + pronunciation, role or descriptor. | --flow-identity |
narrative | Carries one continuous thought. | One paragraph or several; the editorial split does not change the role. | --flow-narrative |
action | Turns reading into a clear next step. | Invitation, instruction or contact sentence. | --flow-action |
metadata | Qualifies content without entering its main voice. | Date, source, status, count or provenance. | --flow-metadata |
Alexey
Designer, builder, thinker, publisher
I design systems and build products with agents.
This remains one narrative group even when the thought needs another paragraph.
Live sequence: identity → narrative → action. Internal gaps stay close; the composition separates changes of purpose.
Typography roles
Page title: a place to return to.
--type-title · Source Serif 4 · 22/30 · 500Section heading: a place to return to.
--type-heading · Source Serif 4 · 18/26 · 500Content title: a place to return to.
--type-item · Source Serif 4 · 16/24 · 500Body and introduction: a place to return to.
--type-body · Geist · 16/26 · 400Interface and list description: a place to return to.
--type-ui · Geist · 14/22 · 400Supporting metadata: a place to return to.
--type-caption · Geist · 12/20 · 400Italic is used for pronunciation and Greek origin. Body emphasis keeps the reading weight and changes ink contrast. Long text wraps naturally; only explicitly authored editorial line breaks remain on desktop.
Optical craft
Mathematical equality establishes the box. Perceptual equality finishes the component. These corrections belong to a format or glyph and never change layout geometry.
| Area | Contract | Application |
|---|---|---|
| Icons | Hugeicons Stroke Rounded uses a 2-unit stroke. Primary navigation adds pastel fills with deeper matching outlines; Collection keeps smaller neutral outline glyphs. | Destination colors are stable in both themes and never indicate selection. Shared icon geometry stays constant on hover. Brand marks and miniatures remain authored illustrations. |
| Numbers | Prose uses proportional figures. Live values use tabular figures; numeric columns also align right. | Counters, prices, dates in aligned lists and changing metrics must not jump. |
| Media edges | Photographs and screenshots receive a faint 1 px inset outline. Transparent marks remain unframed. | The edge is drawn over the image and follows both light and dark ink. |
| Nested radii | Outer radius equals inner radius plus inset plus border width. Inset surfaces derive their radius from that relationship; explicit pill actions use radius-pill. | Cards and sidebars consume the same frame tokens. Edge controls keep equal side and bottom insets, while a pill is treated as an intentional independent silhouette. |
| Punctuation | Long-form text may hang opening and closing punctuation outside the measure. | Use native hanging punctuation as progressive enhancement; never fake it with authored spaces. |
Surface and color roles
--canvas--navigation--surface--overlayCanvas is continuous and carries one static tiled paper texture. Its grain and fibres use theme-specific opacity and blend tokens, so the material remains faintly perceptible in both themes and scrolls with the document. Sidebars sit above it with shell-inset, panel-radius and panel-border. Light mode adds the shared panel-shadow; dark mode relies on border and tonal layering without a shadow. The panel reuses the nested content-card frame: white paper above a quieter gray sheet. Outer frame radius is derived from inner radius, inset and border width. Modules inside that panel use one border and one surface, never another nested frame.
Behavior and states
| Family | Rule | Response |
|---|---|---|
| Content width | All product pages, including Curations, share the 640 px reading width. Sidebars reserve their lanes and move the whole content column. | A correction of up to 24 px draws the column toward the viewport center, increasing to 32 px leftward for expanded desktop navigation. The 896 px wide measure is reserved for explicit design specimens. |
| Content lists | Every row ends with a divider, including the last. All first rows start directly after heading-gap. | Title underline and miniature contrast respond instantly to hover and keyboard focus; no translation. |
| Reading links | Links in prose stay underlined; item titles gain an underline on interaction. | The underline changes contrast; the text does not move. |
| Disclosure | Summary remains a native button or details summary. Opening keeps focus on the trigger. | 260 ms, shared curve, reverses from the current frame; reduced motion completes immediately. |
| Navigation | Primary rows use 18 px colored filled icons and 40 px height. Collection uses neutral 16 px icons, 13/20 text and 32 px rows. Search, Appearance and Language remain direct icons. | Navigation groups scroll between the fixed header and bottom tools. Bottom and side insets are 12 px in both widths; compact dividers stay centered. Mobile keeps 44 px targets. Developer links stay local-only. |
| Navigation states | The current page uses a quiet 32 px tab inside the unchanged 40 px target. It is a three-sided continuation of the white front card: the same surface and subtle top, bottom and left edge, with no right edge. The left end uses an 8 px outer radius; two matching external junction radii turn the front card outline into the tab’s top and bottom edges. Straight and curved segments share the same border coordinates. | Hover changes ink; keyboard focus adds an outline. The collapse control shares the open bookmark shape at 24 px visual height. It aligns with the visible eyes, then moves below the smaller mark in the rail, and remains available at every desktop width. The compact action is circular. The footer keeps the year and version quiet and close to the action. |
| Context panel | Statistics and home project previews share one right-side geometry, surface and motion role. The panel itself is the nested frame; modules inside it are single-layer cards. | Locked pattern: all right panels use context-panel.css for the nested frame, fixed heading with icon, edge-bookmark close button, full-width divider, independent scrolling and motion. Feature styles own only content. At 1024 px the panel reserves a right lane; below that it is a full-screen modal. Escape closes it and focus returns to the trigger. The design check enforces shared shell ownership. |
| Forms | A visible label or accessible name; input, pending, success and error use the same status area. | The feedback helper is tucked under the send side at rest and slides left at focus or while editing. Sending blocks repeat submission. Errors retain text. Success is shown only after a server response. |
| Buttons | One radius and height family. Neutral controls use control-hover-surface; primary actions use action-fill and share the printed texture. | Hover is an instant color/surface change with no movement. Focus is explicit; only primary actions receive a small press scale. Disabled controls do not react. |
| Field surfaces | Input groups use a permanent nested sheet. Inside an already nested sidebar, a panel-card stays single-layer and uses its existing edge for editing feedback. | 180 ms soft-gray edge feedback with no black ring or sheet size change. Invalid fields use the danger edge. Press feedback belongs to the submit button; navigation keeps its own focus outline. |
| Languages | EN, DE, ES, FR and PT translate the interface and introductory site copy. Journal and Knowledge keep their English originals. | The language selector preserves the page and filters. English content carries its own lang attribute; changing the interface never generates a translation. |
| Touch and motion | Touch targets at least 44 px. Content remains available without hover. | OS reduced-motion wins; no looping decoration, scroll reveals, animated reading text or smooth-scroll takeover. |
| Content safety | Empty, loading and error states are explicit. Guides expose their outlines without implying a purchase or download. | No fabricated downloads, purchases, counts, testimonials or loading placeholders presented as content. |
Buttons above are inert specimens. Use Tab to inspect focus and the theme control to inspect both surfaces.
Motion roles
| Role | Value | Use |
|---|---|---|
hover | 0 ms | Pointer hover and link contrast |
feedback | 120 ms | Press feedback and transient visibility |
state | 180 ms | Local state and overlay fade |
enter | 240 ms | New document or material |
reveal | 260 ms | All list, guide and FAQ disclosures |
layout | 260 ms | Sidebar width and contextual panel arrival |
theme | 1200 ms | Full theme hatch sequence |
Frequency sets the animation budget. Hover is immediate and icons remain still; state is communicated by ink, surface or underline. The current page uses a steady surface fill. Repeated disclosures and layout changes may move because their geometry needs explanation. CSS handles simple states; the Web Animations API handles measured height. GSAP is reserved for the dedicated guide-landing choreography.
Typography
Source Serif 4 · titles and content accents
Designer, builder, thinker, publisher
Geist · reading and interface · 16 / 26
This is where I share what I’m making, what I’m learning, and the things that catch my attention.
A little room for curiosity. A place to read, follow a connection, and return to an idea.
Self-hosted variable fonts with roman, italic, and bold styles. SIL Open Font License.
Geist · German reading sample
Ein Ort für Gedanken, eigene Projekte und Dinge, die meine Aufmerksamkeit wecken.
Text emphasis
Actual introduction · body, strong, inline link
I design systems, build products with agents, and publish what I learn and think.
Surfaces
Content miniatures
Permanent format illustrations. Shared geometry, paper edges, and muted gray lines; no loading animation or substitute logos.
Statistics · right sidebar
A place for passing visitors and the notes they leave.
Sample only: fictional notes and visit counts. Try both periods and leave a test note; nothing is sent.
Publications · reading
A little knowledge
All guidesPublications · archive
Motion
This is where I share what I’m making, what I’m learning, and the things that catch my attention.
Questions & answers
The same typography, spacing, and states carry through the site. A change to the system is reflected in every page.
The reading column remains comfortable when the library opens. On smaller screens, the index is available on demand.
Message composer
Form states
Sample only. No email is sent and no subscription is created.