The colours, type, components and writing rules behind every page of this website, with the reasoning for each. Everything shown here is the real, working component. Turn on Inspect and hover over anything to see which styles it uses.
What the design system is for, the principles behind it, and where it is used.
A shared set of colours, type, spacing, components and writing rules that every page of this site is built from. It keeps the home page, the About page and each case study consistent, and a new page is faster to build because it starts from parts that already work.
Five ideas that decide the smaller choices. When two options both look fine, these pick between them.
Every page uses the same foundations and components. Case studies add their own accent colour and dark section colour on top.
I have also worked inside a company design system. On Pathfinder at Automation Anywhere, I extended the existing design system library with new components for the learning experience: badges, certification cards, mission banners, leaderboard patterns and navigation elements. See the Pathfinder design system work
The basic styles every page uses: colour, type, spacing, corners, shadows, motion and icons.
The site uses a light background and one accent colour, electric blue, for my name, links, the current page and the footer. Project colours only appear inside project images. The contrast numbers show how readable each colour is as text, calculated from the colour values.
| Role | Token | Where it shows up |
|---|---|---|
| Page background | --paper | Every page, behind nav, hero and captions |
| Primary text | --text | Card titles, headings and labels |
| Secondary text | --body | Card descriptions, body paragraphs, captions |
| Accent | --ink | The pixel hello, my name, links, the current page, Momo and the footer |
| Accent hover | --purple | Hovered buttons and links |
| Border | --faint | Button borders, dividing lines, the Shipped tag |
| Shaded box | rgba(36,36,36,.045) | Shaded boxes in case studies, the current item in the contents list |
| Light text on dark | rgba(246,245,241,.74) | Body text on dark sections; captions are a little lighter |
| Case study dark sections | --green / --violet / --inkband | Background of dark sections; each case study has its own |
| Case study accent | --acc / --acc-text / --acc-dark | One accent per case study in three steps, about 10 percent of the page |
Each page uses one accent colour. When a diagram needs to show two different kinds of thing, it uses the accent and a grey, not a second colour.
Each case study uses one accent colour from its product. A single shade can't be easy to read both as text on a light background and as a background behind dark text, so each accent comes in three shades, each with one job.
| Colour | Use it for | Contrast | |
|---|---|---|---|
Dark green--green #2A401D | Background of the dark sections. | 10.41:1 light text on it | Passes |
Accent fill--acc #F07A21 | Buttons, markers and highlights, with dark text on top. | 5.55:1 dark text on it | Passes |
Accent text--acc-text #AC510C | Orange text and links on the light background. | 4.89:1 on the light background | Passes |
Accent on dark--acc-dark #F59A52 | Orange text on the dark sections. | 5.20:1 on dark green | Passes |
| Colour | Use it for | Contrast | |
|---|---|---|---|
Violet--violet #2A1B6E | Background of the dark sections. | 13.00:1 light text on it | Passes |
Accent fill--acc #FE5B10 | Buttons, markers and highlights, with dark text on top. | 4.97:1 dark text on it | Passes |
Accent text--acc-text #B03E09 | Orange text and links on the light background. | 5.44:1 on the light background | Passes |
Accent on dark--acc-dark #FF8A4C | Orange text on the dark sections. | 6.07:1 on violet | Passes |
Case studies are split into full width sections, each with a background colour. Most sections are light. A dark section marks a change of topic, and each case study has its own dark colour. Large coloured backgrounds get a light texture so they don't look flat on screen.
The default background. No more than three light sections in a row.
Dark sections in AI Agent Studio.
Dark sections in Pathfinder.
Sections about logs, audits and governance.
Behind the cover image. Texture is harder to see on light colours, so it is set higher.
The texture is made in code rather than an image, so it adds nothing to the page's download size.
Manrope is used for almost everything. Three other fonts each have one specific use, listed below. The sizes are listed in the scale, with where each is used.
200 to 800Used for headings, body text, buttons and labels. Weight 800
700Used once on the whole site: the hello on the home page, drawn as moving pixels.
400, 500Used only for data: codes, dates, captions, the footer line and colour names on this page.
400Used only in the TAG logo, because it is the product's own lettering.
How wide content can get, how far it sits from the screen edge, and what changes as the screen gets narrower. Pages are designed for desktop first and checked on a 390 px phone.
| Screen width | What changes |
|---|---|
| Below 430 px | Page links get slightly smaller so all four fit on one line. |
| Below 640 px | Boarding passes scroll sideways and tables stack into rows. |
| Below 700 px | The clock in the navigation hides and the city stays. |
| From 640 px | Project cards go from one column to two. |
| From 768 px | The Momo button appears. |
| From 1000 px | Project cards go to three columns, and About sections put the title beside the content. |
| From 1100 px | Case study sections that change as you scroll switch on, and the contents list appears beside the page. |
The spacing values used across the site, and where each one is used. Most came from the spacing of the project cards on the home page.
Small elements get small corners, images and panels get 12 px, and anything you can press is fully rounded. There are six values, each listed with where it is used.
Shadows are used only on things that sit on top of something else: a label on a photo, a ticket on the page, and the Momo button. Screens and images have no shadow.
0 2px 10px rgba(0,0,0,.14)0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(20,20,24,.06)0 10px 30px rgba(56,56,235,.22)All animation uses one easing curve, cubic-bezier(0.16, 1, 0.3, 1). It starts fast and slows down gently at the end. Each section has at most one animation, and every animation stops for visitors who turn on reduced motion.
Used in case study sections that change as you scroll. Before the fix, two cards faded at the same time and both were half visible in the middle. Now the first card is gone before the next one appears.
Content fades in and moves up 14 px as it scrolls into view, once. Without JavaScript everything is shown straight away.
For visitors who turn on reduced motion in their device settings: moving pixels stay still, the photo strip stops, and fades become instant. The button previews this on this page.
Anything that moves for longer than five seconds can also be paused, like the photo strip on the About page.
A small set of icons. Each is 26 px inside a 44 px round area so it is easy to tap, and takes the colour of the text next to it.
The standards every page is checked against, gathered in one place. Each one is tested on the real pages at desktop and phone widths.
The building blocks shared across pages. Each one below is the working component, not a picture, and lists the pages it appears on.
My name, the city and the current time in San Francisco, then links to the four pages. The current page is filled in.
Used on HomeAboutSystemCase studies
A page link. It looks 34 px tall, but the area you can tap is 44 px, the recommended minimum for touch screens.
Used on Every page
Lets visitors choose who they are, and changes the opening line of the About page to suit them. Only that line changes, and it keeps the same space so nothing below moves.
I'm a product designer who simplifies complex workflows and the systems behind them.
Product designer with around five years in enterprise AI. Open to product design roles.
Studying computer science first helps me understand the constraints you are working with.
Used on About
A list of sections that stays on screen and highlights the one you are reading. There is one on the left of this page.
Used on SystemCase studies
An image, then the title, a short description, and a line with the organisation, type and year. The description says what the project is and who it was for.
Describe what the project is and who it was for: "A clip on desk robot that keeps you in focus."
Write in the first person: "I designed a desk robot that…"
Used on Home
A tag on work that is live. It includes the arrow, so the card does not need a second one. Work under NDA gets a lock in front of it.
One arrow, inside the tag.
Two arrows for one link.
Used on Home
A small white label on a photo that names the place or company, in that company's own logo and colour. It uses text only when there is no company.
LinkedInUse the company’s own logo and colour.
Add a label to a photo when there is no company or place to name.
Used on About, photo strip
Each place I studied or worked, shown as a ticket with the airport code, the logo and the years. The place I am now is filled in blue.
Used on About
A shaded box for short points, like design principles. It has a light grey fill, 16 px corners and no border.
Used on Case studies
Two kinds of numbers. Numbered points in a list use the same size as their title. Numbers placed on a screenshot are small so they do not hide the screen.
The number matches the title size.
Small grey numbers in a different font.
Used on Case studies
Product screenshots are shown at full width with a thin border and rounded corners, without a device frame. Press the expand button to see one full size.
Show the screen at full width with a thin border.
Put the screen on a coloured panel. It shrinks to half size and is hard to read on phones.
Used on Case studies
Switches between the old and new design in the same spot so visitors can compare them. The page does not move when you switch, and a hidden video does not play.
Used on Pathfinder
Customer quotes are written as text, not screenshots, so they stay readable at any screen size. The small label above uses the case study's accent text colour.
Customer quote
Pathfinder accelerated our citizen development growth by inspiring us to create two brand new roles within the program.
Type the customer’s words as text.
Paste a screenshot of the quote. It cannot be read on a phone or by a screen reader.
Used on Pathfinder
The main animation on the home page. The heading is drawn as small squares that come together when the page loads and move away from your cursor. Try moving over it.
Used on Home
Email first, then LinkedIn, then X. The same row in the hero and the footer.
Used on HomeAboutFooter
Electric blue with light text at full strength, because lighter text did not pass contrast. The visitor number continues from the counter on my old site.
Used on Every page
My assistant, a dumpling you can ask about me. It sits in the bottom right corner on desktop, and its message shows when you hover over it.
Used on Every page
How the site sounds, with examples of what to write and what to avoid. Most examples come from real edits on these pages.
Clear, warm and a little playful. The site should read the way I would explain my work to a colleague: plain words, short sentences and no jargon.
The rules that come up most often, each with an example from a real page.
A clever heading makes the reader guess what the section is about.
Our process
A double diamond, run fast.
Plain words are quicker to read, for recruiters as well as designers.
Builders pick the model by name.
A model is a name, not a setup.
In experience design writing, users is the precise word for who the design is for.
The users who build automations had never worked with an AI model.
The people who build automations had never worked with an AI model.
Dashes break a sentence into pieces. Two short sentences read better.
Case studies are split into full width sections. Each has its own colour.
Case studies are split into full-width sections, each with its own colour.
The card describes the project. The case study tells my part in it.
A clip on desk robot that keeps you in focus.
I designed a desk robot to keep people focused.
The About page is about me. The projects have their own pages.
I worked across the product repository, AI tools and governance, and cloud.
I worked on AI Agent Studio and Pathfinder.
One number without a source makes the reader doubt all the others.
46 percent more certification completions, from 185 to 271.
A 65 percent improvement, with nothing to show where it came from.
How the design system is kept up to date, and the rules that came from real bugs.
The design system is written down in one design file that Claude and I both read before making any change. Each change is checked on screen before I review it, recorded in the changelog, and anything that broke once becomes a rule below.
What changed in the design system, most recent first.
Pathfinder added a violet dark section and its own orange in three shades. This page was published.
Each accent split into three shades for contrast. The footer became electric blue. System joined the navigation, and the page links were resized so four fit on a phone. Tap areas raised to 44 px.
The AI Agent Studio case study moved to this system: dark green sections, shaded boxes, and screens shown flat at full width.
The navigation clock gained a sun and a moon. Project card details follow one format: organisation, type, year. Social icons set to one size.
The page background became #F6F5F1. Project cards got one spacing rhythm and 12 px corners, and live work got the Shipped tag.
Pixelify Sans chosen for the hello on the home page.
The new site started: Manrope for all text and electric blue as the one accent.
Each rule started as a bug on a real page. The date shows when it happened.
The Automation Anywhere orange measured 2.56:1 as text on the light background, too faint to read at small sizes. Darkening it until it passed made it too dark to have dark text on top of it.
Rule: before changing an accent colour, check where it is used as text and where it is used as a background.
Pathfinder followed this rule from the start: its orange has had three shades since day one.
2026-09-27 · case studiesIn a case study section that changes as you scroll, two cards faded at the same time, so halfway through both were half visible on top of each other. It looked like the page was lagging.
Rule: each card stays for most of its time, then fades out quickly, and the next card only appears once the first is almost gone.
2026-09-25 · case studyAt the worst moment, the overlap went from two full cards to about a third of one.
The page had a style called chip that set a height of 24 px. Diagrams drawn in code used the same name, so the page style squashed all 19 boxes in the case study diagrams.
Rule: styles inside diagrams start with gx- so they cannot clash with page styles. The two drawings on the right are identical except for the style name.
The AI Agent Studio case study opened with seven light sections in a row, 40 percent of the page, before any colour. Moving one section onto a dark background broke up the run.
Rule: after three light sections, use a dark one.
2026-09-27 · case studySwapping Fun for System made the last pill twice as wide. At 390 px Resume ended at 422 px and rendered as "Resur", on all three pages at once.
Rule: on screens narrower than 430 px, the page links get slightly smaller text and spacing. Checked at 360, 390 and 430 px.
2026-09-27 · every pageOn the TAG card, the phone showed but the man did not. Safari could not work out a height given as a percentage, so the image showed at full size and only an empty corner of it was visible. Chrome did not have the problem.
Rule: images placed inside a fixed shape are sized by width, and anything that could break in Safari is tested in Safari.
2026-09-23 · home
.man { height: 124%; } /* broke in Safari */.man { width: 52%; height: auto; }Every product screen was tried on a coloured background panel. The panels made the screens half the size, and on phones the text in them could not be read.
Rule: screens are shown at full width with a thin border. A coloured panel is used once, for the cover image.
2026-09-25 · case studyThe persona videos looked blurry. They had been cut from a video that was already made smaller, then shown larger than their real size. Going back to the original file made the most detailed one 1808 px wide instead of 1204.
Rule: cut videos from the original recording and only crop them, never shrink and enlarge them.
2026-09-25 · case studyThe visitor counter once returned something unexpected. The error took down the whole page, and the site went blank.
Rule: check every value that comes from outside the site before showing it, and keep its space hidden until a real value arrives.
2026-08 · live siteif (d && typeof d.value === "number") show(d.value)The footer below uses exactly this guard.
The same texture setting looked right on dark green but disappeared on light peach, because the texture effect is weaker on light colours.
Rule: texture is set to 30 percent on dark backgrounds and 62 percent on light ones, adjusted until both look the same.
2026-09-27 · case studyNo hyphens or dashes in prose, no emojis, plain words. Headings name the thing. Experience copy says users, and card copy never says "I".
Rule: words are reviewed like components, because a clever heading hides what a section is about.
2026-09-25 · every pageA double diamond, run fast.
ShippedOur process
