Design system

Typography

Satoshi, self-hosted as one 42KB variable woff2 covering all three weights. Headings are always Bold with 110% line-height and -1% tracking.

Headings

These are the raw fixed tokens, shown at their true size. A 96px H1 is wider than a phone, so each specimen scrolls horizontally on a narrow screen rather than stretching the page. For real page copy use the responsive heading-* utilities below.

Body

Each size is available in all three weights. Sizes below show Regular; the columns after show the same size in Medium and Bold.

Label

Responsive headingsProvisional

Provisional: Figma only specifies 1440px and up. These utilities step down through the existing heading scale at smaller breakpoints and land on the exact Figma value at 1280px+. No new sizes are invented. Resize this window to see them move. When the mobile frames land, only the @utility heading-* block in globals.css needs changing.

Colour

Tailwind's default palette is cleared, so only these tokens exist. bg-slate-500 will not compile - that is deliberate, it stops off-brand colour creeping in.

Brand — Pink. Pink 400 is Jem Pink.

Brand — Blue & Navy

Interface — Grey

Added: Grey 300 and Grey 400 are additions. Figma jumps straight from #E2E2E2 to #838383, leaving nothing for placeholder text or secondary borders. These two fill the ramp. Use for borders and disabled states only, never for body text on white — neither passes contrast.

Status

Added: Only green exists in Figma. Red and amber are additions, needed the moment there is a form to validate. Both mirror green’s 100/400/800 structure and are contrast-checked against their own 100 tint.

Focus ring

Added: Nothing in Figma defines a focus style. Navy 200 is used, at 2px with a 2px offset: 12.05:1 against white and 4.35:1 against Jem Pink, so it stays visible on every surface in the system. Tab through this page to see it.

Spacing

Eight steps. All eight map exactly onto Tailwind's default scale, so no custom spacing tokens are needed - just use the class shown.

Layout

Sections are full-bleed bands with a centred container inside. Size sets both the vertical rhythm and the container cap, as paired in Figma.

Provisional: Those are the 1440px+ values. Below that, vertical padding and horizontal inset step down through the spacing scale. Header and footer sit at 24px instead of 80px, as confirmed.

Radius

Radius carries meaning. 48 for hero and feature surfaces, 16 for standard content, 8 for dense or nested things. Every pill - button, badge, chip - is also 48.

Buttons

24px/16px padding, 48px radius, Satoshi Bold 16px. One size in Figma; the small variant below is an addition.

Check: Primary hover goes lighter (Pink 300) and pressed goes darker (Pink 500). That is what Figma specifies, kept as designed. Separately, white text on Pink 400 measures 2.77:1 against a 4.5:1 requirement — see the accessibility note at the foot of this page.

Badges & chips

Two separate components, because Figma treats them separately. Badges announce state in uppercase at 12px. Chips label taxonomy in sentence case at 14px.

Badge — status

Chip — taxonomy

Check: The Category chip in Figma has Blue 200 text on a transparent fill, so it only works on a dark surface — shown on navy above. There is no light-background outline chip in the design, so tone="outline" below is an addition to fill that gap.

Icons

Phosphor Icons at Regular weight. Import from @phosphor-icons/react/dist/ssr in server components.

Cards

32px padding, overflow hidden. Three radii, chosen by role rather than taste. The 192px height in Figma is specimen-only.

Added: Figma’s outline border is #E8E8E8, which is not a token. Collapsed to Grey 200 (#E2E2E2) so all borders in the system match. The other three surfaces below are additions using existing palette colours.

Header & footer

Both are built and in use. The header is a transparent overlay, so it only reads correctly over hero media - see it in place on the home page.

View the home page to see the header overlaid on a hero and the footer in position.

Check: Figma shows two identical “Book a demo” buttons in the header, one bordered and one not. The borderless on-dark variant is shipping, because a grey border reads as a seam against the dark scrim. Confirm which you want.