Dark first
One calm dark surface, with panels slightly lighter than the page.
Design System
The system behind this portfolio
Tokens and components used across the site, documented with the real CSS. Everything on this page is live: hover, focus and click it. Click any colour, type style, icon or scale step for details and copy-ready code.
Accent with intent
The green is the portfolio’s signature, used for actions, labels and focus.
Pills act, squares label
Round shapes are buttons and links. Square shapes are tags.
Quiet motion
Short, small movements that confirm an action.
Foundations
Colors
A restrained palette: three surfaces, three text tones, one line colour and a single accent. Click a swatch to copy the value and see its contrast.
Contrast: text colours pass WCAG AAA on the page background. The line colour is about 1.9:1, so it works for dividers but should never be the only thing that marks a control. Control borders are quiet on purpose and the label carries the meaning.
Foundations
Typography
Montserrat carries all content. Roboto is reserved for interface chrome such as the header. Click a style to see its specification.
Aa
Montserrat
Headings, body text, buttons and labels.
400500600700
Aa
Roboto
Header, navigation and the search overlay.
400500700
Type scale
Foundations
Spacing
One scale for gaps, padding and rhythm. Click a step to copy its variable.
Rhythm: sections are separated by --space-24 (96px) and a hairline divider; cards and panels sit --space-5 (20px) apart.
Foundations
Radius
Shape carries meaning: the pill is for anything you press, small squares are for labels, larger radii are for surfaces.
Foundations
Borders and focus
Hairlines separate sections, quiet outlines mark controls, and a clear ring shows where the keyboard is.
Lines and outlines
1px solid var(--line)Control border
1px solid var(--line-strong)Accent outline
1px solid var(--accent)Focus ring: press Tab to move here
Focusable link
2px solid var(--focus), offset 3pxFoundations
Elevation
Surfaces are flat by default. Depth appears on interaction and around devices. Hover the tiles to see it.
Foundations
Motion
Three durations, one easing. Movement is small and always optional: with “reduce motion” on, everything resolves instantly.
Lift
Cards and tiles rise 3–4px with a soft shadow. --dur-base (250ms).
Arrow nudge
Icons move 2–3px in their own direction. --dur-fast (200ms).
Reveal
Content rises 18px while fading in as it enters. --dur-reveal (550ms).
Foundations
Layout
Content sits in a centred column up to 1154px, with generous gutters that tighten on small screens. Resize the window to watch the breakpoint change.
Wideabove 960px
Large861–960px
Medium701–860px
Small700px and below
Current width: –
- Three-column card grids collapse to one column below 960px.
- Two-column pairs (text and image) stack below 960px, image first.
- Buttons grow from 44px to 46px tall on small screens for easier tapping.
- Avoid horizontal scrolling: every component must fit a 375px screen.
Foundations
Icons
Inline SVG on a 24px grid. Interface arrows are 2px strokes that inherit the text colour; glyphs inside cards are filled. Click an icon to copy its markup.
Components
Buttons
Pills, 44px tall. Primary is filled with the accent, the default is a translucent outline, and Back is a quiet ghost. Use the selector to preview each state, or just hover and tab through them.
Variants
State
- Primary once per view, for the single most important action.
- Buttons that leave the site use the arrow-northeast icon and open in a new tab.
- The Back button is identical on every page. Do not restyle it per page.
- Do not use a square shape for an action: square is for labels.
Components
Tags and chips
Squared tags describe. Pills and selectable chips act. Try the filter chips: they toggle on click and with the keyboard.
Descriptive tags (not interactive)
Claude CodeFigma MCP
- User research
- Personas
- Journey maps
Filter chips (new)Selected: Research
Known inconsistency: the orange “New!” status on the home page is a bordered pill, while every other tag is squared. It is kept as is until the home page is revisited.
Components
Cards
Cards group short pieces of content on the lighter surface. They lift and gain an accent outline on hover.
Info card
Practical solutions
A short sentence that explains the idea in plain words.
Impact
A card can also start with a small label instead of an icon.
Numbered cards and stats
- 1
Simple navigation
Short supporting text under a clear title.
- 2
Product availability
Numbers use the accent tint for a calm emphasis.
- 3
Easy access
Keep titles to one or two lines.
- 125%increase in the number of workflows developed
- 100%increase in research studies conducted
Components
Inputs and controls
The site has almost no forms, so these are defined here first: they share the pill shape, the accent focus and the quiet border of the buttons.
Text field
Hover and focus me.
Enter a valid e-mail address.
Toggle
Tabs (arrow keys move between tabs)
Tabs switch between views of the same content without leaving the page.
Use two to four tabs with short labels. The selected tab is underlined with the accent.
Arrow keys, Home and End move between tabs. Only the selected tab is in the tab order.
Components
Feedback
Short, light confirmations. A toast appears at the bottom of the screen for a couple of seconds; a tooltip names an icon on hover or focus.
Tooltip and toast
Copy to clipboard
Copied to the clipboard
Components
Lists and data
Compact ways to present facts, steps and benefits.
Facts strip
- Duration
- 3 weeks
- My role
- UX and UI designer
- Focus
- Research and prototyping
- Audience
- Shoppers and enthusiasts
Checklist and numbered list
- 24/7 online care
- Discounts on appointments
- A digital health card
- Some users want to share pictures
- A chat to talk directly