Reference · Internal
Every color, type style, component and rule used across this portfolio — extracted directly from the live site so this page never drifts from what's actually shipped.
01
Four base colors plus three alpha scales (white, black, orange) used for borders, muted text and hover states.
White scale — used on dark surfaces (nav, hero, contact)
Black scale — used on light surfaces (cards, body text, borders)
Orange scale — accent fills, highlight overlays
02
Syne for display headings, Inter for everything functional — body copy, labels, UI text.
I'm a Senior Product Designer with 12+ years of experience crafting digital products that balance clarity, strategy, and visual quality.
Card descriptions, accordion body copy and other supporting text sit at 13px with generous line-height for readability at small sizes.
03
One button component reused everywhere — nav CTAs, project card actions, hero links.
04
50/50 split — copy on one side, cover image on the other. Alternates sides down the page. Industry stripe anchored to the edge that meets the image.
05
An 8px-rooted spacing scale and four radius sizes, each tied to a specific use.
06
One 12×12 stroke arrow, reused for every directional action — card links, next-project nav, hero CTAs.
07
The behaviors and constraints that hold the system together.
Syne for anything that needs to feel designed — headings, buttons, numbers. Inter for everything read at length — body copy, labels, UI chrome. Never mixed within the same text block.
Used for primary CTAs, hover states, active nav indicators and the industry stripe on project cards. Never used for large fills or body text — always a small, deliberate hit of color against black, white or off-white.
Project cards flip copy/image position on every other row (.project-card--reversed) so the page reads with a visual rhythm instead of a static list.
Every section opens with a small uppercase label (.section-label, 10px, 0.14em tracking) directly above a large Syne heading — never a heading on its own.
A crosshair + coordinates readout replaces the system cursor on pointer devices (hover: hover), reinforced by a film-grain noise overlay across the whole page. Both are disabled on touch.
Below 768px, every card's cover image renders above its copy regardless of desktop side — reading order is never sacrificed for visual alternation.