1 · Strategy
Define the goal. Map the user journey. Set a measurable bar.
- Discovery interviews
- Audience research
- Success metrics
The Dinko Design System
Built on a system. Not on chance.
Every page on dinkodesign.com — and every page we build for clients — is assembled from the same library of tokens, textures, and patterns. This page is the reference.
01 · Tokens
Color
Three families: purple (brand), lime (accent), and the 5 pillar colors. Backgrounds and foregrounds are subtly purple-shifted greys.
Purple — brand
--purple-50
--purple-200
--purple-300
--purple-400
--purple-500
--purple-600
--purple-700
--purple-900
Lime — accent
--lime-300
--lime-400
--lime-500
--lime-600
Trust pillar colors
--pillar-brand
--pillar-visibility
--pillar-conversion
--pillar-trust
--pillar-authority
02 · Tokens
Typography
New Order for display, Sinter for body. Numbers come from our --text-* scale; line-heights tightened for headlines, relaxed for body.
font-heading — New Order
The headline goes here
Body — Sinter
Body copy uses Sinter at a fluid root size of clamp(15px, 1.05vw, 20px). Line-height defaults to 1.6. Reads cleanly on dark backgrounds.
03 · Surfaces
Background textures
9 utility classes + 4 surface tokens, all opt-in. Stack them by composing class names: bg-grid bg-radial cat-web.
bg-grid
bg-grid-sm
bg-dots
bg-lines
bg-radial
bg-noise
bg-mesh
bg-scan
bg-rings
bg-stripe
bg-panel
bg-subtle
04 · Components
Buttons
Three variants. Primary uses the purple gradient + glow on hover. Outline mirrors with a transparent background. Ghost is for low-emphasis nav.
05 · Components
Tags & pillar chips
One <Tag> primitive, 5 pillar color variants matching the Trust System.
Brand FoundationVisibility EngineConversionTrust AutomationMuted
06 · Primitives
Eyebrow & SectionHead
Two of the most-reused primitives. SectionHead supports inline <em> for gradient highlights.
Eyebrow label
<Eyebrow>Eyebrow label</Eyebrow>
Eyebrow
The headline goes here.
A supporting paragraph that adds context.
07 · Components
Callouts
Three variants: default, lime (success), purple (brand emphasis).
Default callout
Standard styling for inline notes and supporting context.
Lime variant
For success states, positive signals, or featured items.
Purple variant
For brand-emphasis moments — premium offers, featured content.
08 · Content blocks
StatStrip
Inline stat bar with vertical hairlines. Numbers use the purple text gradient.
250+
Clients served
20+
Years experience
5.0
Star Google rating
7+
Industry awards
09 · Content blocks
Deliverables
Card grid with icon tile + numbered title + body + checklist. Used for pain points, deliverables, services-at-a-glance, anywhere a 3-up enumeration helps.
2 · Design
Wireframes → hi-fi → handoff. Every state, every breakpoint.
- Component library
- Design tokens
- Interaction specs
3 · Build
Production-grade code, fast load times, accessible by default.
- Next.js / Webflow
- Lighthouse 95+
- WCAG 2.1 AA
10 · Content blocks
ProcessList
Numbered horizontal/vertical process steps connected by a hairline.
01
Discovery
Interviews + research
Week 102
Wireframes
Structure first
Week 203
Design
Hi-fi in Figma
Weeks 3–404
Build
Code + CMS
Weeks 5–705
Launch
DNS, redirects, training
Week 811 · Content blocks
PricingTable
3-tier pricing card layout. Defaults to hidePrice=true (showing just tier kickers) per the site-wide rule.
Start Small
Launch
Small projects, quick wins.
- Up to 8 pages
- Webflow build
- SEO foundation
- 90-day support
Growth
Mid-sized engagements.
- Up to 20 pages + CMS
- Booking integration
- A/B testing
- 6 month support
Enterprise Ready
Scale
Enterprise-grade builds.
- Next.js / headless
- Unlimited pages
- Multi-location
- 12 month support
12 · Content blocks
WhyComparison
Side-by-side "us vs. them" with lime checks on the left, red X marks on the right.
The Dinko approach
- Strategy before pixels
- Modern stacks (Next.js / Webflow)
- Core Web Vitals all green
- CMS training included
The typical agency
- Templates dressed up as custom
- WordPress + 30 plugins
- 7-second mobile load times
- Disappear the day you go live
13 · Patterns
Review card
★ glyph rating + Google badge corner + opening quote mark in purple + avatar + name + meta. Used on every page that shows testimonials.
G
“Sample testimonial copy. Verbatim Google reviews live in the shared testimonials database and get rendered with this exact pattern site-wide.
AB
Author Name
Company · Location
14 · Components
Swiper
Touch + drag + keyboard carousel built on Embla. Used on mobile for portfolio, reviews, and anywhere a dense desktop grid would crowd a phone. Progress dots turn purple on the active slide.
15 · How it fits together
Three layers, one direction of data flow.
Every page on this site is built from the same three layers: data → template → patterns.
Patterns are the dumb building blocks above (Eyebrow, SectionHead, StatStrip, Deliverables, ProcessList, PricingTable, etc.). Templates assemble the patterns in a fixed order (one for service pages, one for industries, one for areas, one for the homepage). Data files supply the actual content.
Adding a new service page is a single .ts file. Reordering homepage sections is a single array shuffle. Changing a stat or a testimonial in one place updates every surface that references it.
When we move to a CMS down the road, the data files swap for an async loader against Sanity / Contentful / Keystatic. Templates and patterns don't change. That's by design.
Want this kind of rigor on your project?
Free 30-min audit. We'll show you what's broken on your current site and how the system would fix it.