Krellix
Clinical and engineered terminal aesthetic. Deep charcoal backgrounds pair with monospaced display typography and precise teal accents to evoke a focused developer tool.
Visit siteColour
Typefaces
- Display
- JetBrains Mono
- Body
- Poppins
- Mono
- JetBrains Mono
- Source
- self_hosted
- Scale
- 12 · 14 · 16 · 18 · 20 · 36
Layout
- Grid
- 12 columns
- Container
- 1173px
- Spacing base
- 4px
- Radius
- 8px · 12px
Capture
- Category
- ai
- Sections
- 12
- Captured
- 2026-08-29
- Rhythm
- dark x12
Type rules
- display headlines use monospaced styling in sentence case
- eyebrow labels rendered in uppercase monospaced type
- body text set in clean geometric sans-serif at 66 characters per line
Colour rules
- teal accent used exclusively for eyebrow tags and focal highlights
- uniform dark backgrounds broken only by subtle dark surface containers
Voice rules
- use developer-centric terminology
- keep instructional headers concise
Holds it together
- render all section eyebrows in uppercase monospaced teal
- apply monospaced font treatment to all primary headings
- frame product mockups in rounded dark cards with minimal hairline borders
Contrast
Type, measured
- Body
- 14px / 1.7
- Measure
- 66 characters
- Display
- 40px / 1.2
- Tracking
- 0em display
- Scale ratio
- 1.30
Voice
- Tone
- technical, direct
- Sentences
- short
- Person
- second
- Vocabulary
- plain
- Calls to action
- join, create, set up
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 6 items
- Length
- 6.8 screens
Sections in page order
3 marked strong · 12- 00
hero
Engineered dark-mode developer hero combining segmented pill navigation with clean monospaced typography and a sharp teal accent.
- Mood
- clinical + raw
- Layout
- 12 col · stacked · dense
- 01
showcase
Dark technical product mockup with monospace headers and an overlaying cookie consent banner.
- Mood
- clinical + raw
- Layout
- 14 col · stacked · dense
- 02
feature grid
StrongDark three-step technical workflow framed by textured digital scanline artwork and centered monospaced headings.
- Mood
- clinical + raw
- Layout
- 6 col · grid · balanced
- 03
other
An empty dark dot-grid spacer creating breathing room between page sections.
- Mood
- quiet + clinical
- Layout
- 12 col · full bleed · airy
- 04
feature
StrongA dark, clinical developer-style feature section pairing an agent-roster UI mockup with stark monospaced typography.
- Mood
- clinical + bold
- Layout
- 6 col · split · balanced
- 05
other
A silent, dark background spacer with a faint dot grid pattern creating atmospheric breathing room.
- Mood
- quiet + clinical
- Layout
- 12 col · full bleed · airy
- 06
feature
Crisp and focused dark-mode feature section pairing technical monospace accents with a layered AI agent interface mockup.
- Mood
- clinical + quiet
- Layout
- 12 col · split · balanced
- 07
other
An empty dark spatial divider featuring a subtle, technical dot-matrix grid background.
- Mood
- clinical + quiet
- Layout
- 12 col · full bleed · airy
- 08
feature
Minimal dark feature highlight with monospaced typography and a subtle sync pill bridging Apple and Windows ecosystems.
- Mood
- clinical + quiet
- Layout
- 6 col · centered · airy
- 09
other
A quiet, dark spacer featuring a minimalist dot grid pattern that introduces subtle technical texture between content sections.
- Mood
- quiet + clinical
- Layout
- 12 col · full bleed · airy
- 10
faq
StrongDark, technical FAQ section structured as an open two-column list pairing monospace questions with restrained sans-serif answers.
- Mood
- clinical + quiet
- Layout
- 12 col · split · balanced
- 11
footer
A dark, highly structured multi-column footer grounded by security compliance badges and social links.
- Mood
- clinical + quiet
- Layout
- 13 col · grid · balanced
