Buttons
Two tiers. Inline buttons carry ordinary actions inside forms and cards; pill CTAs carry the one or two calls to action that anchor a whole page. Knowing which tier a control belongs to is most of the decision.
The two tiers
Inline buttons
The default control: an 8-pixel-radius button for actions inside forms, cards and prose. Solid green for the primary action, outlined green for the secondary. One primary per group.
<button class="btn btn-primary">…</button>
<button class="btn btn-outline">…</button>Pill CTAs
Taller 48-pixel pills for the page-level calls to action — the ones a visitor should see from across the room, like “Download CV” or “Book a call”. Solid and outline, same green pair.
<div class="hero-ctas">
<a class="hero-cta hero-cta-solid">…</a>
<a class="hero-cta hero-cta-outline">…</a>
</div>States
Every state, rendered. Hover deepens the green; focus draws the shared 2-pixel green ring; a disabled control drops to a low opacity without changing hue, so it still reads as the same control. The hover and focus columns show those states applied, since a static page cannot hold a cursor over itself.
Most buttons on the site are links, so a true disabled state is rare; the series arrows are the live example of this convention.
Content
Labels are a verb and a noun, in sentence case, on one line. Say what happens, from the reader's side, without “my” or “your”.
Icon buttons
Some buttons are a glyph, not a word: the round social circles on the hero, the theme toggle, the reading bar’s controls. The glyph stays at 15 to 20 pixels while the circle provides the hit area, and colour follows the text rules — muted at rest, green on hover. Below, the real components.
When to use
Do
Don’t
Do
Don’t
Do
Don’t
Where it lives
Inline: .btn with .btn-primary or .btn-outline. Pills: .hero-cta with .hero-cta-solid or .hero-cta-outline, grouped in .hero-ctas.