The colors, type, spacing and components behind this site. Everything on this page is rendered with the real styles and real content, so it can't drift from what ships.
Link and button text on white uses --accent-ink (contrast 5.4:1). --accent is for large or decorative use. Greys are tinted toward brick on purpose: there is no neutral grey in the palette.
Literata
A serif made for long reading on screens. Headlines, body text, quotes.
Work Sans
Navigation, buttons, tags, dates, card titles.
JetBrains Mono
Eyebrows, dates in lists, code. Ligatures are off in code so symbols read literally.
| Token | Value | Used for |
|---|---|---|
--w-page | 58rem | Every page, including the article list |
--w-article | 46rem | A single article |
--measure | 66ch | Running text in articles and shorts |
--sw | 19rem | Desktop sidebar. Under 1000px it becomes a full-screen drawer. |
| Gutter | 1.25rem on phones, 3rem on desktop | Space between the screen edge and the content |
| Radius | 12px images, 16 to 22px cards, 999px buttons, tags and stamps | Soft corners, never sharp |
| Breakpoint | 1000px | Sidebar appears and the home hero becomes two columns |
I build for the web, and explain how it works.
The sticker sits over the lower left of the portrait, never over the face, and centers under the portrait on phones. The hand waves twice.
Simon Somlaidata-newsletter opens it. Without JavaScript it is a plain link to Substack.I had the pleasure of working with Simon during his time at Relai, where he made a strong impact in just 7 months. From day one, he onboarded quickly, asked the right questions, and immediately took ownership of key components in our web app most notably the wallet signing flow, which is critical to our product.
Despite the short timeframe, Simon proved to be a reliable and thoughtful developer. He worked autonomously, delivered high-quality code, and always kept the user and security in mind.
I appreciated his calm, focused approach and his ability to integrate smoothly into a fast-moving team. Any team would be lucky to have him.
Adem BilicanCTO @ RelaiThe first card on a grid takes the slab color.
Browse →WatchEverything else sits on the soft surface color.
See more →I write and teach about technology, finance and privacy.
Subscribe →Body text is Literata at 18px with a line height of 1.72. A paragraph keeps to about sixty-six characters per line, which is where the eye tracks best, and links are underlined in Brick ink.
Headings switch to Work Sans so they read as signposts, not as part of the text.
Quotes get a Brick rule and an italic voice.
Inline code sits on a soft brick chip. Highlights use a pale yellow.
| Element | Behavior |
|---|---|
| Tables | Scroll inside their own box |
| Code | Scrolls sideways, never wraps |
| Images | Open a lightbox on click |
Highlighted with Shiki's css-variables theme, so the colors come from the tokens above and sit next to the serif and sans text. JetBrains Mono at 0.86rem, line height 1.75, ligatures off.
function reading(settings) {
// 66 characters per line
return settings.measure === '66ch';
}Brand marks (YouTube, Substack, GitHub, LinkedIn, Medium, RSS) are filled; interface icons are 1.7px line icons. Stack Overflow was dropped from the set.
Your face, cropped to a circle for the favicon and Android, and on the slab color for iOS.data-newsletter open a light modal (white panel, brick button) with the subscribe form. Esc, the close button or a click outside closes it. /#newsletter opens it too.--ease). Start-here cards lift, their icon tile turns brick red and moves (page turns, play pulses, case bobs, wrench turns) and the arrow slides. The waving hand plays twice. All of it stops when the reader asks for reduced motion.