content.isometric-exploded-view · Isometric exploded view

A content pattern from Isometric Line, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 5; about page, section 1. Give the section root data-pattern="content.isometric-exploded-view". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Title (step 6) left with an underline link right on one row; below, a 16:9 exploded drawing in a bordered frame across 1–9 and a five-part ruled key in 10–12.
Slots
label, title, cta2, diagram, items[5..5]
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)
Section
background surfaceAlt

Pattern notes

  • On `surfaceAlt`. One row: mono label and h2 at step 6 (≤18 ch) left, an underline link with arrow right. Below, a 16:9 exploded drawing in a 1.5 px frame on `surface` across 1–9 and a five-part ruled key in 10–12 (mono number, title at body size 600, a muted meta line).

About

How we think

Read case studies

01

Discovery sprint

2 weeks

02

Positioning workshop

1 day

03

Identity design

8 weeks

04

Website

10 weeks

05

Launch support

4 weeks