The Solid Billa system
The shared language behind the blog — colour, type, spacing and components in one place. It exists to keep every page unmistakably Solid Billa: dark and calm, one bold yellow, a single clean type pairing, and a tight set of reusable tokens.
Principles
One accent, no exceptions
The yellow carries every bit of emphasis. If something needs to stand out, it goes yellow — never a new colour.
Two typefaces, one scale
Sora for headings, Inter for everything else, sized only from the scale below. No one-off font sizes in components.
Dark, calm, confident
Three slates for depth, generous space, soft body text. Let the cat and the yellow be the loud parts.
Tokens first
Reach for a token before a raw value. New value? Add it to the system here, do not scatter it.
A four-group palette
Surfaces for depth, two text levels, one accent, two line weights. That is the whole system — no stray hues.
Surfaces
Three dark slates, never more. Depth comes from these, not from new hues.
--color-bg #2a323f The page --color-surface #1e252f Header, cards, panels --color-surface-alt #232b37 Layered sections, inputs Text
Two levels do the work. Body copy is primary at 85% so long reads feel softer.
--color-text #f4f4f5 Headings + key copy --color-text-muted #9ca3af Meta, captions, muted --color-text-body 85% primary Long-form reading Accent — the one brand colour
The yellow does ALL the emphasis: links, focus, primary actions, highlights. There is no second accent.
--color-accent #fcd34d Links, focus, CTAs, highlights --color-accent-hover #f59e0b Hover + pressed --color-on-accent #1a1a1a Text on yellow Lines
--color-border 8% white Dividers, card edges --color-border-strong 15% white Inputs, emphasis Sora × Inter
Sora gives headlines a clean, confident geometry; Inter keeps body copy effortless to read. One scale, eight steps — pick from it, never around it.
Spacing & radius
A 4px-based spacing scale and three corner radii keep rhythm and shape consistent across the site.
Spacing
--space-1 4px --space-2 8px --space-3 12px --space-4 16px --space-6 24px --space-8 32px --space-12 48px --space-16 64px Radius
--radius-sm 2px --radius-md 3px --radius-lg 5px --radius-full pill Building blocks
The canonical pieces, built only from the tokens above.
One primary (yellow) per view. Secondary for the alternative, ghost for low-priority.
Icon sits inside the field; the focus ring is the accent. Mirrors the header search.
Inset background, strong border, accent on focus. Same recipe for both.
Native select, restyled with a custom chevron. Use for short option lists.
For instant on/off settings. On = accent track, knob slides right.
Multi-select / opt-in. Checked = accent box with a dark tick.
Exactly one from a set. Same colour language as the checkbox.
Topic labels — sharp, low-contrast, never the loudest thing on a card.
Tiny status markers. Accent for "new", muted/outline for neutral counts.
The one place we keep full roundness. Image, or initials as a fallback.
Reading progress, uploads. Accent fill on a faint track.
A few words of hint on hover / focus. Never essential information.
Locate the reader in deep pages. The current page is text, not a link.
Current page = accent. For long archives and tag lists.
Switch views in place. The active tab carries an accent underline.
Two only — neutral and accent. No red / green; the system has one colour.
What is The Solid Billa?
Is it free to read?
Built on native <details> — works without JavaScript. Use for FAQs and long lists.
Good type gets out of the way. It carries a reader from the first line to the last without friction. — The type review
Accent left-rule for pull-quotes inside posts. Keep them short and punchy.
A reusable post card
Surface + hairline border, sharp corners, image on top. The workhorse of the homepage.
| Token | Value | Use |
|---|---|---|
| --space-4 | 16px | Default gap |
| --radius-md | 3px | Buttons, inputs |
| --text-base | 1rem | Body copy |
Quiet rows, accent-free headers, hairline dividers. For specs and comparisons.
Blog formatting
Every element a post can use — headings, lists, quotes, code, images, tables, callouts — styled once here, ready to roll into the article prose.
This is a lead paragraph — a little larger and softer, it sets up the piece and pulls the reader in.
A section heading
Body copy in Inter at a comfortable measure and line-height. You can bold a phrase, emphasise another, drop an inline link in the brand yellow, or mark a bit of inline code — all without breaking the rhythm of the read.
- An unordered list with a sharp accent marker
- Each item kept tight and readable
- Best for non-sequential points
A sub-heading
- Ordered when sequence matters
- Numbers carry the accent colour
- Steps, rankings, recipes
A blockquote for a line worth pausing on — accent rule on the left, set in the heading face.
// fetch a post and its reading time
const post = await getEntry('posts', slug);
const minutes = readingTime(post.body);Inline snippets like npm run dev sit in the body, and you can press ⌘K to search.
| Tool | What I use it for |
|---|---|
| Figma | Design + prototyping |
| Claude | Building the site |
And a closing paragraph after the divider, wrapping the piece up.