Cobalt Ink
One ink only: every line, word and shape printed in cobalt blue on bright paper.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A single-colour print job on the web. Every element — type, rules, buttons, illustrations — is printed in one deep cobalt on bright off-white, like a risograph or a blueprint. A characterful serif carries headlines; tints of the same blue create all hierarchy. Disciplined, fresh and instantly recognisable.
Cobalt Ink is a one-colour print job applied to the whole interface. It borrows from risograph printing, cyanotype and blueprint drawings, and the centuries-old tradition of cobalt-painted ceramics. Every element on the page — text, lines, buttons, ornaments — is a single deep cobalt or a tint of it on bright paper. Hierarchy comes from size, weight and tint, never from a second hue. The constraint is the identity: anyone should recognise the brand from one square inch of any page.
Principles
- One ink: cobalt (#1B2DA6) and its tints. No second hue, ever.
- Print logic — hard offset shadows and halftone dots, not soft light.
- Tints for hierarchy: 100% for type, 40% for rules, 20% for fills.
- A characterful serif for headlines, a clean sans for reading.
- Small star ornaments as a printer's flourish, sparingly.
Motion
Cards and buttons cast a hard 4px cobalt offset that collapses as they shift down-right on hover, like a stamp being pressed. Headlines fade up with slight misregistration — a 2px tinted ghost that settles into place.
Do & don't
Do
- ✓ Use only cobalt and its tints for every element.
- ✓ Give buttons and cards hard offset shadows in a light cobalt tint.
- ✓ Use halftone dots behind the hero.
Don't
- ✕ Don't introduce black, grey or a second colour.
- ✕ Don't use full-colour photography.
- ✕ Don't use soft or blurred shadows.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 359 lines of DESIGN.md in total.
More like this
All Swiss & Minimal →
Nordic Calm
No. 031Scandinavian winter light: cool greys, frost blue, soft corners and a lot of air.
Pure Mono
No. 032Black on white, nothing else: a grotesk, thick rules and a bento of pure contrast.
Swiss Poster
No. 033An International Style concert poster: strict grid, flush-left grotesk, red and black.
Bauhaus Primary
No. 051Bauhaus workshop primaries: circle, square, triangle in red, yellow and blue on bone.
Functionalist Sixties
No. 0531960s functionalist hardware: warm white housings, one orange switch, a grid of controls.
Museum Label
No. 054The wall label beside the object: tiny precise type, vast whitespace, catalogue numbers.