Design tokens

All tokens are CSS custom properties declared on :root in _variables.scss. The raw palette below never changes between themes; the semantic tokens further down are what actually get remapped in dark mode.

Raw palette

Fixed values. Prefer a semantic token over any of these when styling something new — that is what keeps dark mode working for free.

• --brand-color#d80000 (via --logo-color)
• --theme-color#663399 · rebeccapurple
• --schoolbusyellow#f1d302
• --fireenginered#c1292e
• --firebrickfirebrick
• --huntergreen#3f6c51
• --cerulean#0c7489
• --babypowder#fdfffc
• --lightgray#e7e7e7
• --midgray#7a7a7a
• --darkgray#3c3c3c

Three companion forms exist for interpolation: --brand-color-hsl, --theme-color-hsl and --theme-color-rgb (space separated 102 51 153, so it can be used as rgb(var(--theme-color-rgb) / 0.25)). The derived --theme-10 and --theme-25 wrap exactly that.

Dark-mode palette

Only referenced from inside the dark-theme-cvars mixin — never use them directly in a component.

• --dark-banner-color#582f81
• --dark-page-bg-color#391b57
• --dark-footer-color#211231
• --dark-text-colorrgba(255, 255, 255, 0.75)
• --dark-link-colorwhite
• --dark-link-visited-colorrgba(255, 255, 255, 0.25)

Semantic tokens

These are the ones to reach for. The dot in each row resolves live, so it follows whichever theme you are currently viewing.

Dark mode is applied two ways, both feeding the same dark-theme-cvars mixin: [data-theme="dark"] when the visitor has made a choice, and @media (prefers-color-scheme: dark) .no-js as the fallback when the toggle script has not run. Images also drop to opacity: .75 in dark mode and return to full opacity on hover.

Spacing, measure and widths

The measure cap is easy to lose track of, so here it is drawn:

Fluid scale

Every fluid token is a clamp() generated with Utopia. The bars below are sized by the token itself — resize the window and they move.

• --fluid-4-16 4 → 16px · logo radius
• --fluid-16-32 16 → 32px
• --fluid-16-36 16 → 36px · mission
• --fluid-16-48 16 → 48px
• --fluid-24-48 24 → 48px
• --fluid-24-64 24 → 64px
• --fluid-32-48 32 → 48px
• --fluid-32-64 32 → 64px
• --fluid-36-72 36 → 72px · branding title
• --fluid-48-128 48 → 128px · logo width

Component-specific clamps also exist and are named after what they drive rather than their range: --header-fluid-32-48, --branding-fluid-16-32, --branding-title-fluid-48-56, --branding-title-fluid-l-48-72, --mission-fluid-20-30, --logo-fluid-8-12, --logo-fluid-8-16, --logo-fluid-56-72, --logo-fluid-64-96.

Typography & links

One typeface throughout: Raleway, self-hosted as woff2 and declared for both --header-font-family and --body-font-family with a sans-serif fallback. The @font-face rules are generated and inlined by snippets/head-fonts-local.inc.php; weights 300, 400 and 900 are preloaded.

Weights

Seven weight tokens are declared, but only five upright cuts and three italics are actually downloaded. Using an unloaded weight gets you a browser-synthesised approximation, not real Raleway.

Note that --font-weight-bold maps to 800 (ExtraBold), not the usual 700 — 700 is never loaded. --font-weight-heading aliases it, so all headings render at 800.

Sizes

Body text is set once on body and everything else is relative to it.

--font-size-base
1.125rem · 18px

Default body copy. Line height --line-height-base at 1.56.

--font-size-lede
1.3333em · ~24px

Lede paragraphs, set in --font-weight-lede (300).

--font-size-sm
1rem · 16px

Footer .contentinfo columns.

--font-size-xs
0.875rem · 14px

Navigation, language switch, small print, tooltips.

Headings

Headings share --line-height-base: 1.2 (tightened via a :where() override) and the 800 weight. Only h2 and h3 have an explicit size; h1, h4 and h5 fall through to the browser default relative to the 18px base.

<h1>Handmade web design</h1>
<h2>Withstanding the test of time</h2>
<h3>Fiercely independent</h3>
<h4>A smaller subdivision</h4>
<h5>Rarely needed</h5>

The specimen above deliberately renders a real h1 so the scale can be compared, which makes this page the one place on the site carrying two of them — acceptable here since it is noindex internal tooling. Everywhere else: one h1 per page, and on the homepage that h1 is the branding title in the banner, so the page body starts at h2 — see content/all-header.en.inc.php.

Headings with an icon

An h2 containing an svg.deco becomes a flex row and picks up --text-deco-color. No extra class needed — the rule is :where(h2):has(> .deco).

<h2><svg class="deco" height="1em" width="1.1em" viewBox="0 0 512 512" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#heart"/></svg> Love</h2>

Body copy, lede and quotes

<div class="flow">
  <p class="lede">Cybermedia Concepts is a <a href="/about/">one man web design studio</a> based in Geneva, Switzerland, with a focus on performance, accessibility and standards.</p>
  <p>Simplicity and clarity have become our obsession. Our designs are carefully crafted to meet your needs. Body copy is capped at <code>--max-text-width</code> so the measure stays readable however wide the viewport gets.</p>
  <blockquote><em>— &ldquo;Trust is the currency of lasting relationships. Built slowly, spent wisely, it turns first-time clients into lifelong allies.&rdquo;</em></blockquote>
</div>

.lede is normally light (300); inside .page--home it is bumped to semibold, and strong within it goes to 600 rather than 800. blockquote carries no styling of its own beyond the reset — the italic comes from the markup.

Links

Link colour is applied to every a except .plain and .branding--link. Hover and active states swap between brand red and rebeccapurple depending on the theme, so both directions stay distinguishable.

<ul role="list" class="flow" style="--space: .5rem">
  <li><a href="#typography">A standard link</a> — <code>--link-color</code></li>
  <li><a href="#typography" style="color: var(--link-hover-color)">Hover state</a> — <code>--link-hover-color</code></li>
  <li><a href="#typography" style="color: var(--link-visited-color)">Visited state</a> — <code>--link-visited-color</code></li>
  <li><a href="#typography" class="underline">Explicitly underlined</a> — <code>.underline</code>, 3px offset</li>
  <li><a href="#typography" class="plain">Chrome-free link</a> — <code>.plain</code>, inherits colour, no decoration</li>
  <li><abbr title="A tooltip appears on hover">An abbreviation</abbr> — <code>abbr</code> shows a help cursor</li>
</ul>

The second and third items above are painted with the state token so you can see all four side by side; in real markup you never set these by hand. Inside nav and footer below the l breakpoint the link tokens are locally overridden to white-on-purple.

Layout & breakpoints

Breakpoints

Nine named steps live in the $breakpoints Sass map and are queried through the mq() mixin: @include m.mq(l) for min-width, @include m.mq(l, max) for max-width (which subtracts 0.02px to dodge the fractional-viewport gap). They are also exported as --bp-* custom properties.

Page grid

Below l the page is a plain vertical stack: banner, nav, main, footer. At l and above body becomes a CSS grid — a fixed 25vw banner column on the left, a 5rem column holding the vertical wave, and the content column on the right.

Because header spans all three content rows, the banner colour runs the full height of the page on wide screens, and nav and footer switch to the page background (--footer-text is locally reassigned to --footer-text-wide so their text stays legible).

.wrapper

The horizontal container for everything inside main and footer. Below s it has no inline padding and instead caps itself at the measure; from s it takes 2rem padding and releases the cap; from l the padding grows to 4rem.

<div class="wrapper flow">
  <h3>A section heading</h3>
  <p>Standard content sits in a wrapper. Nearly every block on the site opens with this exact pair of classes.</p>
</div>

.flow

The owl selector doing all vertical rhythm: .flow > * + * gets margin-block-start: var(--space). Headings raise --space to 2rem before themselves and drop it to 0.5em after, so a heading hugs the text it introduces. Override it inline per block with style="--space: .5rem", as the blog grid and card bodies do.

<div class="flow" style="--space: .5rem">
  <p>Tightened flow — <code>--space</code> lowered to .5rem.</p>
  <p>The gap above this paragraph is the overridden one.</p>
  <h4>A heading still gets its 2rem</h4>
  <p>…and this sits 0.5em under it, because the heading rule wins.</p>
</div>

.is-hilited

A full-bleed tinted band. It cancels the wrapper's inline padding with negative margins, then re-adds it, so the background reaches the viewport edge while the text stays aligned with everything else. The last one on a page gets extra bottom padding to meet the footer wave cleanly.

<div class="wrapper is-hilited flow">
  <h3>From the blog</h3>
  <p>Uses <code>--hilite-bg-color</code>: aliceblue in light mode, the dark banner purple in dark mode.</p>
</div>

Shown here inside a demo box, so the bleed is clipped. On a real page it runs edge to edge. The .section--blog variant overrides the tint to #e3d8f1 and drops link underlines.

Separators

Three ways to break up a page, in descending strength.

<hr class="section-rule">
<hr class="row-rule">

.section-rule is a 3px double rule with a centred pilcrow knocked out of it. .row-rule is dotted and hidden by default — it only appears inside a .grid container wide enough to trigger the main-grid container query. Both collapse automatically when adjacent to .is-hilited.

Waves and icon decoration

The banner and footer are joined to the page by SVG waves: .h-wave horizontally below l, .v-wave vertically above it, the footer copy rotated 180°. Both take --banner-color, so they follow the theme. Between sections, snippets/icon-deco.inc.php lays down a shuffled row of sprite icons at 50% opacity with one random “hero” icon in brand red — that is the row just under the table of contents on this page.

Components

Value cards

.grid is a wrapping flexbox that also declares itself a named container (main-grid). Add .gx2 to cap cards at half width from s, and .gx3 to cap them at a third from xxl. .card--special opts a card out of the two-up cap so it can run full width.

<div class="articles grid gx2 gx3">
  <article class="card card--special">
    <h2><svg class="deco" height="1em" width="1.1em" viewBox="0 0 512 512" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#certificate"/></svg> Experience</h2>
    <p>A card marked <code>.card--special</code> keeps the full width of the grid.</p>
  </article>
  <article class="card">
    <h2><svg class="deco" height="1em" width="1.1em" viewBox="0 0 512 512" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#handshake"/></svg> Trust</h2>
    <p>A plain card, capped at half the grid from the <code>s</code> breakpoint.</p>
  </article>
  <article class="card">
    <h2><svg class="deco" height="1em" width="1.1em" viewBox="0 0 512 512" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#leaf"/></svg> Green</h2>
    <p>Cards carry no background or border of their own — only the heading icon and the measure cap.</p>
  </article>
</div>

Outlined card

The one card variant with a surface: a translucent theme-purple fill and a heavier translucent outline. In light mode its text and links are forced to --theme-color.

<div class="card-outline flow" style="--space: .5rem">
  <h4>Ready to start?</h4>
  <p>Built from <code>rgb(var(--theme-color-rgb) / 0.25)</code> with a 3px outline at 0.5 alpha, 0.5rem radius.</p>
  <p><a href="/tc/">Read the terms and conditions</a></p>
</div>

Blog cards

An auto-filling grid with a 224px minimum track. Cards are populated at request time by promotedPosts(), which pulls a JSON feed from davidroessli.com and caches it for 30 minutes. The whole card is clickable: .card__body--link stretches a pseudo-element over its positioned .card parent.

<div class="articles blog" style="--space: 2em; --font-weight-heading: var(--font-weight-semibold)">
  <article class="card flow" style="--space: .5rem">
    <div class="card__media">
      <figure></figure>
    </div>
    <div class="card__body flow">
      <h3 class="card__body--h3"><a class="card__body--link" href="#components">An example post title that runs onto two lines</a></h3>
    </div>
    <div class="card__footer card__footer--hashtags">#css #accessibility</div>
  </article>
  <article class="card flow" style="--space: .5rem">
    <div class="card__media">
      <figure></figure>
    </div>
    <div class="card__body flow">
      <h3 class="card__body--h3"><a class="card__body--link" href="#components">A shorter title</a></h3>
    </div>
    <div class="card__footer card__footer--hashtags">#webdev</div>
  </article>
</div>

The figure elements are left empty here to show the :empty placeholder fill — in production they hold a lazily-loaded webp thumbnail derived from the post slug, with rounded top corners.

Client chips

.list-multicol is the generic wrapping chip list; .list-clients is the work-page skin over it, feeding the --client-* tokens in. .is-featured fills the chip and drops the outline; .is-current marks an ongoing relationship.

<ul class="list-multicol list-clients" style="--justify-content: start" role="list">
  <li class="list-item">A past client</li>
  <li class="list-item is-featured">A featured client</li>
  <li class="list-item is-current"><a class="plain" href="#components">A current client</a></li>
  <li class="list-item is-featured is-current">Featured and current</li>
  <li class="list-item">Another one</li>
</ul>

Alignment is controlled with the --justify-content and --text-align custom properties rather than modifier classes; the work page passes them inline.

Inline lists

<ul role="list" class="list-inline">
  <li class="list-item list-item--inline"><a href="#components">about</a></li>
  <li class="list-item list-item--inline"><a class="active" aria-current="page" href="#components">work</a></li>
  <li class="list-item list-item--inline">a third item</li>
</ul>

This is the .main-nav pattern. Inside nav it also gets uppercasing, the xs font size, and an underline on the item whose link carries .active (.list-item--inline:has(.active)). Add --around for space-around instead of space-between — that is what the footer social row uses.

Theme toggle

An animated sun/moon SVG. The sun scales up and its beams fade out while a mask circle slides across to carve the crescent, all on Open Props easings and skipped entirely under prefers-reduced-motion. Icon colours come from --icon-fill / --icon-fill-hover, which flip from schoolbus yellow on the purple banner to brand red once the nav sits on the page background at l.

<button class="theme-toggle" title="Toggles light &amp; dark mode" aria-label="light" aria-live="polite">
  <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><mask class="moon" id="sg-moon-mask"><rect x="0" y="0" width="100%" height="100%" fill="white"></rect><circle cx="24" cy="10" r="6" fill="black"></circle></mask><circle class="sun" cx="12" cy="12" r="6" mask="url(#sg-moon-mask)" fill="currentColor"></circle><g class="sun-beams" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></g></svg>
</button>

This copy is inert — the mask id is renamed and the id="theme-toggle" hook is omitted so it cannot clash with the live control in the navigation. The working one is in content/all-theme-toggle.inc.php; the script that drives it is inlined in the head so the theme is set before first paint.

Language switch

Every page defines hreflang-en and hreflang-fr, and the switch simply links to the counterpart. It appears twice: compact in the nav (a globe icon plus a two-letter code) and as a full sentence in the footer, always phrased in the language it takes you to.

<div class="langswitch"><a class="langswitch--link" href="#components" title="Afficher la version française de cette page"><svg class="deco" width="1em" height="1em" viewBox="0 0 640 640" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#language"/></svg> Parlez-vous français&nbsp;?</a></div>

Icon sprite

A single cache-busted SVG sprite referenced with <use href="…#id">. Icons inherit currentColor via the reset, and svg { pointer-events: none } keeps clicks falling through to the link underneath. Use .deco for the 1em inline size.

• logo
• logo-rounded
• language
• certificate
• heart
• handshake
• handshake-simple
• star
• star-of-life
• leaf
• leaf-oak
• leaf-maple
• thumbs-up
• thumbs-up-simple
• face-smile
• comments
• thought-bubble
• message-question
• cloud-question
• circle-check
• seal
• aperture
• microscope
• compass-drafting
• pen-paintbrush
• screwdriver-wrench
• gear-complex-code
• code-branch
• css3-alt
• html5
• computer-classic
• computer-classic-simple
• mobile-screen-button
• screen-users
• chalkboard-user
• people-arrow
• person-biking
• mug-hot
• rocket-launch
• starship
• alien
• alien-8bits
• hand-spock
• arrows-rotate
• arrows-repeat
• arrows-spin
• arrows-split-up-and-left
• h-wave
• v-wave

<p>An icon sized to the text it sits in: <svg class="deco" viewBox="0 0 512 512" role="img" aria-label=""><use href="/assets/img/icons.1.2.svg#mug-hot"/></svg> inline and inheriting colour.</p>

Footer content columns

.contentinfo is a wrapping flex row that goes nowrap from s with each column flexing equally; below that the last column is pushed to full viewport width. .contentinfo--smallprint drops everything inside it to the xs size and lightens its headings to semibold.

<div class="contentinfo">
  <div class="contentinfo--locate flow">
    <h3>Locate</h3>
    <p>Cybermedia Concepts<br>Avenue Industrielle 14<br>1227 Carouge / Switzerland</p>
  </div>
  <div class="contentinfo--call flow">
    <h3>Reach out</h3>
    <p>Voice <a href="tel:0041223434580">+41 22 343 45 80</a><br>Email <a href="mailto:hello@cybmed.com">hello@cybmed.com</a></p>
  </div>
  <div class="contentinfo--follow flow">
    <h3>Follow</h3>
    <p>Social links sit here in an <code>.list-inline--around</code> row.</p>
  </div>
</div>
<div class="contentinfo--smallprint">
  <h3>The fine print</h3>
  <p>Everything in this block renders at <code>--font-size-xs</code>.</p>
</div>

Tooltips

.has-linktip establishes the positioning context and .linktip is the bubble, hidden until hover. The polaroid on the about page pins its own variant open permanently as a caption.

<p><a class="plain has-linktip" href="#components">Hover me<span class="linktip">…and a tip appears above</span></a></p>

The polaroid component itself (.polaroid, .vignette-colorful, .frame) is not part of the global stylesheet — it lives in content/about-css.scss and is inlined on the about page only, the same per-page pattern this styleguide uses.

Utilities & accessibility

Hiding things

Four different jobs, four different classes — picking the wrong one is the usual way accessible content gets lost.

<p>There is a screen-reader-only label right here <span class="sr-only">(this text is only announced, not shown)</span> — inspect the markup to see it.</p>

Skip links

Three of them, injected by inc/default-page.php before the nav, the main content and the footer, each labelled from $site["start-of-*"] so they are translated. They are clipped to nothing until focused, then drop an 80px full-width bar across the top of the page with the theme colours inverted.

<a href="#utilities" class="text-assistive display-at-top-on-focus">Start of main content.</a>

Tab to the link above (it is invisible until it takes focus) to see the reveal. Try it in both themes — the inversion is deliberate.

Floats

<div class="flow">
  <div class="float-end" style="inline-size: 6rem; block-size: 4rem; background-color: var(--theme-25); border-radius: .25rem"></div>
  <p><code>.float-end</code> floats to the inline end with a 1rem bottom and inline-start margin. <code>.float-sm-end</code> does the same from the <code>s</code> breakpoint but centres the element on narrower screens instead — that is what the about-page polaroid uses.</p>
</div>

Media helpers

What the reset gives you for free

Andy Bell's modern reset with Stephanie Eckles' additions, so a few behaviours are already handled and should not be re-implemented per component:

• :where(ul, ol)[role="list"] strips list styling — that is why every decorative list on the site carries role="list".
• Focus rings are removed for mouse users only, via :focus:not(:focus-visible).
• Images, pictures and SVGs are display: block with max-width: 100% (waves excepted).
• Text elements get text-wrap: pretty and hanging-punctuation.
• [id] targets get 2rem of scroll margin, and focused elements 8vh at the bottom.
• prefers-reduced-motion flattens every transition and animation to 0.01ms; cross-document view transitions are only enabled when motion is welcome.
• The scrollbar gutter is reserved so pages do not jump horizontally between short and long documents.
• Safe-area insets are respected below l, so nothing hides under an iPhone notch or home indicator.

Known quirks

Small things worth knowing before you go looking for a bug that is not there.

• --font-size-lede and --fluid-16-48 are each declared twice in _variables.scss; the second declaration wins (1.333333333em and the vw-based clamp respectively). Same for --icon-deco-scale, which resolves to --gutter.
• Two container queries are commented out with a note about a Safari media-query bug and replaced by plain @media rules — see nav and .main-nav in styles.scss.
• Sass variables cannot be interpolated inside @container, so those breakpoints are written as literal rem values.
• .has-border exists but its declaration is commented out; it currently does nothing.

Where things live