Design System | Tyler Quackenbush

Color

Four colors, used the same way everywhere. Ink and Cloud carry the page. Navy is the one accent, spent on the thing that matters. Skylight only shows up when Navy would disappear against a dark surface.

--color-ink#000000 · 19.4:1
Primary text, dark surfaces.

--color-ink-dimInk @ 78% · 11.3:1
Secondary body copy.

--color-mutedInk @ 70% · 8.3:1
Meta lines.

--color-bg#F5F6F5 · Cloud
Page background, not white.

--color-surface#FFFFFF
Cards, sitting a step above Cloud.

--color-accent#25476B · Navy · 8.8:1
The one accent. Links, labels, the thing that changed.

--color-dark-accent#A8C0DA · Skylight · 11.2:1 on Ink
Navy's job, but on a dark band.

--color-borderInk @ 10%
Hairlines between sections.

Typography

Poppins Bold

--font-headingHeadings, wordmark weight

Poppins Light

--font-labelEyebrows, labels, quiet text

Poppins Regular

--font-bodyBody copy, 400

Lora Italic

--font-quotePull-quotes, tagline

.label-mono { font-family: var(--font-label); font-weight: 300; font-size: var(--label-size); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--color-accent); }

Brand Marks

A Navy square holding a white T: the spine and one bar, equal weight, fused into a single shape. Nothing else. The mark carries its own background, so it reads the same on a light nav or a dark one.

24pxFavicon

34pxNav

64pxHero

Tyler Quackenbush

.hero__wordmarkName lockup

Mark Process

Two rectangles, equal thickness, fused where they meet: a spine and a bar. That's the whole mark, a sideways T, for Tyler. No illustrated icon, no gradient, no third color standing in for detail the shape doesn't need.

White on Navy, because the mark carries its own background and has to read at 16 pixels as clearly as it does at billboard scale. Equal stroke weight on both bars keeps it looking like a built shape instead of a hand-drawn flourish. Centered exactly, not eyeballed, the same discipline this site asks of a sentence, applied to a rectangle.

Spacing & Radius

--radius-sm4px

--radius-md8px

--radius-lg12px

--radius-xl16px

--radius-pill999px

--section-padding-xclamp(24px, 6vw, 96px)

--section-padding-yclamp(56px, 9vh, 100px)

--content-max-width1120px

Two breakpoints do almost all the work: 780px collapses multi-column grids to one and swaps the nav to its mobile dropdown, 700px (occasionally 600px, where a component needs the extra room) handles the smaller stuff, like case-study stat grids.

Buttons

Primary button Outline button

View markup

<a href="#" class="btn btn--primary">Primary button</a> <a href="#" class="btn btn--outline">Outline button</a>

Cards & Tiles

40+

Stat card

90%

Stat card

Used across case studies (.cs-stat) and the homepage results band (.results-band__stat).

Pill-shaped, --color-surface fill (.tag-list__item). Competencies, skills, anything that's a flat list of nouns.

01

Process card

White surface, numbered label, used for the Approach page's three-step grid.

Callout Bands

Full-bleed dark sections break up the page rhythm: --color-ink background, Skylight for the eyebrow label and any number that needs to stand out, everything else in white or a Cloud-tinted rgba for body text.

Sample · Band Label

Heading stays white

Body copy on a dark band, used on the homepage results band and the Approach page's principles band.

Navigation

Full-width bar, centered 1120px inner wrap (.site-nav / .site-nav__wrap). Mobile collapses to a hamburger-triggered dropdown below 780px, using inert to remove the closed menu from the tab order and accessibility tree.

States & Feedback

Every interactive element (.btn, .site-nav__link, .work-list__link, .cs-next__link, .cta-band__link) pairs :hover with :focus-visible so keyboard users get the same feedback as mouse users. The stat counter ([data-count-to]) respects prefers-reduced-motion and jumps straight to the final value rather than animating for users who've opted out.

Accessibility

Built to WCAG 2.1 AA, verified by the numbers above rather than assumed. Every text/background pairing on this site clears 4.5:1 for normal text, most clear AAA's 7:1. The one color that sat close to a floor, muted meta text, was widened from an original 4.6:1 (too close to the 4.5:1 line for comfort) to 8.3:1.

Focus Native browser outline, never suppressed. No custom focus ring anywhere on the site, because the default already works and a hand-rolled one is one more thing to get wrong.

aria-current The active nav link gets an aria-current="page" attribute alongside its visual active state, so screen reader users get the same "you are here" signal sighted users get from the underline.

Touch targets The mobile hamburger is 44×44px, and each nav row's tap target spans the full row, not just the text. An earlier version left dead space that looked clickable and wasn't.

Reduced motion The stat counter checks prefers-reduced-motion and jumps straight to the final number instead of animating.

Future Components

Not yet built, but the visual language already implies these if they're ever needed: a form/input pattern (this site has no forms yet: contact is mailto-only, deliberately, to avoid collecting data this site has no server to handle securely), a loading/skeleton state for the stat counter's pre-animation moment, and a toast/inline-confirmation pattern for a future "copy to clipboard" affordance on the microcopy specimens.

The tokens and components behind this site, rendered from the real stylesheet.