DNSK.WORK
Design System
The design language behind DNSK.WORK – foundations, reusable elements, the geometric sign system, motion and voice. 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. Red (#ef4444) appears only on forms, for the required star and errors.
Typography
Switzer throughout, weight 500; 400 only for breadcrumbs, testimonial roles and form values. Headings carry tight negative tracking and sit on a line height of 1; body stays neutral. Sizes as rendered at 1440px, with the phone size where it changes.
tracking −0.64px · line 1
phones 24px · −0.48px
tracking −0.96px · line 1
phones 20px · −0.8px
tracking −0.8px · line 1
card titles, FAQ questions
tracking −0.96px · line 1.15
phones 20px · −0.8px
line 1.2
line 1.1 · #747474
Spacing & layout
A 16px outer frame (8px on phones) around a white container with 8px corners. Inside it, 96px top and bottom by 48px at the sides on desktop, 64 by 32 below 1440px, and 32 by 24 on phones (48 by 24 for the expertise block and the CTA banner). Grid gaps 24 / 16px. Max 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
One global style, .text-link (and .prose-links a): no underline, a tint band (#e2ddd7) behind the lower third of the letters that rises to the middle on hover in 0.25s. On ink the band is #3a3a3b. Copy from the CMS gets the class from external_links(), which also opens links that leave dnsk.work in a new tab with rel set; links written by hand need the class added. Never style a link per block.
An inline text link inside a sentence – hover it to see the band rise.
The same text link on ink, as in the footer and the dark hero.
Form fields
As on the contact form. Fields are 36px tall with 14px text, a #e5e5e5 border with a faint shadow and 4px corners; the border turns ink on focus, with a 2px ink ring for keyboard focus. Labels are 14px with a red star when required. Choices use a custom dropdown – a button, a list, a check on the chosen option – never a native select. An error gives the field a red border and a pale red fill, with the message underneath. The service list holds every published page under /services, in their order in the admin page tree. Every form ends with the consent box, and a Turnstile check before it sends.
The email field must be a valid email address.
Badges, eyebrow & index
The index numbers things in order – / 001 on cards and principles, / 01 on FAQ questions. The eyebrow and the USED pill belong to this page only.
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 three are locked to the three service cards on / and /services – Products from scratch, Fixing existing interfaces, Websites from scratch. Each was chosen so the sign's meaning matches the card. Do not reuse them anywhere else on the site; pick any unmarked sign below instead.
Motion – springs. On the service cards these signs behave like objects. Each layer hangs on a spring around the sign's centre: moving the pointer across a card pushes the layers by its speed, inner layers lighter so they swing further, and the sign leans up to 10° toward the pointer. On leave it rings down in two or three swings and rests exactly as drawn. The frame never moves and clips whatever turns inside it. Without hover (phones) each sign swings once as it scrolls into view; with reduced motion the springs are off.
Light. The pointer is a lamp: the lines nearest to it deepen from grey to ink and thicken from
1 to 1.4, with a soft falloff over a third of the sign, and they follow the layers as they swing. On leave they fade
back in 0.15s. It is emphasis, not motion, so it stays on with reduced motion; it needs a pointer, so phones don't get it.
This is the only place a sign changes colour or weight – everywhere else signs stay grey, hairline and unfilled.
Source: resources/js/service-signs.js, hooked by data-service-sign on the card icon;
only the services block uses it.
Reserved – /services/product-design signs
Three 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
Three 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
Three entry-scenario signs locked to the Expertise section of the SaaS Website 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.
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. The one place things swing is the service card signs, and they always come back to rest exactly as drawn.
Transitions
- Hover colour, background, borders:
0.15s–0.2s ease - Transform (arrows):
0.2s ease - The link band:
0.25s ease - Larger moves (the glyph turn, 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
- The three brand glyphs in a block header turn 20° on hover
- Service card signs swing on springs and catch the light – see Signs
There is no entrance-animation library. Where something reacts to scrolling it uses an IntersectionObserver, runs once or pauses when off screen, and is skipped for reduced motion: the testimonials advance only while in view, /now reveals its sections as they arrive, and the card signs swing once on phones. 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
–(U+2013) in titles, headings and copy - Use straight apostrophes
'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
—(U+2014) - Never use curly apostrophes
’(U+2019) - 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 in the code; this page records the rules they follow. Change the block, not a copy.
/ 05
Quiet motion
Movement only to signal action or to answer the hand. Short, eased, and it always comes back to rest.
/ 06
Say the hard part
Copy names the real problem first. Plain and a little dry beats polished and empty.