An AI-Ready Design System
The complete visual system behind my portfolio: color, type, layout, texture, components, and the rules that govern them. Every value ships as typed tokens and a plain-language build guide, so a designer, a developer, or an AI agent can build on-brand from the first commit.
- Themes
- Dark (default) and light, one accent each
- Typefaces
- Gloock, Cormorant Garamond, Inter
- Breakpoints
- Desktop, tablet at 1050px, mobile at 760px
- Deliverables
- tokens.ts and build guide (.md)
Aa
Gloock · Cormorant · Inter
Accent, from the portrait
Two themes, one accent each
Cut-paper offset
How It Was Made
A design system is only AI-ready when its decisions are explicit: every value named, every rule stated, every exception explained. I built this one that way from the start, in partnership with an AI coding agent, so the source that styles the site can also brief the next designer, developer, or agent.
I owned the direction and every design and content decision. The agent built in a sandbox, verified each change in a real browser at desktop, tablet, and phone widths, and measured what the eye can't, from glyph offsets to contrast ratios. Nothing shipped without my approval, and every approved choice became a token or a rule.
-
Direct
Plain-language critique and decisions. No specs or mockups required.
-
Build
Every change made in a sandbox, layered over the live styles.
-
Verify
Checked in a real browser at three widths, with measurements.
-
Codify
Approved choices captured as tokens, rules, and this reference.
Focus areas
| Focus | Where the effort went |
|---|---|
| One source for the brand | Both accents sampled from the portrait's cut-paper silhouette, so color, motif, and photography share one origin. |
| Type with restraint | Gloock, Cormorant Garamond, and Inter paired into a hierarchy that holds presence at a 68px display size. |
| Accessible color, measured | Separate text and fill accents in light mode; every text pair measured at 4.5:1 or better in both themes. |
| A signature motif | The cut-paper offset, defined once in exact pixels and reused as the hover state for every project image. |
| Structure that tells the story | Leadership work reads as narrative and shipped work as a gallery, filtered by medium: Mobile, Web & Dashboards, Kiosks & Displays, Print. |
| Texture without drift | Crumpled paper and fine tooth, balanced so every background token still renders exactly. |
| Rules a machine can follow | Typed tokens and a plain-language build guide, so an agent applies the system the same way a person would. |
The Design System
The reference. Tokens, type, layout, signature, components, and rules, rendered live in both themes.
Color
Two themes, one structure. Each theme takes its accent straight from the portrait's silhouette: teal in dark, orange in light. The accent does all the signaling: links, active states, icons, and the cut-paper offset. In light mode the accent splits in two: the portrait's exact orange for fills, and a darker step of the same hue for text, so links stay readable without drifting off-brand. Pure white is reserved for headlines in the dark theme.
Dark
- Background
#2a2d30 - Surface
#3b3e42Image placeholders - Headline
#ffffffName, headings, titles - Lede
#dcdfe0Bio blurb - Muted
#c2c6c8Body, labels - Accent
#61d889Fills, links, icons, offset. Matches the portrait. - On accent
#141414Text on teal - Toggle
#f5946fPreviews light theme - Menu band
black 15%
Light
- Background
#f3f2ee - Surface
#e9e7e2Image placeholders - Headline
#171717Name, headings, titles - Muted
#55524eBody, labels, toggle - Accent
#fc6400Fills, icons, offset. Matches the portrait. - Accent text
#ad4500Links and small text - On accent
#ffffffIcons on orange - Menu band
terracotta 12%rgb(190 112 62)
Typography
Three families, each with one job. Gloock is the voice: the name, page titles, section headings, and headline figures, nothing else. Cormorant Garamond carries titles of things: case studies, projects, books. Inter does the reading and the labeling. Nothing sits above a heading: no labels, no bars.
Hollie Tanner
Modernization & Design System Leadership
Case Studies in Leadership & Strategy
Modernization & design system leadership
Product Strategist, People Amplifier, Collaboration Maker, Growth Getter.
I'm endlessly fascinated by what makes people connect, engage, and act.
The product suite had grown through years of iterative development without a cohesive design strategy.
Plex · Manufacturing
Case studies Portfolio About
Spacing & Layout
Rhythm
An 8px base. Every gap on the site is one of these steps.
- 8
- 16
- 24
- 32
- 48
- 64
- 72
Grid & Breakpoints
Max width 1500px, with fluid side padding from 24 to 64px.
- >1050Bio up to 820px, then a gap of at least 48px and the portrait pinned to the right edge of the content, from the top of the page to the menu band. Case studies in two columns; portfolio in three.
- 760–1050Portrait floats left and the bio wraps its silhouette. Portfolio in two columns.
- <760The menu becomes a pull-down tray. Sections collapse behind their headings. Case studies stack to one column; portfolio stays at two.
- ProjectsHeading left, body right. Collapses to one column at 900px; the details column stacks below 620px.
Signature & Texture
The cut-paper offset
Hover the image. It lifts 4px up and right while an accent silhouette appears 8px to the left and 6px below, the same geometry as the portrait. Images only, accent color only, one per element.
The texture stack
- 1Theme backgroundThe flat token color. Never changes.
- 2Crumpled paperFull-window, soft-light blend. 90% in light, 20% in dark.
- 3Paper toothA 256px seamless grain tile at true pixel size. 35% light, 30% dark.
- 4ContentText and images sit above the texture, untouched.
Each texture is converted to grayscale and re-centered on 50% grey. Soft-light leaves 50% grey unchanged, so the grain shows but the background color averages out exactly to its token.
Components
Menu band
Full-bleed tint, no rules. The theme toggle sits last, in the other theme's color.
Filter pills
Active pill: accent fill with dark text. Filters describe the artifact, not the process.
Case study row
Text-led. Icon, meta line, title, one sentence, tags as plain text. Title turns accent on hover; no arrows.
Bookshelf row
- Obviously Awesome Dunford
- Upstream Heath
- Good Strategy/Bad Strategy Rumelt
Short title, author's last name, sorted by author. Two columns on desktop and tablet.
Design system callout
One per site. The case-study icon at 48px with a palette glyph, which turns 15° on hover. Directly under the menu band on desktop and tablet, closed off by a 3px rule in the band's color; above the footer on phones.
Mobile menu tray
Phones only. The menu lives above the screen in the accent fill; a 120×52px tab hangs from it. Rows are 48px. Text is #141414 in both themes. Any link, an outside tap, or Escape closes it.
Collapsible section
Phones only. Sections start closed; the whole heading row (48px minimum) toggles them, with an accent chevron. Menu links open their section and land below the tab.
Project page
Pinned menu band with a back link and theme toggle. Gloock page title, sans intro, details column with muted labels. Sections run heading left, body right; lists are ruled rows; images take 2px corners, with no frame or shadow.
Rules of Use
Do
- Use Gloock only for the name, page titles, section headings, and headline figures.
- Keep section headings short, with nothing above them. A page's type (Case Study, Mini Project) goes in its details column.
- Take accents from the portrait: fills use
accent, text usesaccentText. - Put dark text on accent fills.
- Write project tech highlights as plain text, separated by middle dots.
- Keep portfolio items to client · industry, title, and highlights.
- Prepare every texture as grayscale centered on 50% grey.
- Write like a journalist: declarative, specific, no filler.
Don't
- Add small accent labels or bars above headings.
- Put white text on the teal accent.
- Apply the offset motif to text; it belongs to images.
- Use the fill accent for small text in light mode; text takes accent text (#ad4500).
- Show dates on portfolio items.
- Run the portfolio wider than three columns.
- Make touch targets smaller than 48px on phones.
- Add hover arrows or other glyphs that can break a title's line.
- Write copy that sounds cute when it should sound certain.
Contrast, Measured
Every pair below was calculated with the WCAG 2 formula. Small text needs 4.5:1; icons and other graphics need 3:1. Every text pair in the system passes in both themes.
| Pair | Ratio | Result |
|---|---|---|
| Dark · white headline on background | 13.85:1 | Pass |
| Dark · muted text on background | 8.05:1 | Pass |
| Dark · teal link on menu band | 8.45:1 | Pass |
| Dark · orange toggle on menu band | 6.75:1 | Pass |
| Dark · near-black on teal fill | 10.26:1 | Pass |
| Light · headline on background | 16.00:1 | Pass |
| Light · muted text on background | 6.93:1 | Pass |
| Light · accent text on background | 5.17:1 | Pass |
| Light · accent text on menu band | 4.54:1 | Pass |
| Light · tray text on orange fill | 6.11:1 | Pass |
| Light · white icon on orange fill | 3.02:1 | Pass (graphic) |
Developer Kit
Build guide
Principles, setup, every token with its use, layout and breakpoints, the signature motif, texture prep, components, voice, and a pre-ship checklist.
Tokens
Dependency-free TypeScript. Typed colors for both themes, type scale, spacing, breakpoints, motion, the offset motif, texture settings, and a generator for CSS custom properties.
import { cssVariablesStylesheet, themes, media } from "./tokens";
document.head.insertAdjacentHTML("beforeend", `<style>${cssVariablesStylesheet}</style>`);
themes.light.accentText; // "#ad4500"
media.tablet; // "(max-width: 1050px)"