Why the site is
built this way.
This page is a portfolio piece on its own: the design system behind the work, the components it is built from, and the reason behind each decision. It is brand-led, careful about detail, and honest about what it does and does not prove yet.
Two colours, two jobs
Deep navy (#000718) with a bright orange and a cool ice blue. Orange means action and signature: buttons, selection, the hero. Blue means structure and wayfinding: labels, counters, reading links, focus rings. When every colour has one job, neither shouts.
Framed, not drawn
A navy badge with a single orange chamfer and SR inside. It stays sharp from the small header size up to a 200px hero graphic, and the same chamfer shows up on every work tile.
Hanken, large and legible
Hanken Grotesk for headings: bold at hero size, still clear when small. Inter is used for body text, and Space Grotesk for the small technical labels. Three fonts, each with a clear job.
On the work, not the words
The banner light follows your cursor and the work shifts slightly toward it, but the page settles as soon as you stop moving. One clear moment of motion per page, kept measured.
Full-bleed and large
Edge-to-edge layout, big type, generous tiles. The work and the words get room to be seen, and stay interactive down to mobile, where tiles rise in on scroll and respond to tap.
The messy middle
Every case study follows the same shape: setup, the wrong turn, the pivot, the reframe, the friction, the resolution, the postmortem. Real research instead of made-up numbers, which is what a hiring manager actually trusts.
Background
#000718
Surface
#0a1430
Ink
#eef1fa
Accent · action
#ff5a2c
Support · wayfinding
#7da7ff
Components
Built once · reused everywhere · decisions on recordThree button styles, each with one job
Solid is for the one main action on a view. Ghost is the quiet second option. On the dark gradient band the button switches to a navy fill with white text and an orange edge, because pure white on orange fails contrast. Accessibility matters here, so the surface changes rather than letting the text get hard to read.
The chamfer carries the brand
Every tile uses the mark's chamfered corner, so the brand shows before you read a word. The preview shifts toward the cursor on desktop and toggles on tap for touch. An earlier throwing animation was removed on purpose, because it buried the work it was meant to show.
Let's talk.
Let's talk.
Two variants, and the safer one is the default
The solid orange band is the loud option for a single landing moment. The gradient variant, navy into plum with an orange corner that shifts on hover, is the default in production, because white text on a dark field clears WCAG comfortably where dark text on orange was getting tight. Same component, and the safer surface is the one used.
Real screens in a device frame
Screenshots sit inside device frames built in pure CSS, a MacBook for desktop work and an iPhone for mobile, so a flat export looks like a shipped product. There are no heavy mockup image files, since the frame is just markup and you drop your screen into it.
Service index & accordion
The services page is one DOM with two layouts: an index with a pinned detail panel on wide screens, and a true accordion on touch, where the detail opens directly beneath the tapped heading. Active rows take the orange tick and a blue number.
Form states
Contact form fields validate inline once touched. Errors are plain sentences in the warm accent under the field, with a short shake on an invalid submit. Success folds the form away and confirms in place. Verification runs through Cloudflare Turnstile.
Interaction states
Every clickable element answers back: buttons lift on hover with a soft glow, press down on click, and all controls share one blue focus ring for keyboard users. The scroll progress line at the top of each page runs blue into orange, the same pairing rule in one pixel.
The interactive mark
The SR monogram is built from particles sampled off a live render of the mark. It leans away from the cursor, and a click flicks it apart into confetti in the palette before it drifts home. The same mark greets anyone who sends a message from the contact form.
The practice marquee.
Two rows of large type drift right to left on the homepage. Scrolling down speeds the drift, scrolling up reverses it, and it eases back to a slow base pace when you stop. It falls back to two static rows when reduced motion is on.