Framer

Deep black surfaces with high-precision UI mocks and glowing blue accent strokes. It feels like an advanced technical cockpit, combining understated typography with live agent execution terminals.

bold clinical quiet editorial luxurious

Visit site

Colour

Background#000000

Text#ffffff

Accent#0099ff

Surface#111111

Muted#999999

Typefaces

Display: Inter
Body: Inter
Mono: Input Mono Regular
Source: google
Scale: 10 · 12 · 14 · 16 · 18 · 20

Layout

Grid: —
Container: —
Spacing base: 5px
Radius: 8px · 12px

Capture

Category: tools
Sections: 9
Captured: 2026-08-29
Rhythm: dark x9

Type rules

display headings use tight negative tracking at -0.04em
body text sits at 18px with line-height 1.35 and max measure around 73 characters
code and interactive interface prompts use monospace font

Colour rules

pure black background (#000000) dominates the canvas
electric blue (#0099ff) is reserved for interactive states and focus glows
muted grey (#999999) used for secondary descriptive metadata and stats

Voice rules

state capability directly without promotional puffery
pair tool actions with short terminal-style summaries

Holds it together

maintain full black backgrounds across every section
frame product interface previews with subtle dark surface borders or neon glows
pair every primary feature heading with an inline contextual CTA

Contrast

text on background21.0:1 AAA

muted text on background7.4:1 AAA

text on surface18.9:1 AAA

accent on background7.0:1 AAA

background on accent7.0:1 AAA

Type, measured

Body: 18px / 1.35
Measure: 73 characters
Display: 54px / 1
Tracking: -0.04em display
Scale ratio: 1.32

Voice

Tone: confident, concise, direct
Sentences: short
Person: second
Vocabulary: technical
Calls to action: start, get, download

Built with

Builder: framer
Framework: —
Motion: —
WebGL: —
Nav: top_bar, 10 items
Length: 12.1 screens

Sections in page order

3 marked strong · 9

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

00
hero
A stark, high-contrast dark hero section dominated by sharp confident typography and crisp geometric buttons.
Mood
bold + clinical
Layout
15 col · asymmetric · airy
Open section →
01
video
Dark software mockup interface with glowing electric blue borders framing an interactive canvas and AI chat assistant panel.
Mood
clinical + dreamy
Layout
16 col · split · dense
Open section →
02
statement
Monochrome dark section pairing an understated client logo grid with a restrained statement headline and action button.
Mood
quiet + clinical
Layout
16 col · stacked · airy
Open section →
03
feature
Strong
A dark, clinical feature sequence pairing refined UI canvas previews and floating 3D elements with understated product copy.
Mood
clinical + quiet
Layout
16 col · stacked · balanced
Open section →
04
feature
Strong
Technical developer interface mockup presented against a deep black canvas with stark terminal syntax highlights and precise typographic control.
Mood
clinical + raw
Layout
2 col · split · dense
Open section →
05
feature grid
Strong
A dark, precision-engineered bento grid showcasing rich product UI modules and metrics.
Mood
clinical + quiet
Layout
11 col · grid · dense
Open section →
06
showcase
A refined portfolio showcase displaying distinct case study cards across tactile desk photography, fashion editorial, and surreal landscape imagery.
Mood
editorial + luxurious
Layout
12 col · grid · dense
Open section →
07
showcase
Sleek dark showcase section pairing an understated confidence headline with cinematic full-bleed website cards.
Mood
luxurious + bold
Layout
1 col · stacked · airy
Open section →
08
showcase
Sleek dark-mode customer story cards presenting tech brand logos with understated directional text links.
Mood
clinical + quiet
Layout
4 col · grid · balanced
Open section →