Design System Inspiration
A visual web development platform whose surface contrasts a deep near-black primary against a generous white canvas, broken by a five-stop chromatic accent system (purple / pink / blue / orange / green) that maps to the brand's product categories, and anchored by a single sans family used at restrained 500 / 600 weights with negative tracking.
Foundation · 01
A near-monochrome ink-on-canvas system broken only by a five-stop chromatic category palette. Purple, pink, blue, orange, and green map to the platform's product surfaces — used as full card fills, never as button backgrounds.
Ink Black
#080808
The primary CTA, headlines, wordmark. Deeper than pure black to read as branded.
Accent Purple
#7A3DFF
Design / build product surface. Full-fill category card.
Accent Pink
#ED52CB
Animation / interaction product surface.
Accent Blue
#3B89FF
SEO / analytics product surface.
Accent Orange
#FF6B00
Hosting / infrastructure product surface.
Accent Green
#00D722
Ecommerce / success state. Uses ink text for legibility.
Accent Blue Deep
#006ACC
Emphasis link colour.
Canvas
#FFFFFF
Default page background — every band.
Canvas Soft
#F7F7F7
Quiet wash for table headers and chip backgrounds.
Hairline
#D8D8D8
1 px borders — inputs, card chrome, dividers.
Ink
#080808
Default text + headings.
Ink Strong
#222222
Near-black emphasis.
Body
#363636
Default body paragraphs.
Body Mid
#5A5A5A
Mid-emphasis secondary — footer lines, captions.
Mute
#898989
Lower-priority labels.
Mute Soft
#ABABAB
Placeholder text, fine print.
Info Blue
#146EF5
Info badge / notification rail.
Success Green
#00D722
Success / completion indicator.
Warning Yellow
#FFAE13
Warning / approaching-limit state.
Error Red
#EE1D36
Validation / destructive signal.
Foundation · 02
A single proprietary sans (WF Visual Sans Variable) carries every role at restrained 400 / 500 / 550 / 600 weights. Inter is loaded here as an open-source substitute; Inconsolata stands in for the proprietary mono variant.
Components · 04
Card chrome sits at 8 px radius with a 1 px hairline. Featured cards step up to the brand's signature 5-stop layered drop shadow. The dark variant flips polarity to near-black on ink.
The canonical feature card on canvas. 1 px hairline, 8 px radius, 32 px padding. The default chrome for every product feature surface.
Five offset shadows stack at extremely low individual opacities — the brand's only true atmospheric effect.
Same geometry, near-black surface, white text. Reserved for closing-band emphasis.
Per site per month, billed annually.
For teams launching content-driven sites.
For agencies and high-traffic clients.
Components · 05
Inputs share the 4 px button radius — a tight engineered rectangle. 1 px hairline border, body-md typography, comfortable 12 / 16 px interior padding.
Foundation · 06
A 4 px base unit. Section gutters and card interiors land at 32 px; inline gaps step through 8 / 12 / 16 / 20 / 24 px between siblings.
Foundation · 07
The brand reads as engineered — buttons take a tight 4 px rectangle, cards step up to 8 px, and pill is reserved for circular icon containers. No values in between.
Foundation · 08
The brand's distinctive elevation recipe is a 5-stop layered drop shadow with very low individual opacities — five offsets stacked to give a featured card a soft, atmospheric lift. Heavier modal surfaces add a deeper terminal stop.
Components · 09
The brand-native composite surfaces — the canvas and ink hero bands, the standard content band, the five-stop chromatic category cards, info badges, the canvas nav, and the canvas footer. Together these define every page on the marketing site.
The canvas hero hosts the brand's display-xxl headline at 80 px weight 600 with tight -0.8 px tracking. Confident, never billboard-loud.
Same scale and tracking, near-black surface, white text. Used on campaign and product-launch pages where the ink hero closes the page.
Section headlines set in display-lg at 44.8 px weight 600 with -0.5 px tracking. Lead paragraphs sit calmly in body-md beneath.
category-card · five-stop chromatic palette
badge-info & badge-info-soft
nav-bar
footer
Behavior · 10
Four breakpoints, fluid display scale, mixed-size category grids. The 80 px hero scales fluidly down to ~44 px on mobile while preserving the brand's tight negative tracking.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | < 479 px | Hero stacks · all grids drop to 1-up · nav collapses to hamburger. |
| Mobile-Large | 479 – 767 px | Same as Mobile · slight horizontal gutter relief. |
| Tablet | 768 – 991 px | 2-up category and pricing grids · display headlines drop to 56 – 64 px. |
| Desktop | ≥ 992 px | Full multi-up grids · hero at 80 px weight 600 with -0.8 px tracking. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.