Signal Cyan
#6fe2ffBlue action color for filled buttons, selected navigation states, and focused conversion moments.
Nile Postgres
thenile.devWebsite preview
The design language
Nile operates in the visual language of an infrastructure command center: a near-black canvas (#0e0e0e) with elevated surface cards (#1c1c1c) and a trio of pastel feature blocks — cyan #6fe2ff, amber #ffba6a, and lavender #d8d3ff — that function as colored tiles floating in deep space. Typography is geometric and precise: Aeonik at weights 400/500/600/700, with display sizes stretching to 96px on tight negative tracking, giving headlines an architectural, engineered feel. A signature sunset gradient (amber → lavender → cyan) threads through the hero wordmark and likely other moments, providing the only moment of continuous color flow. Components stay flat and quiet — hairline borders (#2f3336) over heavy elevation, pill buttons (9999px), rounded 16-20px cards, and no decorative shadows. The overall atmosphere is restrained infrastructure: developer-facing, confident through restraint rather than spectacle, with chromatic accents used sparingly as functional category tags rather than decoration.
Color palette
brand
accent
Amber Tile
#ffba6aAmber feature card background, warm category accent in the trio
Lavender Tile
#d8d3ffLavender feature card background, cool category accent in the trio
Sunset Sweep
#d6d3e9Signature gradient — amber to lavender to cyan, used on hero wordmark highlights and atmospheric washes
neutral
Deep Void
#0e0e0ePage canvas, deepest surface — the black that everything floats on
Carbon
#1c1c1cCard surfaces, elevated panels, testimonial tiles
Graphite
#2b2b2bMid-elevation surfaces, subtle layering above cards
Smoke
#3f3f3fBorders, dividers on elevated elements, button outlines
Charcoal Edge
#2f3336Hairline card borders — the quietest structural line
Snow
#ffffffPrimary text, headings, icons — the dominant foreground
Ash
#d3d3d3Secondary text, muted labels, icon fills at rest
Slate Mist
#a1a1aaTertiary text, helper copy, de-emphasized metadata
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
96px · 500 · 1 · -0.96px trackingThe quick brown fox jumps
display
64px · 400 · 1.08 · -0.64px trackingThe quick brown fox jumps
heading-2xl
48px · 400 · 1.1 · -0.48px trackingThe quick brown fox jumps
text-42
42px · 400 · 1The quick brown fox jumps
heading-xl
40px · 400 · 1.18 · -0.4px trackingThe quick brown fox jumps
heading-lg
32px · 400 · 1.2 · -0.01px trackingThe quick brown fox jumps
text-24
24px · 500 · 1The quick brown fox jumps
heading-sm
20px · 500 · 1.25 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aeonik
- Sizes
- 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px, 40px, 42px, 48px, 64px, 96px
- Line height
- 1.00, 1.08, 1.10, 1.18, 1.20, 1.25, 1.43, 1.50, 1.56, 1.60
- Letter spacing
- -0.01em on display (40px+), 0.01em on small text, normal at body
- Fallback
- Inter, Satoshi, General Sans
Primary interface and display typeface — geometric, precise, used for everything from body copy to 96px hero headlines
Additional typeface
ui-monospace
- Sizes
- 14px
- Line height
- 1.14, 1.18, 1.50
- Letter spacing
- 0.01em
- Fallback
- JetBrains Mono, IBM Plex Mono
Code snippets, technical labels, inline code — the developer voice within the geometric system
Additional typeface
aeonikMedium
- Weights
- 500
- Sizes
- 16px, 20px, 24px, 96px
- Line height
- 1, 1.2, 1.25, 1.5
aeonikMedium — detected in extracted data but not described by AI
Additional typeface
Inter
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.33
Inter — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80-96px
- Card padding
- 24px
- Element gap
- 8-12px
Border radius
tags
6pxcards
20pxpills
9999pxinputs
10pxbuttons
9999pxspecial
100pxsmallCards
16pxSpacing scale
2px4px8px10px11px12px16px20px24px26px32px34px36px40px48px56px64px76px80px96px112px128px160px179px192pxGuidelines
Do
- Use 9999px border-radius for all interactive elements — buttons, nav pills, announcement tags — to maintain the pill-shaped consistency across the system
- Use Signal Cyan #6fe2ff exclusively for primary actions; never substitute it for decorative or non-action purposes
- Use the three pastel feature tile colors (Amber #ffba6a, Lavender #d8d3ff, Cyan #6fe2ff) as solid card fills with Deep Void text, never as text colors or thin accents
- Apply the sunset gradient only as a deliberate signature moment — full container fills or clipped text — not as a subtle background wash
- Set body text at 16px Aeonik weight 400 in white #ffffff, with secondary text in Ash #d3d3d3 — never use gray for primary copy
- Use card padding of 24px and card border-radius of 20px as the default for all surface containers
- Maintain section gaps of 80-96px to preserve the comfortable, breathing rhythm between content blocks
- Set display headlines at 64-96px with negative letter-spacing (-0.01em) to achieve the architectural, engineered feel
Don’t
- Do not use chromatic colors (Cyan, Amber, Lavender) for body text, borders, or icons — they are exclusively surface fills for feature tiles and primary actions
- Do not add box-shadows or drop-shadows to cards or buttons — the system relies on flat surfaces and hairline borders for depth
- Do not use the gradient as a button background, icon fill, or text color outside its intended signature moments
- Do not break the pill shape — every button, tag, and announcement must use 9999px radius, never rounded rectangles
- Do not use pure black #000000 — always use Deep Void #0e0e0 for canvas and Carbon #1c1c1c for cards
- Do not introduce new accent colors beyond the trio — the system is deliberately constrained to cyan/amber/lavender plus neutrals
- Do not set body text below 14px or use weights other than 400 for paragraph copy — Aeonik's geometric clarity depends on generous sizing and regular weight
- Do not use spacing values outside the 4/8/12/16/24/32/48/80/96 scale — the 8px base unit must govern all rhythm
Components
Pill Primary Button
Main call-to-action across hero and feature sectionsFilled with Signal Cyan #6fe2ff, text in Deep Void #0e0e0, font-weight 500, 16px text, padding 10px 20px, border-radius 9999px (fully pill-shaped). Includes a right-arrow glyph in the same dark color. This is the only chromatic filled button in the system.
Ghost Outline Button
Secondary actions, nav-adjacent controlsTransparent fill, 1px border in #3f3f3f, white text at 14-16px, border-radius 9999px, padding 8px 16px. Blends into the dark canvas with just enough edge to register as interactive.
Pill Nav Link
Top navigation itemsWhite text on transparent, 15-16px weight 400, no border. On hover or active: subtle white/10 background appears.
Announcement Pill
Compact top-of-page announcement (e.g. product launches)Dark fill #1c1c1c, 1px border #3f3f3f, text 14px white with muted secondary, border-radius 9999px, padding 8px 16px. Includes a small arrow icon on the right.
Testimonial Card
Social proof in horizontal scroll layoutBackground #1c1c1c, 1px border #2f3336, border-radius 20px, padding 16-20px. Contains avatar (40px circle), name in white weight 600, role/company in Ash #d3d3d3, quote body in white weight 400 at 14-15px. Includes a 'View on X' link and a close X glyph. Cards are slightly wider than tall, designed to sit in a horizontal scroll row.
Colored Feature Tile
Category-coded feature blocks in the feature gridSolid pastel fill: Amber #ffba6a, Lavender #d8d3ff, or Signal Cyan #6fe2ff. Text in Deep Void #0e0e0e. Border-radius 20px, padding 24px. Contains a bold heading (18-20px weight 600), body text (15px weight 400), and a 'Learn more →' link. These are the only large chromatic surfaces in the system.
Gradient Highlight Box
Signature moment — the hero word treatment and section dividersRounded container (20-24px radius) with the sunset gradient fill (#f4c587 → #d6d3e9 → #99d2ec). May contain text clipped to the gradient or sit as a decorative wash. In the hero, it frames a single highlighted word from the headline with a dashed border outline.
Code Block Card
SQL/code examples in feature sectionsDark terminal-style card: background #1c1c1c, border 1px #2f3336, border-radius 16px, padding 24px. Monospace font (ui-monospace) at 14px. Uses VS Code-style syntax highlighting: #9cdcfe for keywords, #dcdcaa for functions/strings, #b5cea8 for numbers, #4fc1ff for types.
Product Icon Tile
Visual badge for feature sections (e.g. the chip/vector graphic)Dark square 200x200px with rounded corners (24px), 1px border #3f3f3f, contains a centered icon or product graphic. Functions as a visual anchor beside feature copy.
Brand Logo Mark
Site identity — 'Nile' wordmark with N-glyphStylized 'N' glyph in white, followed by 'Nile' wordmark in Aeonik weight 600. Approximately 24px tall in the header. The N has a distinctive curved/ribbon-like construction.
Info Statement Banner
Full-width summary statement (e.g. the gradient description block)Rounded container (20px radius) with the sunset gradient as background, large padding (40-48px), contains the brand logo + a sentence-length summary in Deep Void text. Functions as a brand-recap moment between sections.
Icon (UI)
Small interface icons — arrows, close, social, navStroke-based or filled glyphs in white or Ash #d3d3d3 at 16-20px. Generally 1.5-2px stroke weight, geometric construction matching Aeonik's precision.
Surfaces & elevation
Level 0
Deep Void
#0e0e0Page canvas, the base of the stack
Level 1
Carbon
#1c1c1cCard surfaces, testimonial tiles, elevated panels
Level 2
Graphite
#2b2b2bMid-elevation backgrounds, nested panels
Level 3
Smoke
#3f3f3fHigh-elevation surfaces, modal backgrounds
Nile intentionally avoids shadows. Depth is achieved through a three-step surface stack (Deep Void #0e0e0 → Carbon #1c1c1c → Graphite #2b2b2b) and hairline borders in #2f3336. Elevation is flat and architectural, not skeuomorphic — cards sit on the canvas like tiles, not floating panels.
Layout & imagery
Layout
Max-width ~1200px centered content with full-bleed dark canvas. The hero is a left-aligned text stack: announcement pill, then a 64-96px headline with one word highlighted by a dashed-border gradient box, followed by a one-sentence subhead and a cyan pill CTA. The page flows in vertical sections with 80-96px gaps. Below the hero: a 'What People Are Saying' section with horizontally scrolling testimonial cards. Then a full-width gradient statement banner with logo + summary. Then feature sections in a 2-column layout (left: text + colored feature tiles stacked, right: code screenshot or product graphic). Navigation is a top bar with centered nav links, brand left, and a ghost outline button + cyan pill CTA on the right. The grid is generous and breathing — no dense information layouts.
Imagery
Visual language is minimal and product-focused: no lifestyle photography, no abstract decorative graphics. Imagery consists of (1) a single product graphic — a dark square tile with a circuit/vector icon (the Nile N-glyph on a dotted grid) — used as a visual anchor in feature sections, and (2) code screenshots styled as dark terminal cards with VS Code syntax highlighting. The pastel feature tiles themselves act as visual elements, breaking up the dark canvas with blocks of color. Icons are geometric, stroke-based, and white or ash-gray. The overall feel is engineering documentation meets product page: everything serves to explain a technical capability.
Design notes
Agent Guide
**Quick Color Reference** - Text primary: #ffffff - Text secondary: #d3d3d3 - Text muted: #a1a1aa - Background canvas: #0e0e0e - Card surface: #1c1c1c - Border hairline: #2f3336 - Border emphasis: #3f3f3f - primary action: #6fe2ff (filled action) - Feature tile warm: #ffba6a - Feature tile cool: #d8d3ff - Feature tile go: #6fe2ff - Signature gradient: linear-gradient(90deg, #f4c587, #d6d3e9, #99d2ec) **Example Component Prompts** 1. **Pill Primary Button**: "Create a pill-shaped button: fill #6fe2ff, text #0e0e0e in Aeonik weight 500 at 16px, padding 10px 20px, border-radius 9999px, with a right-arrow glyph in #0e0e0e." 2. **Colored Feature Tile**: "Build a feature card: solid fill #ffba6a (or #d8d3ff / #6fe2ff), border-radius 20px, padding 24px, heading in Aeonik weight 600 at 20px in #0e0e0e, body text weight 400 at 15px in #0e0e0e, and a 'Learn more →' link at 14px weight 500 in #0e0e0e." 3. **Testimonial Card**: "Design a testimonial card: background #1c1c1c, 1px border #2f3336, border-radius 20px, padding 20px. Top row: 40px circular avatar, name in Aeonik weight 600 at 14px white, role in #d3d3d3 at 13px. Quote body in white weight 400 at 14px with 1.5 line-height. Bottom: 'View on X' ghost link and a close X icon." 4. **Code Block Card**: "Create a code example card: background #1c1c1c, border 1px #2f3336, border-radius 16px, padding 24px. Monospace text at 14px. Apply VS Code-style syntax: keywords in #9cdcfe, strings in #dcdcaa, numbers in #b5cea8, types in #4fc1ff, default text in #d4d4d4." 5. **Gradient Highlight Box (Hero Word)**: "Build a signature highlight container: border-radius 20px, background linear-gradient(90deg, #f4c587 9%, #d6d3e9 52%, #99d2ec 94%), 1px dashed border in white at 50% opacity, padding 4px 12px, containing a single headline word in Aeonik weight 700 at 64-96px in #0e0e0e."
Similar brands
Vercel
Same dark-canvas + single bright accent approach, with pill-shaped CTAs and restrained geometric typography
Supabase
Dark infrastructure-product aesthetic with developer-focused code screenshots and green-cyan accent palette
PlanetScale
Database-infrastructure brand with deep dark surfaces, generous spacing, and a single vivid accent color for primary actions
Railway
Dark devtool landing pages with horizontal-scroll social proof sections and minimal flat component design
Linear
Dark UI with precise geometric typography (similar to Aeonik's style), tight letter-spacing on display sizes, and quiet color usage
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
