Skip to content
CAPSOLTECHNOLOGIES
MenuClose
01Design system

The tokens this site is built from.

Published rather than described. A studio that sells design systems should be able to hand you its own, and every ratio on this page is computed at build time from the same hex values the site renders with — not typed in from memory.

Sample type
Status
Craft sample, live
Client work
None — this is our own
Verifiable
With a browser inspector
02Colour · surfaces

White and near-white carry about 92% of every screen.

Crimson is an accent, not a theme. If a section is more than roughly a tenth crimson by area, it is wrong and gets rebuilt.

--color-page#FFFFFF
Page background
1.00:1 on whiteNon-text only
--color-surface#FAFAF9
Alternating section background
1.04:1 on whiteNon-text only
--color-border#E9E9E5
Hairline rules
1.22:1 on whiteNon-text only
--color-border-strong#D5D5CF
Emphasised rules, list markers
1.47:1 on whiteNon-text only
03Colour · text

Text

--color-muted#6B6B6B
Secondary text
5.33:1 on whiteAA — any text size
--color-body#2E2E2E
Body text
13.58:1 on whiteAA — any text size
--color-ink#141414
Headings, primary text
18.42:1 on whiteAA — any text size
04Colour · accent

One crimson, three jobs.

Crimson was chosen over the logo's deep blue because it is the largest colour area in the mark, it clears AA on white, and blue is the default for every competing firm in the city.

--color-accent-tint#FDF0F3
Error background only
1.11:1 on whiteNon-text only
--color-accent#D70337
AccentPrimary buttons, active nav state, link hover, and the single most important word in a heading. Nothing else.
5.31:1 on whiteAA — any text size
--color-accent-deep#B8002E
Link textUsed for link text below 16px, where the lighter crimson would not clear AA.
6.82:1 on whiteAA — any text size
--color-accent-dark#8A0022
Error textAlways paired with an icon. Red is the brand colour here, so redness alone cannot signal an error.
9.98:1 on whiteAA — any text size
  • No crimson gradients, and no large crimson background washes.
  • Link text below 16px uses --color-accent-deep, not --color-accent.
  • Error states are --color-accent-dark on --color-accent-tint, always with an icon.
  • Dark mode is out of scope for v1. There is no theme toggle.
05Colour · markers

Sampled from the mark, used only as identifiers.

One per service line. Every value is sampled directly from the logo artwork, including the overlap regions where two petals cross — so each is a colour that genuinely appears in the identity rather than one picked to sit near it. Several fail AA on white, which is exactly why they never appear behind text and never exceed 24px.

--color-marker-01#D70337
01 Design & brand systems
5.31:1 on whiteAA — any text size
--color-marker-02#0493D1
02 UI/UX & experience design
3.44:1 on whiteLarge text and non-text only
--color-marker-03#FF7B17
03 Product strategy & MVP
2.59:1 on whiteNon-text only
--color-marker-04#0F48A9
04 Engineering & technology
8.33:1 on whiteAA — any text size
--color-marker-05#027861
05 Full-stack development
5.44:1 on whiteAA — any text size
--color-marker-06#037AC4
06 AI features & automation
4.58:1 on whiteAA — any text size
--color-marker-07#FFBF1B
07 Growth, marketing & optimisation
1.65:1 on whiteNon-text only
--color-marker-08#035F4A
08 Startup enablement
7.67:1 on whiteAA — any text size
06Type

Archivo for everything, IBM Plex Mono for the labels.

Both self-hosted, subset, and loaded with font-display: swap. Two families, one of them doing only structural work.

--text-displayclamp(2.5rem → 4.5rem)
One partner, not four
--text-h1clamp(2.125rem → 3.5rem)
Design, engineering, QA and growth
--text-h2clamp(1.75rem → 2.5rem)
How an engagement works
--text-h31.4375rem / 23px
Where QA enters
--text-h41.1875rem / 19px
Design hands off to engineering
--text-h51rem / 16px
The component library is the contract
--text-lead1.0625rem / 17px
Standfirst and page ledes.
--text-body1rem / 16px
Running text, set at a 1.65 line height.
--text-meta0.8125rem / 13px
Secondary and supporting text.
--text-micro0.75rem / 12px
Fine print.
--text-label0.6875rem / 11px
SECTION LABEL
07Spacing

One four-pixel scale.

1
2
3
4
5
6
8
10
12
14
16
20
24
28

Steps are Tailwind’s 0.25rem multiples. The number is the step, so py-6 is 24px. Nothing in the codebase sets a pixel value directly.

08Motion

Motion clarifies hierarchy, or it does not exist.

Nothing on this site animates on scroll. Nothing exceeds 400ms. prefers-reduced-motion is respected globally, not per component.

--duration-instant90msColour-only state change
--duration-fast140msHover and focus transitions
--duration-base200msElement enter and exit
--duration-slow320msThe longest thing on the site
--ease-standardcubic-bezier(0.2, 0, 0, 1)Everything that enters
--ease-exitcubic-bezier(0.4, 0, 1, 1)Everything that leaves
09Components

The primitives layer

Hand-rolled. No component library, no framework defaults — a design studio's own site cannot look generated.

Section label04How an engagement works
Error state

Never colour alone — red is the brand colour on this site.

Back to workStart a project brief