River AI — Design Reference
deep-water blueprint for frontier labs
Source: https://river.ai
Theme: dark
Category: AI
Mood: dark, cool, technical, precise, calm, glossy
Captured: 2026-10-25
Overview
A calm, cool-blue infrastructure brand. Deep navy sections alternate with pale, almost misty blue-grey bands, so the page reads like a technical document lit by moonlight. It feels quiet and confident rather than loud. Its signature moves are two-tone headlines, where the second clause fades to a softer slate-blue, frosted glass panels with a hairline top highlight, and soft periwinkle pill CTAs that glow against the navy.
Instrument Sans carries everything at 600 weight with tight negative tracking (-0.03em) on display sizes. JetBrains Mono at 12px handles every data-ish detail: table headers in spaced uppercase, prices, code tabs and units. The colour comes from one blue family: navy grounds (#0b1b46, #081333, #030b1f), pale ice surfaces (#edf1f7, #e9eef8), cobalt #254e99 and periwinkle #bdd7ff for actions, and slate #a9b9d3 for muted text. Shapes are pills (999px) for actions and 14–20px rounded glass cards. Shadows are layered: a white 1px inset top highlight plus long, soft navy drop shadows. Imagery is isometric GPU-rack diagrams, light-on-navy flow charts and blue-grey ink-wash illustrations on the blog.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Abyss Navy |
#0b1b46 |
--color-navy-900 |
Default page ground, dark section background and hero gradient base; also used as label text on periwinkle buttons |
| Midnight Trench |
#081333 |
--color-navy-950 |
Deeper dark section bands and code/demo panels that sit below the main navy |
| Ocean Floor |
#030b1f |
--color-navy-1000 |
Deepest band: footer and the 'Intelligence you own' feature panel |
| Raised Tide |
#142b56 |
--color-navy-700 |
Raised dark cards, table rows and tab strips on navy |
| Mist |
#edf1f7 |
--color-ice-50 |
Light section ground (pricing, blog and alternating home bands) |
| Frost Panel |
#e9eef8 |
--color-ice-100 |
Subtle filled cards and table highlight rows on light bands |
| Glacier Line |
#dfe6f1 |
--color-ice-200 |
Hairline dividers and table rules on light sections |
| Moonlight |
#edf1fa |
--color-text-on-dark |
Primary text and headlines on navy |
| Slate Haze |
#a9b9d3 |
--color-text-muted-dark |
Muted body copy, second-clause headline tint and inactive tabs on navy |
| Deep Ink |
#0e2f7e |
--color-text-on-light |
Headlines and strong text on light sections |
| Harbour Grey |
#4b6080 |
--color-text-muted-light |
Muted body text and captions on light sections |
| Cobalt |
#254e99 |
--color-primary |
Solid pill CTA fill ('Try it now →', 'Start on River Cloud ↗') and active accents on light bands |
| Periwinkle Glow |
#bdd7ff |
--color-primary-glow |
Hero/nav pill CTA fill on navy (Console, Start building), the 'New' badge, and active tab underline |
| Lavender Signal |
#c5b6f4 |
--color-accent-violet |
Sparing highlight text in code and diagrams |
Semantic roles
| Role |
Value |
| background |
#0b1b46 |
| surface |
#081333 |
| surface raised |
#142b56 |
| border |
rgba(237, 241, 247, 0.2) |
| text |
#edf1fa |
| text muted |
#a9b9d3 |
| primary |
#bdd7ff |
| primary text |
#0b1b46 |
| accent |
#254e99 |
| success |
#dcf1e9 |
Tokens — Typography
- Display: Instrument Sans (600) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. All headings use weight 600 with about -0.03em tracking and line-height 1.04–1.06. Headlines split into two lines, with the second clause in a muted tint (#a9b9d3 on dark, a soft slate-blue on light).
- Body: Instrument Sans (400, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Body copy is 16–18px at weight 400 with generous 1.6–1.65 leading. Nav links and buttons use weight 500.
- Mono: JetBrains Mono (400) — fallbacks: IBM Plex Mono, Menlo, monospace. Mono covers the most characters on the site. Use it at 12px for table headers (uppercase, wide tracking), prices and units ('$1.50 / 1M'), code tabs, eyebrow labels and the Copy button.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display |
64px |
1.05 |
600 |
-1.92px |
display |
| H1 hero |
57px |
1.03 |
600 |
-1.71px |
display |
| H2 section |
46px |
1.06 |
600 |
-1.38px |
display |
| H3 card |
28px |
1.15 |
600 |
-0.616px |
display |
| Title |
24px |
1.25 |
600 |
-0.72px |
display |
| Lead |
20px |
1.5 |
400 |
normal |
body |
| Prose |
17px |
1.6 |
400 |
normal |
body |
| Body / UI |
16px |
1.6 |
500 |
-0.16px |
body |
| Mono label |
12px |
1.4 |
400 |
0.08em |
mono |
Tokens — Spacing & Layout
- Base unit: 4px
- Density: spacious
- Container max width: 1264px
- Section gap: 120px
- Card padding: 40px
- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 40px, 56px, 88px, 120px, 146px
Tokens — Radius
| Element |
Value |
| Buttons, badges, segmented tabs |
999px |
| Large glass cards and feature panels |
20px |
| Small cards and blog thumbnails |
14px |
| Inputs and small glass tiles |
12px |
| Compact chips |
10px |
| Copy button in code blocks |
6px |
Tokens — Shadows
| Name |
Value |
Usage |
| Glass hairline |
rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset |
Inputs and translucent tiles on navy: a lit top edge plus a faint 1px ring instead of a border |
| Glass dark lift |
rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px |
Raised glass cards on dark sections |
| Paper card |
rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px |
White cards on light Mist sections (Training, Production inference, River Cloud) |
| Floating panel |
rgba(11, 27, 70, 0.08) 0px 10px 40px -8px, rgba(11, 27, 70, 0.15) 0px 32px 110px -24px |
Large hero images, console screenshot and blog feature image on light bands |
| Tab active underline |
rgb(189, 215, 255) 0px -2px 0px 0px inset |
Active tab in the Train / Improve / Deploy / Serve switcher |
Components
Primary pill (on navy) (button)
| Property |
Value |
| background |
#bdd7ff |
| color |
#0b1b46 |
| border |
1px solid #bdd7ff |
| radius |
999px |
| padding |
12px 22px |
| font size |
16px |
| font weight |
500 |
| shadow |
rgba(255, 255, 255, 0.45) 0px 1px 0.5px 0px inset |
| hover |
Lighten slightly toward #dfe8f6. The trailing arrow (↗ or →) nudges 2px. |
Used for Console in the nav and 'Start building' in the hero, often with the River logomark on the left. A soft vertical gradient from #dfe8f6 down to #bdd7ff is visible on screen.
Cobalt pill (button)
| Property |
Value |
| background |
#254e99 |
| color |
#f4f7ff |
| border |
1px solid #254e99 |
| radius |
999px |
| padding |
12px 22px |
| font size |
16px |
| font weight |
500 |
| shadow |
none |
| hover |
background #1E6CC4 → #2A7CD4 (--accent-hover) |
The solid CTA on light Mist sections and inside cards ('Try it now →', 'Start on River Cloud ↗', 'Bring River to your cluster →'). Height is 44px.
Text link CTA (link)
| Property |
Value |
| background |
transparent |
| color |
#edf1fa |
| border |
none |
| radius |
0px |
| padding |
0 |
| font size |
17px |
| font weight |
400 |
| shadow |
none |
| hover |
Text dims to #a9b9d3 and the › chevron shifts right |
The secondary action next to the primary pill ('Talk to our team ›'). It always ends with a › or → glyph.
Announcement chip (badge)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.08) |
| color |
#edf1fa |
| border |
none |
| radius |
999px |
| padding |
4px 4px 4px 4px |
| font size |
16px |
| font weight |
500 |
| shadow |
rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset |
| hover |
Glass fill brightens to rgba(255,255,255,0.12) |
Structure: a nested #bdd7ff 'New' pill with #0b1b46 text, then bold title text, then a muted '· 20–60% cheaper', then a round arrow button.
Glass input (input)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.08) |
| color |
#edf1fa |
| border |
none |
| radius |
12px |
| padding |
12px 12px |
| font size |
16px |
| font weight |
400 |
| shadow |
rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset |
| hover |
On focus, add a 2px #bdd7ff ring |
Contact form fields on Ocean Floor navy. Height is 48px. Labels sit above in 14px #a9b9d3.
Paper card (light band) (card)
| Property |
Value |
| background |
#ffffff |
| color |
#0e2f7e |
| border |
none |
| radius |
20px |
| padding |
40px |
| shadow |
rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px |
| hover |
none |
Two-up feature cards on #edf1f7 with a small line icon, a 28px H3 and 17px #4b6080 prose. Inner tiles use rgba(255,255,255,0.7) at 14px radius and 18px padding.
Glass card (dark band) (card)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.05) |
| color |
#edf1fa |
| border |
none |
| radius |
20px |
| padding |
40px |
| shadow |
rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px |
| hover |
none |
Hero diagram panel, model grid and pricing tables on navy. Interior dividers use rgba(237,241,247,0.2).
Transparent fixed nav (nav)
| Property |
Value |
| background |
rgba(0, 0, 0, 0) |
| color |
#edf1fa |
| border |
none |
| radius |
0px |
| padding |
0 28px |
| font size |
16px |
| font weight |
500 |
| shadow |
none |
| hover |
The active link gets a 1px underline offset below the text |
76px tall. The logo sits left and a right-aligned link row ends in the periwinkle Console pill. On light pages the links switch to #0e2f7e text.
Layout
The content column is 1264px wide. Full-bleed horizontal bands alternate navy (#0b1b46 / #081333 / #030b1f) with Mist (#edf1f7), and each band gets 88–146px of vertical padding. The hero is a 50/50 split: left-aligned copy on one side and a glass diagram panel over isometric GPU racks on the other, followed by a hairline-ruled logo strip. Section intros are either centred two-tone headlines or a two-column layout with the headline left and muted prose right. Content sits in 2-up card grids, 4-column model tiles, and wide data tables with mono uppercase headers and #dfe6f1 row rules. A horizontal tab switcher (Train / Improve / Deploy / Serve) sits above a code panel.
Imagery
Technical illustration on navy: line-art flow diagrams in white and #bdd7ff, isometric server racks in blue-grey, a dark console product screenshot, and a dotted-mesh wave graphic in the closing panel. The blog switches to soft Chinese ink-wash watercolours in grey-blue (mountains, rivers, a book with the logomark) on near-white, with 14–20px rounded corners. No people photography and no bright gradients.
Motion
Restrained. Expect gentle hover lightening on pills, arrow and chevron glyphs that nudge a couple of pixels, tab underline swaps, and a round scroll-cue button under the hero. The diagrams suggest subtle looping data-flow animation. Avoid big parallax or bouncy easing.
Responsive
On phones, the nav collapses to the logo plus a hamburger icon. Tapping it drops a navy (#0b1b46) sheet from the top that covers about half the screen. The sheet lists links in large ~24px Instrument Sans with full-width hairline dividers between rows, and 'River Console ↗' comes first. The X close icon replaces the hamburger in place. The hero stacks: the announcement chip is centred, the headline wraps to three lines at about 44px (keeping the two-tone split), the lead runs at about 20px with 1.6+ leading, and the primary pill sits beside the text link rather than going full width. The desktop side-by-side diagram turns into a tabbed glass card (Training / Inference) with a white underline on the active tab. Side gutters shrink to about 18px (36px at 2x).
Do
- Split every major headline into two clauses, with the second in a muted tint (#a9b9d3 on navy, slate-blue on Mist).
- Alternate full-bleed navy and #edf1f7 bands to pace the page, and swap text colours to #0e2f7e / #4b6080 on the light bands.
- Use pill (999px) buttons only, and end CTA labels with →, ↗ or ›.
- Build raised surfaces with a 1px white inset top highlight plus a long negative-spread navy shadow, not borders.
- Set all numbers, units, code and table headers in 12px JetBrains Mono, with headers uppercase and widely tracked.
- Keep headings at weight 600 with about -0.03em tracking and tight 1.05 leading.
Don't
- Don't introduce warm hues or saturated gradients. Everything stays in the navy-to-ice blue family, with lavender only as a rare highlight.
- Don't use pure black (#000) grounds. The darkest tone is #030b1f.
- Don't add visible 1px solid borders to cards. Use inset glass rings or soft shadows.
- Don't use square or slightly rounded (4px) buttons.
- Don't set body copy at tight line-height. Prose needs 1.6–1.65.
- Don't mix more than two families. Instrument Sans plus JetBrains Mono is the whole system.
Agent prompt
Build a calm, cool-blue AI infrastructure site in Instrument Sans (600 for headings with -0.03em tracking and 1.05 line-height; 400/500 for body at 16–18px with 1.6 leading) plus JetBrains Mono 400 at 12px for prices, units, code tabs and uppercase table headers. Default ground is navy #0b1b46 with deeper bands #081333 and #030b1f; alternate full-bleed sections with pale Mist #edf1f7 (cards #ffffff / #e9eef8, rules #dfe6f1). On dark, text is #edf1fa and muted #a9b9d3; on light, headings are #0e2f7e and muted #4b6080. Headlines are two-tone, with the second clause in the muted tint. Primary CTA on navy is a 999px periwinkle #bdd7ff pill with #0b1b46 text and 12px 22px padding; on light bands use a cobalt #254e99 pill with #f4f7ff text. Secondary actions are plain text links ending in ›. Cards are 20px radius with 40px padding: glass on dark (rgba(255,255,255,0.05) with an inset 0 1px 0.5px rgba(255,255,255,0.2) and a 0 10px 30px -16px rgba(1,6,20,.5) drop shadow), and white on light with a 0 14px 34px -18px rgba(11,27,70,.25) drop shadow. Inputs are rgba(255,255,255,0.08) at 12px radius with an inset glass ring. Container is 1264px, sections 120px apart, spacious. Imagery is line-art diagrams, isometric GPU racks and blue-grey ink-wash illustrations. No warm colours, no hard borders.
CSS custom properties
/* River AI — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-navy-900: #0b1b46; /* Default page ground, dark section background and hero gradient base; also used as label text on periwinkle buttons */
--color-navy-950: #081333; /* Deeper dark section bands and code/demo panels that sit below the main navy */
--color-navy-1000: #030b1f; /* Deepest band: footer and the 'Intelligence you own' feature panel */
--color-navy-700: #142b56; /* Raised dark cards, table rows and tab strips on navy */
--color-ice-50: #edf1f7; /* Light section ground (pricing, blog and alternating home bands) */
--color-ice-100: #e9eef8; /* Subtle filled cards and table highlight rows on light bands */
--color-ice-200: #dfe6f1; /* Hairline dividers and table rules on light sections */
--color-text-on-dark: #edf1fa; /* Primary text and headlines on navy */
--color-text-muted-dark: #a9b9d3; /* Muted body copy, second-clause headline tint and inactive tabs on navy */
--color-text-on-light: #0e2f7e; /* Headlines and strong text on light sections */
--color-text-muted-light: #4b6080; /* Muted body text and captions on light sections */
--color-primary: #254e99; /* Solid pill CTA fill ('Try it now →', 'Start on River Cloud ↗') and active accents on light bands */
--color-primary-glow: #bdd7ff; /* Hero/nav pill CTA fill on navy (Console, Start building), the 'New' badge, and active tab underline */
--color-accent-violet: #c5b6f4; /* Sparing highlight text in code and diagrams */
/* Semantic roles */
--background: #0b1b46;
--surface: #081333;
--surface-raised: #142b56;
--border: rgba(237, 241, 247, 0.2);
--text: #edf1fa;
--text-muted: #a9b9d3;
--primary: #bdd7ff;
--primary-text: #0b1b46;
--accent: #254e99;
--success: #dcf1e9;
/* Typography */
--font-display: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
--text-display: 64px;
--text-display--line-height: 1.05;
--text-display--letter-spacing: -1.92px;
--text-display--font-weight: 600;
--text-h1-hero: 57px;
--text-h1-hero--line-height: 1.03;
--text-h1-hero--letter-spacing: -1.71px;
--text-h1-hero--font-weight: 600;
--text-h2-section: 46px;
--text-h2-section--line-height: 1.06;
--text-h2-section--letter-spacing: -1.38px;
--text-h2-section--font-weight: 600;
--text-h3-card: 28px;
--text-h3-card--line-height: 1.15;
--text-h3-card--letter-spacing: -0.616px;
--text-h3-card--font-weight: 600;
--text-title: 24px;
--text-title--line-height: 1.25;
--text-title--letter-spacing: -0.72px;
--text-title--font-weight: 600;
--text-lead: 20px;
--text-lead--line-height: 1.5;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-prose: 17px;
--text-prose--line-height: 1.6;
--text-prose--letter-spacing: normal;
--text-prose--font-weight: 400;
--text-body-ui: 16px;
--text-body-ui--line-height: 1.6;
--text-body-ui--letter-spacing: -0.16px;
--text-body-ui--font-weight: 500;
--text-mono-label: 12px;
--text-mono-label--line-height: 1.4;
--text-mono-label--letter-spacing: 0.08em;
--text-mono-label--font-weight: 400;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 40px;
--space-9: 56px;
--space-10: 88px;
--space-11: 120px;
--space-12: 146px;
--container: 1264px;
--section-gap: 120px;
/* Radius */
--radius-buttons-badges-segmented-tabs: 999px;
--radius-large-glass-cards-and-feature-panels: 20px;
--radius-small-cards-and-blog-thumbnails: 14px;
--radius-inputs-and-small-glass-tiles: 12px;
--radius-compact-chips: 10px;
--radius-copy-button-in-code-blocks: 6px;
/* Shadows */
--shadow-glass-hairline: rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--shadow-glass-dark-lift: rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px;
--shadow-paper-card: rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px;
--shadow-floating-panel: rgba(11, 27, 70, 0.08) 0px 10px 40px -8px, rgba(11, 27, 70, 0.15) 0px 32px 110px -24px;
--shadow-tab-active-underline: rgb(189, 215, 255) 0px -2px 0px 0px inset;
}
Tailwind v4 theme
/* River AI — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-navy-900: #0b1b46;
--color-navy-950: #081333;
--color-navy-1000: #030b1f;
--color-navy-700: #142b56;
--color-ice-50: #edf1f7;
--color-ice-100: #e9eef8;
--color-ice-200: #dfe6f1;
--color-text-on-dark: #edf1fa;
--color-text-muted-dark: #a9b9d3;
--color-text-on-light: #0e2f7e;
--color-text-muted-light: #4b6080;
--color-primary: #254e99;
--color-primary-glow: #bdd7ff;
--color-accent-violet: #c5b6f4;
--color-background: #0b1b46;
--color-surface: #081333;
--color-surface-raised: #142b56;
--color-border: rgba(237, 241, 247, 0.2);
--color-text: #edf1fa;
--color-text-muted: #a9b9d3;
--color-primary: #bdd7ff;
--color-primary-text: #0b1b46;
--color-accent: #254e99;
--color-success: #dcf1e9;
--font-display: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
--text-display: 64px;
--text-display--line-height: 1.05;
--text-display--letter-spacing: -1.92px;
--text-display--font-weight: 600;
--text-h1-hero: 57px;
--text-h1-hero--line-height: 1.03;
--text-h1-hero--letter-spacing: -1.71px;
--text-h1-hero--font-weight: 600;
--text-h2-section: 46px;
--text-h2-section--line-height: 1.06;
--text-h2-section--letter-spacing: -1.38px;
--text-h2-section--font-weight: 600;
--text-h3-card: 28px;
--text-h3-card--line-height: 1.15;
--text-h3-card--letter-spacing: -0.616px;
--text-h3-card--font-weight: 600;
--text-title: 24px;
--text-title--line-height: 1.25;
--text-title--letter-spacing: -0.72px;
--text-title--font-weight: 600;
--text-lead: 20px;
--text-lead--line-height: 1.5;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-prose: 17px;
--text-prose--line-height: 1.6;
--text-prose--letter-spacing: normal;
--text-prose--font-weight: 400;
--text-body-ui: 16px;
--text-body-ui--line-height: 1.6;
--text-body-ui--letter-spacing: -0.16px;
--text-body-ui--font-weight: 500;
--text-mono-label: 12px;
--text-mono-label--line-height: 1.4;
--text-mono-label--letter-spacing: 0.08em;
--text-mono-label--font-weight: 400;
--radius-buttons-badges-segmented-tabs: 999px;
--radius-large-glass-cards-and-feature-panels: 20px;
--radius-small-cards-and-blog-thumbnails: 14px;
--radius-inputs-and-small-glass-tiles: 12px;
--radius-compact-chips: 10px;
--radius-copy-button-in-code-blocks: 6px;
--shadow-glass-hairline: rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--shadow-glass-dark-lift: rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px;
--shadow-paper-card: rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px;
--shadow-floating-panel: rgba(11, 27, 70, 0.08) 0px 10px 40px -8px, rgba(11, 27, 70, 0.15) 0px 32px 110px -24px;
--shadow-tab-active-underline: rgb(189, 215, 255) 0px -2px 0px 0px inset;
--container-site: 1264px;
}
Theme tokens — light + dark
The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.
/* River AI — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: captured; the light half is estimated — the site is dark by default. Add class="dark" to <html> for the site's native look. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--background: #edf1f7;
--foreground: #0e2f7e;
--card: #ffffff;
--card-foreground: #0e2f7e;
--popover: #ffffff;
--popover-foreground: #0e2f7e;
--primary: #254e99;
--primary-foreground: #f4f7ff;
--secondary: #e9eef8;
--secondary-foreground: #0e2f7e;
--muted: #e9eef8;
--muted-foreground: #4b6080;
--accent: #dfe8f6;
--accent-foreground: #0e2f7e;
--destructive: #c2413b;
--destructive-foreground: #ffffff;
--border: #dfe6f1;
--input: #dfe6f1;
--ring: #254e99;
--radius-small: 10px;
--radius-medium: 14px;
--radius-large: 20px;
--radius: var(--radius-medium);
--font-display: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Instrument Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
}
.dark {
color-scheme: dark;
--background: #0b1b46;
--foreground: #edf1fa;
--card: #142b56;
--card-foreground: #edf1fa;
--popover: #101532; /* estimated */
--popover-foreground: #edf1fa;
--primary: #bdd7ff;
--primary-foreground: #0b1b46;
--secondary: #081333;
--secondary-foreground: #edf1fa;
--muted: #081333;
--muted-foreground: #a9b9d3;
--accent: #254e99;
--accent-foreground: #f4f7ff;
--destructive: #e5655e; /* estimated */
--destructive-foreground: #0b1b46; /* estimated */
--border: rgba(237, 241, 247, 0.2);
--input: rgba(255, 255, 255, 0.08);
--ring: #bdd7ff; /* estimated */
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-small: var(--radius-small);
--radius-medium: var(--radius-medium);
--radius-large: var(--radius-large);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-mono: var(--font-mono);
}
River AI — Style Reference
deep-water blueprint for frontier labs
Theme: dark · Mood: dark, cool, technical, precise, calm, glossy
A calm, cool-blue infrastructure brand. Deep navy sections alternate with pale, almost misty blue-grey bands, so the page reads like a technical document lit by moonlight. It feels quiet and confident rather than loud. Its signature moves are two-tone headlines, where the second clause fades to a softer slate-blue, frosted glass panels with a hairline top highlight, and soft periwinkle pill CTAs that glow against the navy.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Abyss Navy |
#0b1b46 |
--navy-900 |
Default page ground, dark section background and hero gradient base; also used as label text on periwinkle buttons |
| Midnight Trench |
#081333 |
--navy-950 |
Deeper dark section bands and code/demo panels that sit below the main navy |
| Ocean Floor |
#030b1f |
--navy-1000 |
Deepest band: footer and the 'Intelligence you own' feature panel |
| Raised Tide |
#142b56 |
--navy-700 |
Raised dark cards, table rows and tab strips on navy |
| Mist |
#edf1f7 |
--ice-50 |
Light section ground (pricing, blog and alternating home bands) |
| Frost Panel |
#e9eef8 |
--ice-100 |
Subtle filled cards and table highlight rows on light bands |
| Glacier Line |
#dfe6f1 |
--ice-200 |
Hairline dividers and table rules on light sections |
| Moonlight |
#edf1fa |
--text-on-dark |
Primary text and headlines on navy |
| Slate Haze |
#a9b9d3 |
--text-muted-dark |
Muted body copy, second-clause headline tint and inactive tabs on navy |
| Deep Ink |
#0e2f7e |
--text-on-light |
Headlines and strong text on light sections |
| Harbour Grey |
#4b6080 |
--text-muted-light |
Muted body text and captions on light sections |
| Cobalt |
#254e99 |
--primary |
Solid pill CTA fill ('Try it now →', 'Start on River Cloud ↗') and active accents on light bands |
| Periwinkle Glow |
#bdd7ff |
--primary-glow |
Hero/nav pill CTA fill on navy (Console, Start building), the 'New' badge, and active tab underline |
| Lavender Signal |
#c5b6f4 |
--accent-violet |
Sparing highlight text in code and diagrams |
Tokens — Typography
- Display: Instrument Sans (Inter, Helvetica Neue, Arial, sans-serif) — weights 600
- Body: Instrument Sans (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/500
- Mono: JetBrains Mono (IBM Plex Mono, Menlo, monospace) — weights 400
Tokens — Radius
| Element |
Value |
| Buttons, badges, segmented tabs |
999px |
| Large glass cards and feature panels |
20px |
| Small cards and blog thumbnails |
14px |
| Inputs and small glass tiles |
12px |
| Compact chips |
10px |
| Copy button in code blocks |
6px |
Do
- Split every major headline into two clauses, with the second in a muted tint (#a9b9d3 on navy, slate-blue on Mist).
- Alternate full-bleed navy and #edf1f7 bands to pace the page, and swap text colours to #0e2f7e / #4b6080 on the light bands.
- Use pill (999px) buttons only, and end CTA labels with →, ↗ or ›.
- Build raised surfaces with a 1px white inset top highlight plus a long negative-spread navy shadow, not borders.
- Set all numbers, units, code and table headers in 12px JetBrains Mono, with headers uppercase and widely tracked.
- Keep headings at weight 600 with about -0.03em tracking and tight 1.05 leading.
Don't
- Don't introduce warm hues or saturated gradients. Everything stays in the navy-to-ice blue family, with lavender only as a rare highlight.
- Don't use pure black (#000) grounds. The darkest tone is #030b1f.
- Don't add visible 1px solid borders to cards. Use inset glass rings or soft shadows.
- Don't use square or slightly rounded (4px) buttons.
- Don't set body copy at tight line-height. Prose needs 1.6–1.65.
- Don't mix more than two families. Instrument Sans plus JetBrains Mono is the whole system.
{
"$name": "River AI",
"$source": "https://river.ai",
"$theme": "dark",
"$generated": "inspiration library",
"color": {
"navy-900": {
"$type": "color",
"$value": "#0b1b46",
"$description": "Default page ground, dark section background and hero gradient base; also used as label text on periwinkle buttons"
},
"navy-950": {
"$type": "color",
"$value": "#081333",
"$description": "Deeper dark section bands and code/demo panels that sit below the main navy"
},
"navy-1000": {
"$type": "color",
"$value": "#030b1f",
"$description": "Deepest band: footer and the 'Intelligence you own' feature panel"
},
"navy-700": {
"$type": "color",
"$value": "#142b56",
"$description": "Raised dark cards, table rows and tab strips on navy"
},
"ice-50": {
"$type": "color",
"$value": "#edf1f7",
"$description": "Light section ground (pricing, blog and alternating home bands)"
},
"ice-100": {
"$type": "color",
"$value": "#e9eef8",
"$description": "Subtle filled cards and table highlight rows on light bands"
},
"ice-200": {
"$type": "color",
"$value": "#dfe6f1",
"$description": "Hairline dividers and table rules on light sections"
},
"text-on-dark": {
"$type": "color",
"$value": "#edf1fa",
"$description": "Primary text and headlines on navy"
},
"text-muted-dark": {
"$type": "color",
"$value": "#a9b9d3",
"$description": "Muted body copy, second-clause headline tint and inactive tabs on navy"
},
"text-on-light": {
"$type": "color",
"$value": "#0e2f7e",
"$description": "Headlines and strong text on light sections"
},
"text-muted-light": {
"$type": "color",
"$value": "#4b6080",
"$description": "Muted body text and captions on light sections"
},
"primary": {
"$type": "color",
"$value": "#254e99",
"$description": "Solid pill CTA fill ('Try it now →', 'Start on River Cloud ↗') and active accents on light bands"
},
"primary-glow": {
"$type": "color",
"$value": "#bdd7ff",
"$description": "Hero/nav pill CTA fill on navy (Console, Start building), the 'New' badge, and active tab underline"
},
"accent-violet": {
"$type": "color",
"$value": "#c5b6f4",
"$description": "Sparing highlight text in code and diagrams"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#0b1b46"
},
"surface": {
"$type": "color",
"$value": "#081333"
},
"surface_raised": {
"$type": "color",
"$value": "#142b56"
},
"border": {
"$type": "color",
"$value": "rgba(237, 241, 247, 0.2)"
},
"text": {
"$type": "color",
"$value": "#edf1fa"
},
"text_muted": {
"$type": "color",
"$value": "#a9b9d3"
},
"primary": {
"$type": "color",
"$value": "#bdd7ff"
},
"primary_text": {
"$type": "color",
"$value": "#0b1b46"
},
"accent": {
"$type": "color",
"$value": "#254e99"
},
"success": {
"$type": "color",
"$value": "#dcf1e9"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Instrument Sans",
"Inter",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "All headings use weight 600 with about -0.03em tracking and line-height 1.04–1.06. Headlines split into two lines, with the second clause in a muted tint (#a9b9d3 on dark, a soft slate-blue on light)."
},
"body": {
"$type": "fontFamily",
"$value": [
"Instrument Sans",
"Inter",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "Body copy is 16–18px at weight 400 with generous 1.6–1.65 leading. Nav links and buttons use weight 500."
},
"mono": {
"$type": "fontFamily",
"$value": [
"JetBrains Mono",
"IBM Plex Mono",
"Menlo",
"monospace"
],
"$description": "Mono covers the most characters on the site. Use it at 12px for table headers (uppercase, wide tracking), prices and units ('$1.50 / 1M'), code tabs, eyebrow labels and the Copy button."
}
},
"typography": {
"display": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "64px",
"lineHeight": "1.05",
"fontWeight": 600,
"letterSpacing": "-1.92px"
}
},
"h1-hero": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "57px",
"lineHeight": "1.03",
"fontWeight": 600,
"letterSpacing": "-1.71px"
}
},
"h2-section": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "46px",
"lineHeight": "1.06",
"fontWeight": 600,
"letterSpacing": "-1.38px"
}
},
"h3-card": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "28px",
"lineHeight": "1.15",
"fontWeight": 600,
"letterSpacing": "-0.616px"
}
},
"title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "24px",
"lineHeight": "1.25",
"fontWeight": 600,
"letterSpacing": "-0.72px"
}
},
"lead": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "20px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"prose": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "17px",
"lineHeight": "1.6",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"body-ui": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.6",
"fontWeight": 500,
"letterSpacing": "-0.16px"
}
},
"mono-label": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "12px",
"lineHeight": "1.4",
"fontWeight": 400,
"letterSpacing": "0.08em"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px"
},
"2": {
"$type": "dimension",
"$value": "8px"
},
"3": {
"$type": "dimension",
"$value": "12px"
},
"4": {
"$type": "dimension",
"$value": "16px"
},
"5": {
"$type": "dimension",
"$value": "20px"
},
"6": {
"$type": "dimension",
"$value": "24px"
},
"7": {
"$type": "dimension",
"$value": "28px"
},
"8": {
"$type": "dimension",
"$value": "40px"
},
"9": {
"$type": "dimension",
"$value": "56px"
},
"10": {
"$type": "dimension",
"$value": "88px"
},
"11": {
"$type": "dimension",
"$value": "120px"
},
"12": {
"$type": "dimension",
"$value": "146px"
}
},
"radius": {
"buttons-badges-segmented-tabs": {
"$type": "dimension",
"$value": "999px"
},
"large-glass-cards-and-feature-panels": {
"$type": "dimension",
"$value": "20px"
},
"small-cards-and-blog-thumbnails": {
"$type": "dimension",
"$value": "14px"
},
"inputs-and-small-glass-tiles": {
"$type": "dimension",
"$value": "12px"
},
"compact-chips": {
"$type": "dimension",
"$value": "10px"
},
"copy-button-in-code-blocks": {
"$type": "dimension",
"$value": "6px"
}
},
"shadow": {
"glass-hairline": {
"$type": "shadow",
"$value": "rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset",
"$description": "Inputs and translucent tiles on navy: a lit top edge plus a faint 1px ring instead of a border"
},
"glass-dark-lift": {
"$type": "shadow",
"$value": "rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px",
"$description": "Raised glass cards on dark sections"
},
"paper-card": {
"$type": "shadow",
"$value": "rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px",
"$description": "White cards on light Mist sections (Training, Production inference, River Cloud)"
},
"floating-panel": {
"$type": "shadow",
"$value": "rgba(11, 27, 70, 0.08) 0px 10px 40px -8px, rgba(11, 27, 70, 0.15) 0px 32px 110px -24px",
"$description": "Large hero images, console screenshot and blog feature image on light bands"
},
"tab-active-underline": {
"$type": "shadow",
"$value": "rgb(189, 215, 255) 0px -2px 0px 0px inset",
"$description": "Active tab in the Train / Improve / Deploy / Serve switcher"
}
},
"component": {
"primary-pill-on-navy": {
"kind": "button",
"background": "#bdd7ff",
"color": "#0b1b46",
"border": "1px solid #bdd7ff",
"radius": "999px",
"padding": "12px 22px",
"font_size": "16px",
"font_weight": 500,
"shadow": "rgba(255, 255, 255, 0.45) 0px 1px 0.5px 0px inset",
"hover": "Lighten slightly toward #dfe8f6. The trailing arrow (↗ or →) nudges 2px.",
"notes": "Used for Console in the nav and 'Start building' in the hero, often with the River logomark on the left. A soft vertical gradient from #dfe8f6 down to #bdd7ff is visible on screen."
},
"cobalt-pill": {
"kind": "button",
"background": "#254e99",
"color": "#f4f7ff",
"border": "1px solid #254e99",
"radius": "999px",
"padding": "12px 22px",
"font_size": "16px",
"font_weight": 500,
"shadow": "none",
"hover": "background #1E6CC4 → #2A7CD4 (--accent-hover)",
"notes": "The solid CTA on light Mist sections and inside cards ('Try it now →', 'Start on River Cloud ↗', 'Bring River to your cluster →'). Height is 44px."
},
"text-link-cta": {
"kind": "link",
"background": "transparent",
"color": "#edf1fa",
"border": "none",
"radius": "0px",
"padding": "0",
"font_size": "17px",
"font_weight": 400,
"shadow": "none",
"hover": "Text dims to #a9b9d3 and the › chevron shifts right",
"notes": "The secondary action next to the primary pill ('Talk to our team ›'). It always ends with a › or → glyph."
},
"announcement-chip": {
"kind": "badge",
"background": "rgba(255, 255, 255, 0.08)",
"color": "#edf1fa",
"border": "none",
"radius": "999px",
"padding": "4px 4px 4px 4px",
"font_size": "16px",
"font_weight": 500,
"shadow": "rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset",
"hover": "Glass fill brightens to rgba(255,255,255,0.12)",
"notes": "Structure: a nested #bdd7ff 'New' pill with #0b1b46 text, then bold title text, then a muted '· 20–60% cheaper', then a round arrow button."
},
"glass-input": {
"kind": "input",
"background": "rgba(255, 255, 255, 0.08)",
"color": "#edf1fa",
"border": "none",
"radius": "12px",
"padding": "12px 12px",
"font_size": "16px",
"font_weight": 400,
"shadow": "rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset",
"hover": "On focus, add a 2px #bdd7ff ring",
"notes": "Contact form fields on Ocean Floor navy. Height is 48px. Labels sit above in 14px #a9b9d3."
},
"paper-card-light-band": {
"kind": "card",
"background": "#ffffff",
"color": "#0e2f7e",
"border": "none",
"radius": "20px",
"padding": "40px",
"shadow": "rgb(255, 255, 255) 0px 1px 0.5px 0px inset, rgba(11, 27, 70, 0.06) 0px 1px 2px 0px, rgba(11, 27, 70, 0.25) 0px 14px 34px -18px",
"hover": "none",
"notes": "Two-up feature cards on #edf1f7 with a small line icon, a 28px H3 and 17px #4b6080 prose. Inner tiles use rgba(255,255,255,0.7) at 14px radius and 18px padding."
},
"glass-card-dark-band": {
"kind": "card",
"background": "rgba(255, 255, 255, 0.05)",
"color": "#edf1fa",
"border": "none",
"radius": "20px",
"padding": "40px",
"shadow": "rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px",
"hover": "none",
"notes": "Hero diagram panel, model grid and pricing tables on navy. Interior dividers use rgba(237,241,247,0.2)."
},
"transparent-fixed-nav": {
"kind": "nav",
"background": "rgba(0, 0, 0, 0)",
"color": "#edf1fa",
"border": "none",
"radius": "0px",
"padding": "0 28px",
"font_size": "16px",
"font_weight": 500,
"shadow": "none",
"hover": "The active link gets a 1px underline offset below the text",
"notes": "76px tall. The logo sits left and a right-aligned link row ends in the periwinkle Console pill. On light pages the links switch to #0e2f7e text."
}
}
}
New
