Lance

High-contrast developer interface pairing deep dark backgrounds with vivid magenta accents. Structured UI simulation cards and precise monospace metadata establish an engineered, capable atmosphere.

bold clinical

Visit site

Colour

Background#101013

Text#ffffff

Accent#ff1f73

Surface#16171b

Muted#ff97c2

Typefaces

Display: Inter
Body: Inter
Mono: Geist Mono
Source: self_hosted
Scale: 10 · 12 · 14 · 15 · 18 · 22

Layout

Grid: 16 columns
Container: 1408px
Spacing base: 4px
Radius: 8px · 16px

Capture

Category: tools
Sections: 6
Captured: 2026-08-30
Rhythm: dark x6

Type rules

display type tightly tracked in sentence case
eyebrows and command tags in uppercase monospace

Colour rules

magenta accent reserved for primary actions and active states
cards sit on dark plum or dark slate surfaces against near-black

Voice rules

lead with direct developer outcomes
anchor claims with command-line or interface examples

Holds it together

apply magenta #ff1f73 strictly to primary interactive elements and focus highlights
display feature workflows inside bordered mock UI cards
format system labels and terminal snippets in monospace uppercase

Contrast

text on background19.0:1 AAA

muted text on background9.5:1 AAA

text on surface17.9:1 AAA

accent on background5.2:1 AA

background on accent5.2:1 AA

Type, measured

Body: 15px / 1.63
Measure: 109 characters
Display: 60px / 1.04
Tracking: -0.03em display
Scale ratio: 1.41

Voice

Tone: technical, declarative, confident
Sentences: short
Person: second
Vocabulary: technical
Calls to action: get, add, install

Built with

Builder: —
Framework: next
Motion: —
WebGL: —
Nav: top_bar, 4 items
Length: 6.2 screens

Sections in page order

3 marked strong · 6

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

00
hero
A sleek dark-mode developer tool hero with vibrant magenta accents and a conversational UI demonstration.
Mood
bold + clinical
Layout
14 col · split · balanced
Open section →
01
feature grid
Strong
Dark, precise three-step technical workflow section with subtle pink accent labels and a terminal command snippet.
Mood
clinical + quiet
Layout
3 col · grid · balanced
Open section →
02
feature grid
Strong
A dark developer tool feature grid showcasing simulated Apple workflow interfaces inside clean structured cards.
Mood
clinical
Layout
3 col · grid · balanced
Open section →
03
faq
Strong
A dark, disciplined FAQ section pairing a prominent left-aligned heading with structured, border-separated technical answers.
Mood
clinical + quiet
Layout
16 col · split · balanced
Open section →
04
pricing
Minimalist dark single-plan pricing card anchored to the left with vibrant magenta accents against an expansive empty background.
Mood
clinical + quiet
Layout
14 col · asymmetric · airy
Open section →
05
cta
Vibrant magenta call-to-action banner resting above a dark minimal footer with clean modern typography.
Mood
bold + playful
Layout
12 col · stacked · balanced
Open section →