Design system
Every rule in DESIGN.md,
rendered with the published tokens and components. If it looks wrong here,
fix the system, not the page.
Type
- Title · step-5 The world needs better websites. Let’s build yours together.
- Title · step-4 The world needs better websites. Let’s build yours together.
- Title · step-3 The world needs better websites. Let’s build yours together.
- Subhead · sans semibold, opsz 24 The world needs better websites. Let’s build yours together.
- Heading 2 · bnl-heading-2 The world needs better websites. Let’s build yours together.
- Body · sans step-0 The world needs better websites. Let’s build yours together.
- Prose · serif step-1 The world needs better websites. Let’s build yours together.
- Label · medium step--1 The world needs better websites. Let’s build yours together.
- Caption · ink-light step--1 The world needs better websites. Let’s build yours together.
- Eyebrow · bnl-eyebrow The world needs better websites. Let’s build yours together.
- Code · mono ink-code The world needs better websites. Let’s build yours together.
Eyebrow and heading
About us
Thirty years on the web, and we still read the docs.
The eyebrow names the block. The heading carries the punch.
Our services
Our services
The eyebrow repeats the heading. Keep one.
Color
Ink
- ink-bold headings, strong
- ink body text
- ink-light captions, loud dividers
- ink-xlight borders, rules
- ink-code inline code
Surface
- surface page ground
- surface-raised cards
- surface-recessed wells
Fill and on-fill
- Aa fill-loud / on-loud
- Aa fill-quiet / on-quiet
Accents
- accent-1 brand; services; header CTA
- accent-2 about
- accent-3 work
- accent-4 ideas
Wayfinding in the menu, focus rings, and the brand button. Never body text, large light fills, or a button rainbow.
Light and dark
The world needs better websites. Let’s build yours together.
No pitch deck, no pressure. Just a conversation about what you’re building, where you’re stuck, and whether we’re the right partner.
text-ink-bold, text-ink, text-ink-light on bg-surface-raised.
The world needs better websites. Let’s build yours together.
No pitch deck, no pressure. Just a conversation about what you’re building, where you’re stuck, and whether we’re the right partner.
Same classes inside a wa-dark wrapper.
Patterns
The named pattern set, drawn by one shader in the brand accents. A pattern takes the slot brand imagery does: at most one image- or pattern-backed section per page above the footer. Duotone at most: two tones per preset, with the light as the only third voice. Still by default; motion is opt-in on hero-level surfaces only. Tune in the Pattern Studio, then add the result as a preset.
-
arcs · light surface , accent-1
Lavender and pale pink shapes radiating from a rounded box off the bottom right, under a fuchsia light.
-
field · dark surface , accent-3
Stacked green waves rising from the bottom left, lime and deep green.
-
chevron · dark surface , accent-4
Blue chevrons hanging from above, each with a muted orange edge.
-
ember · dark surface , accent-2
Orange squircle shapes from the top left with a dark inner edge, shading to near black.
-
ember-soft · dark surface , accent-2
Low-contrast orange squircle bands radiating from the top left.
-
ripple · dark surface , accent-4
Blue shapes from the right edge with a shadowed inner edge, low contrast.
-
stone · dark surface
Stone shapes for a dark neutral section: texture without a hue.
-
mesh · light surface , accent-4
Blue and lavender-pink mesh gradient: no bands, for quiet light heroes.
Controls
Neutral is the default. Brand (accent-1) is for the header CTA and little else. Inline text links are plain anchors, not buttons.
Radius
-
rounded-sm
controls, small boxes
-
rounded-xl
cards, testimonials, code
-
rounded-3xl
page-width wells
Layout
Prose
Longform reads in GT Canon
Articles, case studies, and service bodies go inside
<Prose>. Headings, lists, quotes, and code are styled
once here, so pages never restyle them. Bold flips back to the sans so emphasis stays crisp against the serif.
Subheads are sans semibold
- Lists get a squircle marker from the ink scale.
- Spacing is in line-heights, so rhythm follows the type size.
A good website should be as usable for the internal team running it as it is for the visitors reading it.
npx turbo check-types --filter=./frontendApplied
A page fragment as it would ship: one brand-image-backed dark section with the eyebrow-and-heading pair, a three-up of feature cards under a single heading, and a testimonial.
Website redesign
Your site should outlast your marketing plan.
Content model, CMS, components, redirects, and performance, built as one system your team can keep running after launch day.
What we do
Astro marketing websites
Fast, scalable sites built for performance and long-term upkeep.
CMS strategy and Sanity
Flexible CMS setups designed around how your team actually works.
Design systems
Components, patterns, and docs so new pages don’t start from zero.
David strikes that rare balance of design, creativity, and technical know-how, and made it easy for our team to move fast without sacrificing quality. He made the process of building and updating pages fun by creating templates and reusable components.
FAQ
Light, on surface
Do we need everything figured out before we talk?
No. Most clients arrive with a problem and a rough goal. The first conversation is about whether we can help.
Can you work with our existing stack?
Usually. We work in Astro, Next.js, Sanity, WordPress, and Webflow, and we will tell you when a migration is the better call.
If the answer is no, we say so on the first call.
Dark, on surface
Do we need everything figured out before we talk?
No. Most clients arrive with a problem and a rough goal. The first conversation is about whether we can help.
Can you work with our existing stack?
Usually. We work in Astro, Next.js, Sanity, WordPress, and Webflow, and we will tell you when a migration is the better call.
If the answer is no, we say so on the first call.
Native details with a currentColor outline, so it reads on any band. Questions are headings; answers are Markdown; the component emits FAQPage JSON-LD. Do not use a raw wa-accordion on a page; its panel fill is a Web Awesome surface token that disappears on tinted backgrounds.
Lead capture and trust
Thanks. Pick a time to talk.
We reply within one business day. If you want to skip the wait, grab a slot below.
Loading the calendar, or book a 30-minute intro directly.
One lead form for the whole site. It posts through submitLead, calls trackLead(source) on success, and mounts the Cal.com embed in place. Landing pages pair it with the Astro partner badge, client logos, and a Lighthouse score. Submitting here sends a real lead tagged design-system.