Dthree design system
Design tokens
Phase 1. One ratio (perfect fourth, 1.333), one anchor. Resize the window to see the Tablet and Mobile modes resolve. Nothing on the live site is bound to these yet.
Type scale
type/display
Established brands
type/h1
Established brands
type/h2
Established brands
type/h3
Established brands
type/h4
Established brands
type/lead
Supporting line under a headline, set at the lead step.
type/body
Body copy runs at the body step, one rem.
type/xs
Captions, labels and legal sit at the extra small step.
Colour
brand/blue #422BFF, 6.95:1 on white
brand/red #FF5251, 3.19:1, large text and graphics only
ink/1-strong #1A1A1A, 17.40:1
ink/2-body #45454A, 9.53:1
ink/3-secondary #6A6A70, 5.37:1
ink/4-decorative-only #9A9AA0, 2.80:1, never for text
Migration map: what renders today vs the tokens
The site does not currently render the sizes in its Webflow classes. A script, dthreetypesysk, injects a second type scale at !important and wins. That shadow scale is what visitors actually see. Mapping it onto the ladder below is the Phase 3 work.
hero 82px cap
type/display 89.8px
+9%
section title 64px cap
type/h1 67.3px
+5%
h2 40px cap
type/h3 37.9px
-5%
h3 28px cap
type/h4 28.4px
+1%
lead 22px cap
type/lead 21.3px
-3%
body 19px cap
type/body 16px
-16%, decision needed
Five of the six land within 9% of what is on screen now, so adoption is close to invisible. Body is the exception and the one call to make: 19px is generous for body copy, 16px is the ladder step. Raising the ladder anchor to suit body would push every heading up with it.
Body: resolved
The body row above is now out of date. Rather than choose between 19px and 16px, type/body stays at 1rem as the base step and a new type/body-lg at 1.125rem (18px) carries paragraph copy, dropping to 1rem on mobile. That keeps the heading ladder on one ratio while landing paragraphs 5% from today instead of 16%. Same structure Flow Ninja uses. Already wired and verified: the /about intro paragraph keeps every line break.
Cards and containers
Audited across the Webflow stylesheet plus the site head, site footer and page level custom code. The component layer is in the same state the spacing was: 45 distinct border radii, 39 distinct box shadows, 38 distinct border declarations, and 73 distinct container max widths. Three different greys do the same border job (#ddd, #ccc, #e6e6e6), and one border colour is written two ways by case alone.
Container widths
Set to exactly the four most used existing values, so adopting them changes nothing on screen.
container/xl 75rem / 1200px
container/lg 68.75rem / 1100px, most used today
container/md 56.25rem / 900px
container/sm 43.75rem / 700px
Card and elevation set
Webflow variables cannot hold a shadow, so these three are a documented set applied through classes rather than tokens. Everything else in the card comes from tokens.
Rest
elevation 1. Default card at rest. radius/md, border/neutral, surface/page.
Raised
elevation 2. Hover and active states, and cards that sit on a tinted band.
Overlay
elevation 3. Mega menu panels, modals and anything floating above the page.
Correction: the custom cards are already a system
The 45 radii and 39 shadows overstated the problem. Split by source, most of that count is Webflow's untouched template CSS (20 commerce checkout fields at 3px/#ddd, plus lightbox, pagination and badge) and legacy glass-era classes (circle, shape, cursor, the 5rem and 10rem nav pills). The hand-built cards are consistent: three deliberate families, each internally coherent. The tokens have been set to match them rather than replace them.
The three house card families
Shelf / panel
radius 16px, 1px #D9D2FF, shadow 0 2px 4px rgba(26,26,26,.06)
services shelf, blog cards, rows panel, FAQ shelf, CTA band, landing cards
Chip / pill
radius 999px, 1px #D9D2FF, no shadow
hero chips, contact chips, blog category chips, footer nav pills
Nav item
radius 12px, 1px #E4E4E9, no shadow
mega menu cards, nav buttons
Tokens now match all three exactly: radius/md 16, radius/sm 12, radius/pill, border/subtle #D9D2FF, border/neutral #E4E4E9, elevation 1. Adopting them is a rename, not a redesign.
One genuine drift to fix
The three landing page cards (d3edu-card, d3ngo-card, d3cmp-card) use a 1px #e6e2ff border while every other shelf card uses #D9D2FF. Two lavenders doing one job. Worth standardising on #D9D2FF.