DNSK.WORK
Design System
The design language behind DNSK.WORK – foundations, reusable elements, the geometric sign system, and the components we build pages from. One restrained palette, one typeface, hairline geometry. This is the source of truth; keep new work in line with it.
Foundations
The fixed decisions everything else inherits: one palette, one typeface, one spatial rhythm.
Colour
A deliberately narrow palette – ink on cream, grey for support, hairline lines. No accent colour; restraint is the brand.
Typography
Switzer throughout, weight 500. Headings carry tight negative tracking; body stays neutral.
tracking −1.76px
tracking −1.2px
tracking −0.4px
#747474
tracking 0.02em
Spacing & layout
A 16px outer frame around a white container (8px radius). Section padding steps 96 / 64 / 48 / 32px down the breakpoints; grid gaps 24 / 16px. Max content width 1440px.
Brand mark & icons
The DNSK glyph and the small icon set. The mark is monochrome only – ink on light, cream on dark – never recoloured, stretched or boxed.
The mark
Icons
A tiny, consistent set – 16px viewBox, currentColor, weight matched to the mark.
Elements
The reusable primitives. Note: today every block re-declares its own button – the canonical versions below should replace those over time.
Buttons
Dark pill for primary actions, light pill (hairline) for secondary. 12×16 padding, 4px radius, Switzer 500; the arrow nudges 4px on hover.
Links
Inline links use the global .text-link; external links get the shared new-tab / rel attributes via external_links().
An inline text link inside a sentence, and an external link ↗.
Form fields
Inputs, textareas, selects and checkboxes share one style: white fill, hairline border, 4px radius, ink focus ring.
Badges, eyebrow & index
Small typographic markers used across the site.
Divider
A single hairline at #acacac separates sections.
Signs
A system of square-framed, hairline signs derived from the DNSK mark – one grey weight, never filled, each deterministic and reproducible. Signs flagged USED are reserved for a specific service or page; do not reuse them elsewhere.
Reserved – /services signs
These six are locked to the six services. Each was chosen so the sign’s meaning matches the service. Do not reuse them anywhere else on the site; pick any unmarked sign below instead.
Reserved – /services/product-design signs
Four entry-scenario signs locked to the Expertise section of the Product Design service page (the first item, Product Health Check, renders a photo – no sign). Drawn from the unreserved library; each matches the scenario’s meaning. Do not reuse them elsewhere.
Reserved – /services/ux-ui-design signs
Four entry-scenario signs locked to the Expertise section of the UI\UX Design service page (the first item, UI\UX Product Audit, renders a photo – no sign). Do not reuse them elsewhere.
Reserved – /services/ux-design signs
Two entry-scenario signs locked to the Expertise section of the UX Design service page (the first item, UX Product Audit, renders a photo – no sign). Do not reuse them elsewhere.
Reserved – /services/saas-website-design signs
Four entry-scenario signs locked to the Expertise section of the SaaS Web Design service page (the first item, Website Audit, renders a photo – no sign). Do not reuse them elsewhere.
Reserved – /services/saas-product-design signs
Two entry-scenario signs locked to the Expertise section of the SaaS Product Design service page (the first item, Users don’t get past signup, renders a photo – no sign). Do not reuse them elsewhere.
Reserved – /services/startup-web-design signs
Three entry-scenario signs locked to the Expertise section of the Startup Web Design service page (the first item, Pre-seed no designer, renders a photo – no sign). From the generated set. Do not reuse them elsewhere.
Library
Every sign in the system, reserved first then free. Names describe each sign’s composition; signs flagged USED are reserved (see the sections above).
Motion
Motion is quiet and functional – short, eased, never decorative. Hover hints at action; nothing bounces or spins.
Transitions
- Colour / background:
0.2s ease - Transform (arrows, lift):
0.2s ease - Larger reveals:
0.3s ease
Signature moves
- CTA arrow nudges
translateX(4px)on hover - Cards shift border to ink + cream fill on hover
- Buttons darken/lighten one step on hover
Reveal-on-scroll (AOS) is available but used sparingly; default to no entrance animation unless a section clearly benefits.
Voice & copy
Plain, direct, a little dry. We name the problem before the service. Sentence case, no hype, no filler.
Do
- Use the en dash
–in titles, headings and copy - Write in sentence case
- Lead with the problem, then the fix
- Keep it concrete and short
Don’t
- Never use the em dash
— - Never use the word “piece” – say “article” or “guest post”
- No buzzwords, no filler, no mass-generated content
- Don’t over-capitalise headings
Principles
Why the system looks the way it does.
/ 01
Restraint is the brand
One palette, one typeface, one grey hairline. No accent colour to hide behind – the work carries it.
/ 02
Geometry, not decoration
Marks are built from straight lines on a grid. Every sign is deterministic and reproducible, never drawn by feel.
/ 03
Meaning over ornament
Each sign is chosen so its shape matches what it stands for. Nothing is placed just to fill space.
/ 04
One source of truth
Components live as real blocks; this page documents them. Change the block, not a copy.
/ 05
Quiet motion
Movement only to signal action. Short, eased, easy to miss – that’s the point.
/ 06
Say the hard part
Copy names the real problem first. Plain and a little dry beats polished and empty.