Styleguide
The homepage’s design language: its tokens and modules, every state drawn without a pointer. Values are read from the sources.
Language
| Laws we keep (Krehel) | Expression that is ours |
|---|---|
| One text size; hierarchy from weight and grey | People and agents: an italic for the personal, index.md for agents |
| Concentric radii: 12, 16, 20 | One sheet per surface: no bezel, no pill |
| Shadows over borders: a 1 px ring and a soft drop | Geist Mono for every piece of metadata |
| Optical alignment: icons on the x-height | One hue, the colour of the day: the selection and the mark only |
| Interactions in 150 ms or less, interruptible; 0.96 on press | The name turns into the address |
| Reduced motion, light only, the budgets | One idea per component; nothing without a job |
Colour
The roles, light and dark (dark is dormant), on the background.
- background #fcfcfc, #1111111.00 : 1
- foreground #202020, #ececec15.88 : 1
- muted-foreground #6b6b6b, #8686865.19 : 1
- surface #ffffff, #1e1e1e1.02 : 1
- surface-hover #f3f3f3, #1818181.08 : 1
- key-border #e6e6e6, #2c2c2c1.21 : 1
- underline #a8a8a8, #5757572.31 : 1
- underline-rest #d4d4d4, #3a3a3a1.44 : 1
- primary #202020, #ececec15.88 : 1
- primary-foreground #fcfcfc, #1111111.00 : 1
- primary-hover #363636, #d4d4d411.77 : 1
- ring #202020, #ececec15.88 : 1
The colour of the day, 2026-11-15 (src/lib/day-color.ts).
- day #87b1fe: Byterunner’s hue, unchanged
- day-tint #e6efff: selection; text on it 14.08 : 1
- day-mark #587fc8: the mark before the name; on the background 3.87 : 1
Type
- Text, 17 px / 1.625, 400: I design and build software.
- Links and row titles, 450
- The name and headings, 500
- Meta, Geist Mono 14 px: , the key caps; the handicaps at the text size
- Accent, Libre Baskerville Italic: the personal and the photographic, as in mountains and architecture
Italic
The accent in the intro at the real size, each face scaled to Inter’s x-height: Libre Baskerville, which the homepage keeps, then Newsreader at three heavier weights.
I design and build software. I run a small studio called Stratt Labs, make Letkivo for disc golfers and photograph mountains and architecture, mostly in Central Europe. The photographs are on @tiborsedenkaphoto, and I’m @tsdnk.
I design and build software. I run a small studio called Stratt Labs, make Letkivo for disc golfers and photograph mountains and architecture, mostly in Central Europe. The photographs are on @tiborsedenkaphoto, and I’m @tsdnk.
I design and build software. I run a small studio called Stratt Labs, make Letkivo for disc golfers and photograph mountains and architecture, mostly in Central Europe. The photographs are on @tiborsedenkaphoto, and I’m @tsdnk.
I design and build software. I run a small studio called Stratt Labs, make Letkivo for disc golfers and photograph mountains and architecture, mostly in Central Europe. The photographs are on @tiborsedenkaphoto, and I’m @tsdnk.
Surfaces and radii
One sheet: a surface, its 1 px ring and a soft drop, nothing nested. Concentric radii: each layer out adds 8 px of height and 4 px of radius.
The 20 px step has no surface since the bezel was retired: only the focus ring round the field lands on it (16 + 2 + 2). The row’s 16 and the header shortcut’s 10 (its cap’s 6 + 4) are drawn below.
Spacing
- Page, sections, footer 64 / 128 px
- Name to intro 16 px
- Heading to content 12 px
- Grey line to content 20 px
- Between rows, row inset 8 px
- A row’s name to its address, at least 16 px
Motion
- Interaction: 150 ms, ease-out, colour and background only; 0.96 while pressed.
- The name morph, the only entrance: once per session, 600 ms after the fonts, and on hover; 440 ms there, the shared letters sliding into place (src/scripts/name-morph.ts).
- Reduced motion: nothing on load; on hover the two strings cross-fade, opacity only, within 150 ms.
Modules
Text link, strong (the intro)
src/components/TextLink.astro
Projects (v23): a row with a link, then one without, whose mark is not drawn yet
- rest
- Letkivo“Scan your bag. Trade your discs.”
- HandveyA Mac app that turns “paste this into your agent” into a hand-off.
- hover
- Letkivo“Scan your bag. Trade your discs.”
- HandveyA Mac app that turns “paste this into your agent” into a hand-off.
- press
- Letkivo“Scan your bag. Trade your discs.”
- HandveyA Mac app that turns “paste this into your agent” into a hand-off.
- focus
- Letkivo“Scan your bag. Trade your discs.”
- HandveyA Mac app that turns “paste this into your agent” into a hand-off.
src/components/Projects.astro, ProjectRow.astro, .project-pill
Disc golf
At the column’s width.
| Course | Handicap |
|---|---|
| DiscGolfPark Frýdek-Místek , | −2 |
| Horní Datyně – Vratimov Discgolf , | −2 |
In 288 px: the layout takes its own line.
| Course | Handicap |
|---|---|
| DiscGolfPark Frýdek-Místek , | −2 |
src/components/DiscGolf.astro
Section heading
Every heading on this page: Colour, Type, Radii and the rest.
src/components/Section.astro
Contact field, chosen: one sheet, Send inside
src/components/ComposeField.astro, ui/input.tsx, ui/button.tsx
Contact field, alternative: two sheets (not on the page)
The same, send="apart": both sheets 56 px and 16 px, 8 px apart.
Button
src/components/ui/button.tsx; in the field, ComposeField.astro sets its 112 px floor
Keys
src/components/Keys.astro
Margin notes (v23): beside the header in the right margin, from 1280 px
After Shaun Inman’s The Heap (2006): what the dot is, then the day the site last changed, from git. The first sits on the name’s baseline, 32 px past the column; narrower, or with a larger text size, they are hidden or clipped. home.md’s marginNotes turns both off (now on).
The dot is the colour of the day
Last updated on 15 November 2026
src/components/Home.astro, .margin-notes, src/lib/updated.ts
Header shortcut: Contact, C
src/components/HeaderAction.astro, src/scripts/shortcuts.ts (the key runs on the homepage only)