---
title: "Nile design system"
variant: extended
source: https://www.thenile.dev/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/thenile-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Nile · Design System

> Quiet black canvas, vivid signals, developer-first clarity

**Theme:** dark · **Industry:** devtools · **Source:** https://www.thenile.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Nile pairs a nearly pure-black canvas with crisp typography, cyan calls to action, and soft multicolor gradients. A spacious, editorial hero gives way to technical diagrams, colorful feature cards, and proof points designed for B2B app builders.

## North star

Let a black, spacious canvas carry clear product messaging, and reserve color for actions, technical highlights, and focused feature surfaces.

## Overview

The page is anchored by a pure black canvas (#000000), which gives the white headline and restrained gray copy strong contrast without making the product feel visually busy. Aeonik supplies the clean, rounded sans-serif voice across oversized, light-weight headings and compact body text; monospace is reserved for code and technical captions. Cyan (#6fe2ff) marks the primary action, while warm peach, lilac, and pale blue form a recurring gradient used for highlighted text, callout bands, and feature-card surfaces. Content sits in a centered, spacious column, with generous separation between sections and centered headings for most feature explanations. Product diagrams, database illustrations, code panels, and testimonial cards carry the technical story; these are graphic-led rather than photographic. Dark charcoal cards and fine gray borders create quiet structure against the black field. Keep gradients and brighter card colors as deliberate accents, not competing page-wide backgrounds.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Nile Black | `#000000` | `--color-nile-black` | brand | Dominant page canvas and negative space behind every major section. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary headings, body copy, testimonial text, and card content on dark surfaces. |
| Button Ink | `#0e0e0e` | `--color-button-ink` | neutral | Text on cyan actions and occasional dark text within light callout surfaces. |
| Signal Cyan | `#6fe2ff` | `--color-signal-cyan` | accent | Primary CTA fill and one of the recurring feature-card highlight colors. |
| Soft Silver | `#c6c6c6` | `--color-soft-silver` | neutral | Muted supporting copy on the black canvas. |
| Panel Charcoal | `#1c1c1c` | `--color-panel-charcoal` | surface | Dark feature-card and button surfaces, subtly lifted from the canvas. |
| Cloud Gray | `#d3d3d3` | `--color-cloud-gray` | surface | Inverse light surface captured in supporting visual treatments, not a dominant page band. |
| Graphite Panel | `#16181c` | `--color-graphite-panel` | surface | Testimonial and technical cards on the dark page. |
| Divider Gray | `#2f3336` | `--color-divider-gray` | semantic | Fine outlines around dark cards and contained panels. |
| Warm Apricot | `#f4c587` | `--color-warm-apricot` | accent | Warm end of the recurring gradient and colored feature-card surfaces. |
| Mist Lavender | `#d6d3e9` | `--color-mist-lavender` | accent | Middle gradient tone and pale lavender feature-card highlight. |
| Sky Tint | `#99d2ec` | `--color-sky-tint` | accent | Cool end of the recurring gradient and supporting color in diagrams. |
| Slate Outline | `#3f3f46` | `--color-slate-outline` | semantic | Subtle outlined secondary social buttons and selected dark component edges. |
| Tangerine Glow | `#ffba6a` | `--color-tangerine-glow` | accent | Warm highlight inside feature cards and technical illustrations, not the main CTA. |
| Lilac Glow | `#d8d3ff` | `--color-lilac-glow` | accent | Lavender feature surfaces and occasional illustration detail. |
| Button Silver | `#d9d9d9` | `--color-button-silver` | neutral | Secondary dark-button label and minor button text. |

### Semantic aliases

`--color-canvas` → `#000000` (Nile Black) · `--color-surface` → `#1c1c1c` (Panel Charcoal) · `--color-surface-2` → `#d3d3d3` (Cloud Gray) · `--color-surface-3` → `#16181c` (Graphite Panel) · `--color-surface-4` → `#6fe2ff` (Signal Cyan) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#0e0e0e` (Button Ink) · `--color-text-subtle` → `#c6c6c6` (Soft Silver) · `--color-border` → `#2f3336` (Divider Gray) · `--color-accent` → `#6fe2ff` (Signal Cyan) · `--color-accent-2` → `#f4c587` (Warm Apricot) · `--color-accent-3` → `#99d2ec` (Sky Tint) · `--color-on-accent` → `#0e0e0e` (Button Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |
| `#ffffff` | `#d3d3d3` | 1.5:1 | fail |
| `#ffffff` | `#16181c` | 17.77:1 | AAA |
| `#0e0e0e` | `#000000` | 1.09:1 | fail |
| `#0e0e0e` | `#1c1c1c` | 1.13:1 | fail |
| `#0e0e0e` | `#d3d3d3` | 12.9:1 | AAA |
| `#0e0e0e` | `#16181c` | 1.09:1 | fail |
| `#c6c6c6` | `#000000` | 12.29:1 | AAA |
| `#c6c6c6` | `#1c1c1c` | 9.98:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(244, 197, 135) 25%, rgb(214, 211, 233) 50%, rgb(153, 210, 236))`
- `radial-gradient(circle, rgba(0, 0, 0, 0) 45%, rgb(0, 0, 0) 65%)`
- `linear-gradient(90deg, rgb(244, 197, 135) 9.19%, rgb(214, 211, 233) 51.63%, rgb(153, 210, 236) 94.07%)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aeonik | `--font-body` | webfont | 400, 700, 600 | Display and headings, body copy, links, and most interface text | Inter |
| aeonikMedium | `--font-aeonikmedium` | webfont | 500 | Emphasized links such as “Learn more” | Inter |
| ui-monospace | `--font-mono` | system | 400 | Code samples and compact technical captions | Roboto Mono |

- **aeonik:** Clean geometric sans; headings are large and regular-weight, with slight negative display tracking and no forced uppercase.
- **aeonikMedium:** Medium weight distinguishes selected links without changing the restrained case or typographic voice.
- **ui-monospace:** Use for code and technical labels; keep its compact, terminal-like texture distinct from prose.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.01em | — | aeonik | Oversized hero-style display headings and key campaign statements. |
| h1 | 48px | 400 | 1.08 | 0 | — | aeonik | Primary hero headline. |
| h2 | 42px | 400 | 1 | 0 | — | aeonik | Major section headlines, usually centered. |
| h3 | 40px | 400 | 1.1 | 0 | — | aeonik | Feature and product section subheadings. |
| h4 | 32px | 400 | 1 | 0 | — | aeonik | Smaller card and nested content headings. |
| body | 15px | 400 | 1.5 | 0 | — | aeonik | Explanatory feature copy and general page text. |
| caption | 14px | 400 | 1.14 | 0 | — | ui-monospace | Compact technical labels and supporting captions. |
| button | 14px | 700 | 1.5 | 0 | — | aeonik | CTA and button labels. |
| link | 16px | 400 | 1.5 | 0 | — | aeonik | Inline navigation and content links. |
| code | 14px | 400 | 1.14 | 0 | — | ui-monospace | Code examples and database query panels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 10, 12, 16, 20, 24, 32, 36, 40, 64, 96 px.
- Section rhythm 96px · element gap 8px · card padding 16px · max content width 1208px.

A centered content frame reaches a measured maximum width of 1208px, while the black canvas runs edge to edge. The hero aligns left and leaves substantial open space; most later feature headings are centered above diagrams, card grids, or paired showcases. The page uses a spacious section rhythm, with a measured 96px section gap and compact 8px element gap. Feature layouts vary between two- and three-column groupings, with technical visuals given room to breathe rather than compressed into dense dashboards.

## Shape & elevation

- Radius: button `9999px` · card `20px` · xs `10px` · sm `16px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat surfaces over shadow. Cards use dark charcoal fills, with fine gray borders where measured; feature cards also use flat warm, lavender, or cyan fills. Rounded corners soften panels and pill-shaped secondary buttons, while diagrams and code panels gain definition from outlines, internal contrast, and careful layering rather than pronounced drop shadows.

## Imagery

The page is illustration-led: database cubes, tenant diagrams, branching and schema visuals, charts, and code panels explain the product. No dominant lifestyle photography defines the identity. Technical graphics sit within the dark canvas or charcoal panels, often with thin outlines and small color accents. Gradient-backed callouts and softly colored feature cards provide the most vivid contrast; imagery remains contained and product-specific.

## Components

### Primary CTA

Cyan-filled “Build with Nile” and “Sign up” actions use dark text; the measured Build with Nile button has 10px radius and 8px 16px padding.

### Social button

Compact dark “View on X” controls use a fine #3f3f46 outline, light label, and pill-shaped 9999px radius.

### Testimonial card

Dark #16181c quote cards use white text and a #2f3336 border; the measured card radius is 16px.

### Feature card

Feature explanations use charcoal or warm, lavender, and cyan surfaces, with concise copy and a “Learn more” link.

### Gradient callout

A broad rounded band blends #f4c587, #d6d3e9, and #99d2ec behind dark introductory or closing copy.

### Technical showcase

Database and tenant diagrams, code panels, and charts sit beneath centered feature headings on the black canvas.

### Measured component styles

- **Primary button** (“Build with Nile”): background #6fe2ff · text #0e0e0e · radius 10px · padding 8px 16px · 400 16px aeonik
- **Secondary button** (“View on X”): background #0e0e0e · text #d9d9d9 · border 1px solid #3f3f46 · radius 9999px · padding 8px 16px · 700 14px aeonik
- **Link** (“Learn more”): transparent background · text #0e0e0e · radius 0px · padding 0px · 500 16px aeonikMedium
- **Card** (“Guillermo Rauch CEO, Vercel Tenant-aware”): background #16181c · text #ffffff · border 1px solid #2f3336 · radius 16px · padding 16px · 400 14px aeonik

## Do

- Use #000000 as the dominant page canvas.
- Set major headings in clean, regular-weight Aeonik-style sans.
- Reserve #6fe2ff for prominent actions and selected highlights.
- Use the apricot–lavender–blue gradient as a contained accent.
- Pair technical diagrams with concise explanatory copy.
- Separate sections generously and keep the content frame centered.

## Don't

- Do not turn the entire page into a gradient background.
- Do not add large lifestyle photography as the primary visual language.
- Do not replace the dark canvas with a succession of bright section bands.
- Do not overuse accent colors in headings, buttons, and diagrams at once.
- Do not add heavy shadows to cards or technical panels.
- Do not make the spacious feature sections feel like a dense admin dashboard.

## Agent prompt

Build a new Nile-style developer SaaS page on a dominant #000000 canvas, with white #ffffff headings and restrained #c6c6c6 supporting copy. Use an Aeonik-like geometric sans for the main interface and reserve monospace for code or technical labels. Keep the content centered within the measured 1208px maximum width, with generous section breaks and mostly centered feature headings; allow the hero to align left. Make #6fe2ff the clearest action color with dark #0e0e0e text. Use #f4c587, #d6d3e9, and #99d2ec as a contained gradient or isolated feature-card fills, not as broad page backgrounds. Explain the product with database diagrams, code panels, and dark bordered cards. Favor flat surfaces, fine outlines, and clear hierarchy over shadows or decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned announcement, oversized headline, supporting line, and CTA on a black canvas. | announcement link, primary CTA | light display typography, cyan button, open negative space |
| 2 | testimonials | Centered heading above a horizontal row of testimonial cards. | social proof, external profile links | dark bordered cards, compact quote text |
| 3 | other | Single centered, rounded gradient callout within the black canvas. | positioning summary | warm-to-cool gradient, dark copy |
| 4 | how-it-works | Centered two-line heading, central database illustration, and three explanatory points. | benefit explanation, visual product model | outlined database cubes, colored text markers |
| 5 | feature-split | Centered title and description above colored feature cards beside a code illustration. | feature comparison, learn-more links | three colored cards, dark code panel |
| 6 | feature-grid | Centered heading, data interface visual, then three feature cards. | security benefits, learn-more links | technical table visual, apricot, lavender, cyan cards |
| 7 | feature-split | Centered heading above a server and load-balancer diagram, followed by three benefit points. | scalability explanation, cost benefit | outlined infrastructure diagram, small colored details |
| 8 | feature-grid | Centered title and subtitle, global tenant-placement diagram, then three feature cards. | regional placement, compute choice | tenant map diagram, three colored cards |
| 9 | product-showcase | Centered heading above a two-column, two-row set of dark showcase cards. | capability overview, checklist benefits | charcoal cards, diagrams and chart |
| 10 | cta | Wide rounded gradient callout with left-aligned prompt and CTA. | conversion CTA | warm-to-cool gradient, cyan action button |
| 11 | footer | Multi-column link groups on black with brand mark and a low-key legal/status row. | site navigation, social links, legal links | compact text, spaced link columns |

## Source CSS custom properties (selected)

```css
--foreground-rgb: 255,255,255;
--background-start-rgb: 0,0,0;
--background-end-rgb: 0,0,0;
--tw-bg-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thenile-dev