Lime on Deep Green

01Foundations

Everything derives from two HSL values. There is no third brand colour, no neutral ramp and no elevation scale — depth comes from borders and surface inversion instead of shadow.

Colour

Aliases and derived tokens

Contrast

Surfaces

.dark and .light are the system's central mechanism. They are not themes in the usual sense — both appear on the same screen. A component doesn't choose its colours; it inherits them from whichever surface class wraps it.

Typography

Two faces. Tanker (self-hosted, single 400 weight) carries every display moment; Sora (variable, Google Fonts) does everything else across six weights. Tanker loads with font-display: block rather than swap — the hero wordmark is sized to Tanker's metrics, so painting a fallback at that size would overflow the banner for a few frames.

The scale, now tokenised

Named by role, not size — the same step is reused at different breakpoints, so a size-based name would go stale the first time one moved.

Four literals remain, all deliberate: 1.4rem / 0.95rem in the case modal (rem-based so it scales with the root — though neither resolves to a scale step), the 18px close-button glyph, and an 18px nudge on the contact heading at ≤425. Px line-heights stay literal: they're tied to the font-size beside them and don't generalise.

Weights

Spacing

The number is the multiple of 4, so gaps in the sequence are meaningful rather than missing. 127 references across the two stylesheets. The bar shows each step to scale; the figure on the right is how often it is used.

The scale was rebuilt from usage data rather than guessed: --space-1 and --space-5 were added because 4px and 20px were already in use with no token, --space-9 (36px) was deleted because nothing referenced it, and 28px is absent because nothing uses it.

Where the scale stops

It governs component rhythm — padding, gaps and margins inside buttons, cards, modals and content blocks. Section-scale numbers stay literal on purpose.

The rule for new work: if a value repeats three or more times across components, add it to the scale. Otherwise leave it literal.

Radius & border

Fifteen further radii are hardcoded: 100px for every pill control (×5), 24px for cards (×3), 50% for modal close buttons (×2), plus 40px, 16px, 8px, 4px and 40px 40px 0 0. The pill and card radii are real, recurring decisions and belong in the scale.

Border weight

1.5px is the system weight — buttons, icon buttons, cards, insight cards and the outro rule all use it. Two deliberate exceptions: the About portrait frame at 6px, and the image-modal close button at 1px. Sub-pixel borders round inconsistently across browsers at some zoom levels, so 1.5px is a choice to keep, not to rediscover.

Motion

Two speeds, deliberately. Opacity is direct feedback for the pointer, so it is fast. The one use of --t-med is the nav pill background, which the scroll-spy toggles as the page moves rather than in response to a click — ambient state reads better a little slower. .btn-menu therefore carries both.

The one substantial animation is the case page's scroll-driven parallax: each .parallax-section translates its content by (scrollY − sectionTop) × (1 − speed), with speed 0.5 on desktop and 0.8 below 1024px. The script returns early under prefers-reduced-motion: reduce and binds no listeners; case.css also clears any applied transform, so a preference change mid-session settles the page rather than freezing it mid-parallax.

Reduced motion

style.css carries a global guard — * with transition-duration: 0.01ms !important and the same for animations and scroll-behavior. Because it loads on both pages it covers the homepage too, which previously had none at all. Near-zero rather than none so transitionend still fires and nothing waiting on it can hang.

02Components

Eleven components, previewed below with their real declarations. Each sits on the surface it was designed for — which, since the card merge, is the only thing that decides how any of them are coloured.

Button · .btn

The primary action. A 44px pill with a 1.5px border and an optional trailing arrow icon. Colour comes entirely from the surface class.

Both rows take their border from currentColor, so the edge follows the surface. Until 2 Sep it was hardcoded to the yellow, which is why the lime row's first button had no visible edge at all.

States — all five, on every control

Icon button · .btn-icon

A 44×44 circle holding a single SVG. Two sizes: 44px everywhere, 56px in the contact banner (dropping back to 44px below 600px). Always carries an aria-label; the icon inside is alt="".

Menu link · .btn-menu

Navigation only. The .active state is applied by the scroll-spy script and pairs with aria-current="true". The .small modifier is the case-page breadcrumb.

Text button · .btn-link

A link-shaped control that sits inside running copy. Underlined at 4px offset, transparent, inherits its font. Two uses, and they are different elements:

Card · .card

An icon-plus-label block for impact figures. One class, both grounds. The border comes from --card-border, which defaults to the yellow and is flipped to the dark green by .light — the same mechanism as --focus-ring. A card nested inside a .light block inherits the flip, so it is correct by construction rather than by remembering which class to type.

Insight card · .insight-card

The case study's signature block — a behavioural-design principle, tagged, named and explained. The only component with a gradient fill: a 45° wash from transparent to rgba(247,253,160,0.15).

Case figure · .case-figure

The one image component a case section uses: a mockup sitting beside the copy. Two variants — .case-figure is zoomable and opens the lightbox; .case-figure.is-static is not, and is used once for the intro cover.

Layout lives on the <figure>, not on the button or the image. That is the point: both variants occupy an identical box whether or not there is a button in the middle, so a section reads the same either way.

<figure class="case-figure">
  <button type="button" class="case-figure__zoom js-zoom-image"
          aria-label="Enlarge image: <describe it>">
    <picture>
      <source type="image/webp" srcset="/assets/images/Name.webp" />
      <img class="case-figure__img" src="/assets/images/Name.png"
           alt="<describe it>" decoding="async" />
    </picture>
  </button>
</figure>

Modal · .case-modal and .image-modal

Two modals, built twice. The case modal is a proper dialog: focus trap, role="dialog", aria-modal, aria-labelledby, Escape to close, and focus returned to the trigger — deliberately skipped when the modal closes on its way to #contact, so restoring focus doesn't fight the smooth scroll.

03Patterns

Recurring solutions that aren't components — the conventions that make the pages behave consistently.

Responsive images

Every photograph ships as WebP with a PNG fallback via <picture>. Three rules make it work invisibly:

Above the fold: fetchpriority="high", no lazy loading. Below: loading="lazy" — but never on a parallax element, whose transform depends on a known offsetHeight.

Section heights

Homepage sections cover the viewport rather than being fixed to it: min-height: calc(100svh − navHeight), with the 100vh line first as the fallback. Nav height is 100px above 1024px and 60px below, and scroll-margin-top matches it so anchor landings sit just under the bar.

Scroll spy

Both the homepage nav and the case breadcrumbs highlight the last section whose top has crossed a line 40% down the viewport, with the final item forced active at the bottom of the page.

Hero wordmark sizing

The hero name is CSS-sized, not measured by JavaScript. #hero-banner is a container (container-type: inline-size) and the title is clamp(28px, 19.5cqw, 320px). "Rafael Borges" in Tanker at -0.03em advances ≈4.92× its font-size, so 20.3cqw would fill the line exactly; 19.5cqw is the largest value that never overflows once letter-spacing rounds to whole pixels — worst-case fill 98.0% across 320–2000px.

Focus

--focus-ring defaults to the yellow and is flipped to the dark green by .light and by .case-modal__content, so the ring is always visible against whatever it is sitting on. Rings are 2px with a 2px offset (4px on .btn-link, 6px on the email link).

Alt text

The convention is alt="" for decorative icons, with the meaning carried by an adjacent aria-label or visible text. Both pages now follow it throughout — 21 decorative images on the case page, 8 on the index — and only the five content mockups carry descriptive alt. The case page previously broke it in 12 places, where icons sitting beside their own visible label were announced as "Idea Icon", "Shield Icon", "Trade Up Icon", and twice as "Shiedl User Icon".

04Responsive

Eleven media queries across two stylesheets, with two shape-aware queries that width alone couldn't express.

case.css's 1224px breakpoint is the odd one out: it matches neither 1024 nor 1440, and there is no shared list of breakpoints for a third stylesheet to follow. A set of custom media values, or simply aligning 1224 → 1024, would make the two files agree.

05Audit

The foundations were sound and unusually well commented to begin with — the inline comments explaining why are what made this document possible to write from the source alone. Five rounds of fixes on 2 September closed all fourteen findings and took the score from 52 to 96. Every token in :root is now referenced by something.

Token coverage

Findings

What's working

Worth stating plainly, because an audit reads as a list of faults: the contrast is excellent in both directions, the surface-inversion model is a genuinely good idea cleanly executed, the responsive work handles cases most sites ignore (portrait tablets, short phones, container-relative display type), and the inline comments explain why — the letter-spacing rounding sweep, the display:contents trap, the IntersectionObserver threshold, the font-display choice. That commentary is better than most production codebases carry, and it is what made this document possible to write from the source alone.

06What was done, and what is left

Every audited finding is closed. This is the record, and the short list of what is deliberately still open.

Completed 2 September 2026

Still open

Either your call, or genuinely not worth doing.