Aurora Spectrum
#c7b8f5Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
Langbase
langbase.comWebsite preview
The design language
Langbase is a midnight developer console where a single chromatic aurora is the only color in an otherwise pure dark-gray world. The canvas is #232324 — a near-black charcoal — structured by hairline borders at #232324 and #5c5c61 that create an architectural blueprint grid visible behind the hero. The interface reads as a terminal: GeistSans provides clean geometric UI, GeistMono adds the developer identity at display sizes, and CTAs are achromatic pills (white-on-dark) so the multi-hue gradient — peach, pink, violet, mint, sky — becomes the sole emotional accent. Components stay flat and lightweight: no decorative shadows, no colorful buttons, no rounded-everything softness. The only color is the aurora, and it appears as fragmented horizontal bars beside the hero — decorative spectacle, never functional chrome.
Color palette
accent
neutral
Console Charcoal
#232324Dominant page canvas, structural hairline borders, and the visible grid backdrop behind the hero. The single most-used color in the system; defines the near-black field that everything else sits on
Bone White
#fafafaPrimary text, primary action fill, and the bright pole of the system. White-on-charcoal carries all the hierarchy; nothing else is allowed to compete
True Black
#000000Deepest surface tone for the darkest interactive states and the reverse-text base inside white CTA buttons. Used sparingly — never as the page background
Off-White
#ebecedSlightly warmer white for secondary text and subtle emphasis where #fafafa would feel too clinical
Mute Gray
#a1a1aaMuted helper text, nav links, and secondary icon strokes. The readable-but-quiet gray that supports body copy without claiming focus
Wire Gray
#5c5c61Hairline borders, icon strokes, and the dividing lines between content sections. The 1px wire that holds the console together
Recess Black
#181818High-contrast neutral action fill for primary buttons on light surfaces.
Nav Ink
#0e0e10Navigation bar background — the only surface darker than the canvas, anchoring the top of the page as a distinct horizontal band
Smoke
#454546Muted body text and the mid-tone of the neutral scale. Quieter than #a1a1aa for de-emphasized copy
Ash
#696970Quietest readable gray for tertiary metadata and timestamps
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-xl
72px · 500 · 72 · -21.6px trackingThe quick brown fox jumps
display
60px · 500 · 60 · -18px trackingThe quick brown fox jumps
heading-lg
48px · 600 · 56 · -1.2px trackingThe quick brown fox jumps
heading
20px · 400 · 28 · -0.5px trackingThe quick brown fox jumps
subheading
18px · 400 · 28 · -0.45px trackingThe quick brown fox jumps
body
16px · 400 · 24 · -0.4px trackingThe quick brown fox jumps
body-sm
14px · 400 · 20 · -0.35px trackingThe quick brown fox jumps
text-13
13px · 500 · 1.52The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
GeistSans
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 14, 16, 18, 20, 48
- Line height
- 1.0–1.75
- Letter spacing
- -0.025em at all sizes (≈ -0.3px at 12px, -1.2px at 48px)
- Fallback
- Inter, system-ui, -apple-system
- Features
- "ss01" on, "cv11" on
All UI text — navigation, buttons, body copy, and subheadings. Custom geometric sans with -0.025em tracking baked in; weight 500 carries most of the voice. The maximum sans size (48px) is reserved for the hero headline, after which GeistMono takes over for display.
Additional typeface
GeistMono
- Weights
- 400, 500
- Sizes
- 12, 13, 16, 60, 72
- Line height
- 1.0–1.5
- Letter spacing
- -0.3em at 60-72px (≈ -18px to -21.6px); tight tracking at smaller sizes
- Fallback
- JetBrains Mono, IBM Plex Mono, ui-monospace
Developer-identity display type and inline code/numeric emphasis. The extreme -0.3em letter-spacing at 60-72px collapses the letterforms into dense blocks of glyph — a signature choice that reads as 'terminal' rather than 'poster'. Used for large statistics, code tokens, and the largest display moments.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
4pxcards
12pxicons
4pxinputs
4pxbuttons
9999pxlarge-buttons
100pxSpacing scale
2px4px8px10px12px15px16px20px24px32px40px48px80px112px130px135px137px160pxGuidelines
Do
- Use 9999px radius for all primary and ghost buttons — the pill is the system's shape signature
- Apply -0.025em letter-spacing to every GeistSans size and -0.3em to GeistMono display sizes — tracking is part of the brand
- Anchor every page on the Console Charcoal #232324 canvas with Nav Ink #0e0e10 reserved exclusively for the top navigation band
- Use the aurora gradient only as fragmented horizontal bars in hero/feature sections — never as a button fill, text color, or container background
- Hold the 4px spacing grid: 4, 8, 12, 16, 24, 32, 40, 48, 64 — no exceptions
- Express depth through #181818 recessed surfaces rather than shadows — inputs and dark buttons press into the canvas, not float above it
- Pair GeistMono 60-72px with -0.3em tracking for the largest display moments to read as terminal, not poster
Don’t
- Don't introduce any chromatic color for buttons, links, or icons — the palette is 99% achromatic; the aurora is the only exception and it is decoration only
- Don't use shadows beyond the single 1px whisper on the primary CTA — depth comes from tonal recess, not elevation
- Don't use #000000 as a page or section background — it is reserved for the deepest interactive states and inverted text
- Don't break the 4px grid or invent radii outside 4, 12, 100, and 9999px — the radius scale is closed
- Don't use the aurora gradient as text fill, border, or icon stroke — it appears exclusively as fragmented horizontal bars
- Don't introduce a second accent color, a brand red, or a success green — the system has no chromatic functional palette; state communication happens through weight and opacity
- Don't use multi-color or filled icons — outlined 1.5px mono icons in white or gray only
Components
Primary Pill CTA
The only filled action button in the systemBone White #fafafa background, True Black #0e0e10 text, fully rounded at 9999px. Padding 8px 16px (compact) or 10px 20px (comfortable). GeistSans 14px weight 500. Carries the single subtle shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px. No hover state changes color — it stays the system anchor.
Ghost Outline Button
Secondary action that defers to the primaryTransparent background, 1px Wire Gray #5c5c61 border, Bone White #fafafa text, 9999px radius. Same padding scale as the primary pill (8px 16px or 10px 20px). GeistSans 14px weight 500. Sits beside the primary CTA as the quieter option — outlined, never filled.
Sticky Navigation Bar
Top-of-page anchor that persists on scrollNav Ink #0e0e10 background (distinctly darker than the canvas), 1px Console Charcoal #232324 bottom border. Height ~56px. Horizontal flex: logo left, link cluster center, Primary Pill CTA right. GeistSans 14px weight 500 for links in Mute Gray #a1a1aa.
Announcement Strip
Time-sensitive message above or below the navFull-width band, 1px Console Charcoal #232324 border on all sides, centered GeistSans 12px text in Mute Gray #a1a1aa. Small leading icon (4px radius, 16px). 8px vertical padding. Acts as a quiet ticker, not a banner.
Hero Grid Backdrop
Architectural texture behind the hero1px Console Charcoal #232324 lines forming a visible coordinate grid across the hero section. Creates a 'blueprint' or 'IDE canvas' feel — the grid is the visual texture, not a gradient or image. Sits behind both the headline and the aurora bars.
Aurora Gradient Bars
The single decorative spectacle on the pageFragmented horizontal bars (8px height, varying widths) filled with the multi-hue aurora gradient: peach #f6d1ac → pink #f3b5d2 → violet #c7b8f5 → mint #a7eadc → sky #afcdf6. Positioned right of the hero headline as an abstract chart-like arrangement. Never used as a button fill, text color, or container background.
Hero Headline
Largest type on the pageGeistSans 48px weight 500 (or GeistMono 60px for a terminal feel), Bone White #fafafa, -1.2px letter-spacing. Line height 56px. Two-line max. The most visually weighted element after the aurora.
Logo Trust Strip
Social proof band below the heroHorizontal grid of company wordmarks (6 per row, then 5). Logos rendered in Bone White #fafafa or Mute Gray #a1a1aa — monochrome, never brand-colored. 24px gap between logos, 32px row gap. 'Trusted by developers at 5000+ companies' caption in GeistSans 12px Mute Gray above the grid.
Code / Mono Label
Inline technical references and terminal snippetsGeistMono 13px weight 400 in Mute Gray #a1a1aa. No background. 0 letter-spacing at body size (the -0.3em tracking is for display only). Used for file paths, API endpoints, and command-line cues that need to read as code.
Input / Code Field
Text entry in a dark recessed surfaceRecess Black #181818 background, 1px Wire Gray #5c5c61 border, 4px radius. Padding 12px 16px. GeistMono 13px for code inputs, GeistSans 14px for regular text. Placeholder in Mute Gray #a1a1aa. Focus ring: 1px Bone White #fafafa border, no glow.
Dark Card Surface
Content container for features, pricing, or API examplesConsole Charcoal #232324 background (same as canvas, distinguished by border), 1px Wire Gray #5c5c61 border, 12px radius, 24px padding. No shadow — the border is the entire depth signal. Cards never float above the page.
Icon (Geometric Mono)
Functional and decorative iconography1.5px stroke weight, 16-20px size, 4px square or 9999px circular bounding. Color: Bone White #fafafa for primary, Mute Gray #a1a1aa for secondary, Wire Gray #5c5c61 for tertiary. Outlined, never filled. No multi-color icons — the aurora gradient is the only color in the system.
Surfaces & elevation
Level 0
True Black
#000000Deepest accent surface — used inside inverted CTAs and the darkest focus states
Level 1
Nav Ink
#0e0e10Sticky navigation band, the only surface that reads as distinctly darker than the canvas
Level 2
Recess Black
#181818Recessed interactive fields — input boxes and dark-context buttons that feel pressed into the page
Level 3
Console Charcoal
#232324Dominant page canvas — the architectural ground plane that carries all content
Depth is expressed through tonal recess (#181818 sits below the #232324 canvas like an input well), not through shadows. The single permitted shadow is a 1px whisper reserved exclusively for the primary white CTA — the only element allowed to 'lift' off the page. Everything else is flat and flush.
Primary Pill CTA (only)
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
Layout & imagery
Layout
Full-bleed dark canvas (no max-width on the background) with content constrained to ~1200px. Sticky top navigation in Nav Ink. Hero uses a two-column split: headline + dual CTAs on the left, fragmented aurora bars on the right, all overlaid on a visible coordinate grid. Generous vertical spacing (64-80px between sections) with hairline #5c5c61 dividers rather than full color shifts. Below the hero, a compact two-row logo trust strip (6+5 grid) sits in Mute Gray. Section rhythm: announcement strip → nav → hero (generous) → trust strip (compact) → content sections follow the same spacious cadence. No sidebar, no mega-menu, no asymmetric column work — the layout is terminal-grid clean.
Imagery
Minimal decorative approach. The hero is dominated by a multi-hue aurora gradient rendered as fragmented horizontal bars — peach, pink, violet, mint, sky — providing the only chromatic burst against the monochrome interface. A subtle architectural grid of hairline #232324 lines creates a blueprint backdrop behind the hero. Company logos appear as monochrome wordmarks (Bone White or Mute Gray) in a two-row trust band. No photography, no illustrations, no 3D renders — the entire visual interest comes from the type, the grid, and the single aurora gradient.
Design notes
Agent Guide
**Quick Color Reference** - text: #fafafa - background: #232324 - border: #5c5c61 - muted text: #a1a1aa - aurora accent: multi-hue gradient (peach→pink→violet→mint→sky) - primary action: #fafafa (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #fafafa background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Ghost button: transparent background, 1px #5c5c61 border, #fafafa text, 9999px radius, 10px 20px padding, GeistSans 14px weight 500. 4. Hero headline: GeistSans 48px weight 500, #fafafa color, -1.2px letter-spacing, line-height 56px, max two lines. 5. Input field: #181818 background, 1px #5c5c61 border, 4px radius, 12px 16px padding, GeistMono 13px, placeholder in #a1a1aa. 6. Aurora decoration: 8px tall horizontal bars in varying widths filled with the multi-hue gradient (peach→pink→violet→mint→sky), positioned right of the hero headline, never functional.
Similar brands
Vercel
Same Geist typeface family, same near-black canvas, same developer-platform terminal feel, same achromatic pill CTAs
Linear
Dark-mode product UI with hairline borders, pill buttons, and a single restrained palette — though Langbase is more console-like and less dense
Together.ai
AI infrastructure platform with a similarly dark, type-forward hero and developer-terminal identity
Modal
Developer infrastructure brand with comparable dark canvas, Geist-like geometric type, and hairline structural borders
Replicate
AI cloud platform with a dark, minimal interface and a single decorative visual accent above the fold
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
