Design System.

border

1.5px --line

Default outline; hover → --accent.

color

--ink-soft

Hover → --accent-ink.

radius

--radius-pill

Fully rounded pill.

Toggle filter. Active state is .is-on: solid --ink fill, white text, × symbol. Inactive: outline + + symbol.

<button class="btn-filter is-on"><span class="btn-filter__sym">×</span>Technology</button>
<button class="btn-filter"><span class="btn-filter__sym">+</span>Work</button>

Underline in --accent, offset 0.22em, thickness 1.5px. Hover text → --accent-ink.

Mono uppercase. On hover the gap widens 0.55 → 0.85em and the arrow slides translateX(4px).

Display size --text-display with a 2px --accent bottom border; hover text → --accent.

Hero status line with a pulsing dot.

--ok

#18b45a

Dot colour (the green).

color

--ink-soft

Label text.

animation

2.4s

Pulse speed — the duration in .ds-status__dot.

<span class="ds-status"><span class="ds-status__dot"></span> Available for work — Jun 2026</span>

Small mono label that opens each section. A 26×1px rule precedes the text; the index number is in --accent.

<span class="ds-eyebrow"><span class="ds-eyebrow__idx">02</span> Projects</span>

The standard opener for every major block: eyebrow, big display title, optional one-line sub.

.ds-section-title

--text-title

Display 500, clamp(34→56px).

.ds-section-sub

--text-body

Capped at 52ch for readability.

<div class="ds-section-head">
  <span class="ds-eyebrow"><span class="ds-eyebrow__idx">02</span> Selected work</span>
  <h2 class="ds-section-title">Three case studies.</h2>
  <p class="ds-section-sub">Optional one-line description.</p>
</div>

Cards sit on a --works-bg band. They lift and cast a shadow on hover. The grid drops to one column below 880px.

.ds-card-grid

repeat(3, 1fr)

Column count; gap clamp(16→22px).

radius

--radius

Card corners (16px).

border

--line-card

Resting border on the band.

hover

translateY(-6px)

Lift + box-shadow; speed = --dur-slow.

.ds-card__thumb

160px

Cover height; holds an image or .ds-ph.

<a class="ds-card" href="#">
  <div class="ds-card__thumb"><!-- img or .ds-ph --></div>
  <div class="ds-card__num">01 / 2024–</div>
  <h3 class="ds-card__title">Civic</h3>
  <div class="ds-card__tags"><span class="ds-tag">Product Design</span></div>
  <p class="ds-card__desc">Short summary…</p>
  <span class="ds-card__cta">View case study →</span>
</a>

Inter 300 list with auto decimal-leading-zero counters in --accent and hairline rules between items.

Big Inter Tight 500 number (56px, ls −0.04em) over a small caption. Wrap part of the number in .accent to colour it.

<div class="ds-stat"><div class="ds-stat__num">9<span class="accent">+</span></div>
  <div class="ds-stat__cap">Years of experience</div></div>

Mono --ink-faint label beside a wrapping list of Inter Tight 500 names; a --line rule sits on top.

Closing call-to-action. Display headline with the email underlined in --accent (hover turns the whole word accent).

.ds-contact__headline

--text-display

clamp(40→104px).

.ds-contact__mail

2px --accent

Bottom border on the link.

border-top

--line-strong

The rule that separates it from the page above.

<section class="ds-contact">
  <span class="ds-eyebrow"><span class="ds-eyebrow__idx">04</span> Contact</span>
  <h2 class="ds-contact__headline">Let's <a class="ds-contact__mail" href="mailto:#">talk.</a></h2>
  <p class="ds-contact__sub">Best reached by email.</p>
</section>

Mono meta row — copyright left, links right; collapses and wraps on narrow screens. Links hover to --accent-ink.

Back link on inner pages; the arrow nudges 3px left on hover, colour → --accent-ink.

Definition list of project facts; auto-fits as many 160px columns as the width allows.

<dl class="ds-meta">
  <div><dt>Role</dt><dd>Lead Product Designer</dd></div>
  <div><dt>Year</dt><dd>2024 — present</dd></div>
</dl>

Two columns: a numbered heading on the left, prose (max 60ch) on the right. Collapses to one column below 880px.

<section class="ds-proj-section">
  <h2><span class="s-idx">01</span> Challenge</h2>
  <div class="ds-proj-body"><p>…</p></div>
</section>

Media block (image or .ds-ph) with a mono caption. Media height is fluid clamp(240→400px), radius --radius-md.

Large "next case study" link at the foot of a project; the arrow (in --accent) slides 6px right on hover.

A dash-marked list with hairline rules. The — marker is coloured --accent. Pair it with .btn-filter pills to filter items (toggle .is-on in JS).

<ul class="ds-bullets">
  <li>A single point on its own line.</li>
  <li>Another point.</li>
</ul>

A diagonal-stripe placeholder with a mono caption of what belongs there. Drop it inside any sized, position:relative; overflow:hidden box (card thumb, figure, hero). Replace with a real <img> when ready.

<div style="position:relative;height:200px;overflow:hidden">
  <div class="ds-ph"></div>
  <div class="ds-ph__label">Project shot — 1600×1000</div>
</div>