123done

Engineered, clinical, and quiet. Deep monochrome surfaces framed with precise hairline borders and sharp isometric UI renders create a high-precision digital workshop aesthetic.

quiet clinical

Visit site

Colour

Background#0b0b0f

Text#ffffff

Accent#3259e8

Surface#12131a

Muted#696c80

Typefaces

Display: Manrope
Body: Manrope
Mono: Roboto Mono
Source: self_hosted
Scale: 13 · 15 · 17 · 21 · 24 · 54

Layout

Grid: 8 columns
Container: 1140px
Spacing base: 8px
Radius: 8px

Capture

Category: tools
Sections: 7
Captured: 2026-08-30
Rhythm: dark x7

Type rules

display type in sentence case with no added letter-spacing
section category labels and metadata numbers set in uppercase monospace
body measure kept strictly under 60 characters for maximum scanning efficiency

Colour rules

deep near-black background throughout with slightly lifted dark surfaces for cards
cobalt blue accent reserved solely for sale discount badges and primary highlights
subtle hairline border strokes separate cards and structural sections

Voice rules

terse functional descriptions without promotional hyperbole
every card includes exact format tags or numeric item counts

Holds it together

frame every digital product card in a lifted dark surface with a subtle hairline stroke
place uppercase monospace category headers with trailing divider lines above content modules
use numeric superscripts and pill tags to state exact contents or prices on each card

Contrast

text on background19.6:1 AAA

muted text on background3.8:1 AA Large

text on surface18.5:1 AAA

accent on background3.5:1 AA Large

background on accent3.5:1 AA Large

Type, measured

Body: 21px / 1.36
Measure: 57 characters
Display: 54px / 1.2
Tracking: 0em display
Scale ratio: 1.27

Voice

Tone: declarative, precise
Sentences: short
Person: second
Vocabulary: technical
Calls to action: view, browse, level up

Built with

Builder: —
Framework: nuxt
Motion: —
WebGL: —
Nav: top_bar, 7 items
Length: 2.6 screens

Sections in page order

3 marked strong · 7

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Sparse dark header combining a quiet top navigation bar with an airy, asymmetric headline statement.
Mood
quiet + clinical
Layout
1 col · split · airy
Open section →
01
showcase
A sleek dark product showcase card pairing feature bullet points with layered isometric UI component previews.
Mood
clinical + quiet
Layout
16 col · split · dense
Open section →
02
showcase
Strong
Sleek dark-mode digital product cards featuring angled UI mockups, precise typography, price badges, and format tags.
Mood
clinical + quiet
Layout
8 col · grid · balanced
Open section →
03
other
Strong
A quiet, clinical divider strip featuring a subtle monospace category label and a hairline separator rule across a deep dark background.
Mood
clinical + quiet
Layout
8 col · full bleed · airy
Open section →
04
feature grid
A clean dark-mode category directory structured into discrete modular cards with precise counts and mono labels.
Mood
clinical + quiet
Layout
2 col · grid · balanced
Open section →
05
feature grid
Minimal dark-mode category cards with precise index counters and muted descriptive copy.
Mood
clinical + quiet
Layout
8 col · grid · balanced
Open section →
06
footer
Strong
A minimal, clean dark footer organized into precise typographic columns beneath a subtle top divider line.
Mood
quiet + clinical
Layout
6 col · grid · balanced
Open section →