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.
Reserved – /about signs
Three signs locked to the Principles block on the About page, one per item. From the generated set; each follows the established vocabulary (cored = solid centre, pinwheel = motion, compass = wayfinding). Do not reuse them elsewhere.
Reserved – /how-we-work signs
Six signs locked to the Principles block on the How we work page, one per item. From the generated set. Do not reuse them elsewhere.
Reserved – /free-ux-review signs
Three signs locked to the Principles block on the Free UX Review page, one per item. 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.