Remixes of river.ai
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: River
description: |
River AI's design system embodies a premium, technology-forward aesthetic
rooted in deep blues and luminous accents. The visual language conveys
cutting-edge machine learning infrastructure through a carefully controlled
dark-to-light gradient spectrum, layered glassmorphic surfaces, and precise
geometric composition. The palette shifts between a rich, near-black hero
section (#081333) and bright, accessible surfaces (#FFFFFF, #EDF1F7), creating
visual hierarchy and drawing focus to interactive elements. The system employs
subtle inset shadows and directional gradients to suggest depth and dimension
without heavy contrast, reinforcing a sophisticated, research-oriented brand
identity. Typography is bold and generous at display scales, reinforcing
confidence in the platform's capabilities, while body text remains measured
and readable across all devices.
source:
url: "https://river.ai/"
pagesAnalyzed: 1
extractedAt: 2026-10-15
tokensMeasured: true
colors:
primary: "#BDD7FF"
accent: "#5870A7"
link: "#697A9B"
canvas: "#EDF1F7"
surface: "#FFFFFF"
surface-alt: "#0B1B46"
on-primary: "#0B1B46"
ink: "#A9B9D3"
body: "#B8C7DF"
muted: "#C5D1E5"
faint: "#D5DFEF"
hairline: "#162B50"
accent-1: "#4B6080"
accent-2: "#254E99"
accent-3: "#146C52"
accent-4: "#A1AFD0"
accent-5: "#8FA3C9"
typography:
display-lg:
fontFamily: "Instrument Sans"
fontSize: 57px
fontWeight: 600
lineHeight: 1.03
letterSpacing: -1.71px
display-md:
fontFamily: "Instrument Sans"
fontSize: 56px
fontWeight: 600
lineHeight: 1.06
letterSpacing: -1.68px
display-sm:
fontFamily: "Instrument Sans"
fontSize: 46px
fontWeight: 600
lineHeight: 1.06
letterSpacing: -1.38px
heading-md:
fontFamily: "Instrument Sans"
fontSize: 28px
fontWeight: 600
lineHeight: 1.15
letterSpacing: -0.62px
heading-sm:
fontFamily: "Instrument Sans"
fontSize: 20px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.32px
body-xl:
fontFamily: "Instrument Sans"
fontSize: 21px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: "Instrument Sans"
fontSize: 19px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
body-md:
fontFamily: "Instrument Sans"
fontSize: 17px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-sm:
fontFamily: "Instrument Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-xs:
fontFamily: "Instrument Sans"
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-xs-2:
fontFamily: "Instrument Sans"
fontSize: 13px
fontWeight: 500
lineHeight: 1.6
letterSpacing: -0.13px
button:
fontFamily: "Instrument Sans"
fontSize: 24px
fontWeight: 400
letterSpacing: 0px
label-md:
fontFamily: "Instrument Sans"
fontSize: 15px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-sm:
fontFamily: Arial
fontSize: 13.3333px
fontWeight: 400
letterSpacing: 0px
label-xs:
fontFamily: "Instrument Sans"
fontSize: 12px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
caption-xs:
fontFamily: "Instrument Sans"
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
caption-xs-loose:
fontFamily: "Instrument Sans"
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
code-sm:
fontFamily: monospace
fontSize: 13px
fontWeight: 400
letterSpacing: 0px
code-sm-jetbrains-mono:
fontFamily: "JetBrains Mono"
fontSize: 13px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
code-xs:
fontFamily: "JetBrains Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
code-xs-loose:
fontFamily: "JetBrains Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.9
letterSpacing: 0px
code-xs-2:
fontFamily: "JetBrains Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0.48px
rounded:
none: 0px
xs: 6px
sm: 12px
md: 14px
lg: 20px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgb(189, 215, 255) 0px -2px 0px 0px inset"
md: "rgba(255, 255, 255, 0.15) 0px 1px 0.5px 0px inset"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#EDF1F7"
surface: "#FFFFFF"
surfaceRaised: "#FCFCFD"
text: "#A9B9D3"
textMuted: "#B8C7DF"
border: "#162B50"
accent: "#2E80FF"
accentFg: "#000000"
focusRing: "#BDD7FF"
elevation: shadow
dark:
bg: "#0E0E11"
surface: "#1C1C1F"
surfaceRaised: "#29292B"
text: "#FCFDFF"
textMuted: "#A2A2A5"
border: "#353537"
accent: "#BDD7FF"
accentFg: "#0B0B0C"
focusRing: "#BDD7FF"
elevation: "border+surface"
contrastFailures:
- "light: text on bg = 1.75:1 (needs 4.5:1)"
- "light: muted on bg = 1.51:1 (needs 4.5:1)"
- "light: text on surface = 1.99:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgb(8, 19, 51) 0px, rgba(8, 19, 51, 0) 270px), linear-gradient(120deg, rgb(7, 19, 41) 0%, rgb(16, 43, 89) 48%, rgb(43, 87, 144) 100%)"
- context: section
kind: linear
value: "linear-gradient(115deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.65) 30%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.8) 100%)"
- context: section
kind: linear
value: "linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.07) 22%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.09) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgb(201, 223, 255) 0%, rgb(178, 207, 248) 100%)"
- context: section
kind: linear
value: "linear-gradient(115deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.11) 100%)"
- context: section
kind: linear
value: "linear-gradient(115deg, rgba(230, 238, 251, 0.9) 0%, rgba(217, 228, 247, 0.7) 30%, rgba(214, 226, 246, 0.65) 60%, rgba(224, 233, 249, 0.85) 100%)"
components:
button-filled:
textColor: "rgb(244, 247, 255)"
border: "1px solid {colors.accent-2}"
height: 45px
padding: "12px 22px 12px 22px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 500
rounded: 999px
backgroundColor: "{colors.accent-2}"
button-primary:
textColor: "{colors.on-primary}"
height: 42px
padding: "12px 20px 12px 20px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 400
backgroundColor: "{colors.primary}"
button-filled-sm:
textColor: "{colors.ink}"
height: 34px
padding: "9px 18px 9px 18px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
rounded: 999px
backgroundColor: "rgba(255, 255, 255, 0.05)"
button-outline:
textColor: "rgb(219, 229, 245)"
border: "1px solid rgba(237, 241, 247, 0.2)"
height: 28px
padding: "5px 11px 5px 11px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
rounded: "{rounded.xs}"
card:
textColor: "rgb(22, 44, 83)"
padding: "28px 28px 28px 28px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 400
rounded: "{rounded.md}"
backgroundColor: "rgb(233, 238, 248)"
card-lg:
textColor: "{colors.hairline}"
padding: "40px 40px 40px 40px"
fontSize: 16px
boxShadow: "{colors.surface} 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"
fontFamily: "Instrument Sans"
fontWeight: 400
rounded: "{rounded.lg}"
badge-text:
textColor: "{colors.on-primary}"
height: 30px
padding: "0px 13px 0px 13px"
fontSize: 17px
boxShadow: "rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(143, 179, 236, 0.5) 0px 2px 8px -2px"
fontFamily: "Instrument Sans"
fontWeight: 500
lineHeight: 1.3
rounded: 999px
badge-text-sm:
textColor: "rgb(237, 241, 250)"
height: 23.7969px
fontSize: 17px
fontFamily: "Instrument Sans"
fontWeight: 400
lineHeight: 1.4
navigation:
textColor: "rgb(237, 241, 250)"
height: 60px
padding: "8px 8px 8px 22px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 400
rounded: 30px
footer:
textColor: "rgb(237, 241, 250)"
padding: "120px 88px 0px 88px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 400
backgroundColor: "rgb(8, 19, 51)"
link:
textColor: "rgb(237, 241, 250)"
padding: "6px 6px 6px 6px"
fontSize: 17px
boxShadow: "rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px"
fontFamily: "Instrument Sans"
fontWeight: 400
lineHeight: 1.3
rounded: 999px
link-lg:
textColor: "{colors.on-primary}"
padding: "12px 22px 12px 22px"
fontSize: 16px
fontFamily: "Instrument Sans"
fontWeight: 400
rounded: 999px
states:
nav-hover:
target: nav
state: hover
opacity: 1
nav-focus-visible:
target: nav
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
other-hover:
target: other
state: hover
borderColor: "rgba(241, 237, 228, 0.55)"
input-hover:
target: input
state: hover
borderColor: "rgba(188, 218, 208, 0.58)"
backgroundColor: "rgba(13, 19, 32, 0.84)"
button-hover:
target: button
state: hover
borderColor: "rgba(188, 218, 208, 0.58)"
backgroundColor: "rgba(13, 19, 32, 0.84)"
link-hover:
target: link
state: hover
opacity: 0.6
card-hover:
target: card
state: hover
boxShadow: "rgba(14, 47, 126, 0.08) 0px 14px 34px"
transform: "translateY(-3px)"
borderColor: "rgba(30, 108, 196, 0.28)"
button-focus-visible:
target: button
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
link-focus:
target: link
state: focus
transform: none
other-focus-visible:
target: other
state: focus-visible
outline: "{colors.primary} solid 2px"
outlineColor: "{colors.primary}"
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 331
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 23
- width: 768
containerWidth: 688
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 46
- width: 1024
containerWidth: 944
gridColumns: 4
navLinksVisible: 7
menuToggleVisible: false
headingPx: 61
bodyPx: 16
sectionPaddingX: 61
- width: 1280
containerWidth: 1126
gridColumns: 4
navLinksVisible: 7
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 77
- width: 1440
containerWidth: 1267
gridColumns: 4
navLinksVisible: 7
menuToggleVisible: false
headingPx: 57
bodyPx: 16
sectionPaddingX: 88
coverage:
statesFound: 61
gradientsFound: 7
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
River AI's design system embodies a premium, technology-forward aesthetic rooted in deep blues and luminous accents. The visual language conveys cutting-edge machine learning infrastructure through a carefully controlled dark-to-light gradient spectrum, layered glassmorphic surfaces, and precise geometric composition. The palette shifts between a rich, near-black hero section (#081333) and bright, accessible surfaces (#FFFFFF, #EDF1F7), creating visual hierarchy and drawing focus to interactive elements. The system employs subtle inset shadows and directional gradients to suggest depth and dimension without heavy contrast, reinforcing a sophisticated, research-oriented brand identity. Typography is bold and generous at display scales, reinforcing confidence in the platform's capabilities, while body text remains measured and readable across all devices.
Key Characteristics
#BDD7FF) as a high-contrast CTA signifier{colors.primary} — #BDD7FF): Primary call-to-action fills, active states, and brand mark highlight. Provides high contrast against dark hero sections and stands out on light surfaces.{colors.accent} — #5870A7): Hero band and section dividers; used in supporting brand messaging and decorative elements.{colors.accent-1} — #4B6080): No measured role; reserved for decorative or future accent layering.{colors.accent-2} — #254E99): No measured role; reserved for decorative elements or themed overlays.{colors.accent-3} — #146C52): No measured role; available for thematic variation or future semantic assignments.{colors.accent-4} — #A1AFD0): No measured role; decorative accent for layered visual treatments.{colors.accent-5} — #8FA3C9): No measured role; decorative accent for supporting backgrounds.{colors.link} — #697A9B): Inline hyperlinks in body copy and navigation. Underlines on hover; transforms to brand accent on dark backgrounds.{colors.canvas} — #EDF1F7): Default page background; supports light content and establishes baseline brightness.{colors.surface} — #FFFFFF): Primary card and panel background; ensures content clarity and print-friendly output.{colors.surface-alt} — #0B1B46): Alternating section band (hero, footer); label text color on brand-colored surfaces.{colors.ink} — #A9B9D3): Primary heading and prominent text color; reserves strong contrast for critical information.{colors.body} — #B8C7DF): Body copy and standard paragraph text; maintains legibility at all sizes.{colors.muted} — #C5D1E5): Captions, secondary text, and de-emphasized content.{colors.faint} — #D5DFEF): Tertiary text, placeholder input text, and disabled states.{colors.hairline} — #162B50): 1px borders, dividers, and subtle structural lines.Primary: Instrument Sans (sans-serif, all roles except code)
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serifSecondary (Code): JetBrains Mono, then monospace
'Courier New', monospaceForm inputs: Arial (as measured)
Arial, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Instrument Sans | 57px | 600 | 1.03 | -1.71px | Hero headline; compress for impact |
| Display Medium | Instrument Sans | 56px | 600 | 1.06 | -1.68px | Large section heading; strong visual anchor |
| Display Small | Instrument Sans | 46px | 600 | 1.06 | -1.38px | Secondary hero or featured section |
| Heading Medium | Instrument Sans | 28px | 600 | 1.15 | -0.62px | Section title within content |
| Heading Small | Instrument Sans | 20px | 600 | 1.20 | -0.32px | Subsection or card title |
| Body Large | Instrument Sans | 19px | 400 | 1.65 | 0px | Prominent body copy, callouts |
| Body Extra Large | Instrument Sans | 21px | 400 | 1.50 | 0px | Feature description, large body context |
| Body Medium | Instrument Sans | 17px | 400 | 1.60 | 0px | Standard body copy, primary text |
| Body Small | Instrument Sans | 16px | 400 | 1.60 | 0px | Secondary body, sidebar text |
| Button | Instrument Sans | 24px | 400 | — | 0px | CTA text; size appears oversized, verify layout context |
| Label Medium | Instrument Sans | 15px | 400 | 1.50 | 0px | Form label, metadata tags |
| Body Extra Small 2 | Instrument Sans | 13px | 500 | 1.60 | -0.13px | Compact labels, badge text |
| Label Small | Arial | 13.33px | 400 | — | 0px | Input placeholder, form hint |
| Body Extra Small | Instrument Sans | 14px | 400 | 1.60 | 0px | Footer text, fine print |
| Caption Extra Small | Instrument Sans | 12px | 400 | 1.40 | 0px | Image captions, credits |
| Caption Extra Small Loose | Instrument Sans | 12px | 400 | 1.50 | 0px | Looser-set captions for emphasis |
| Label Extra Small | Instrument Sans | 12px | 500 | 1.40 | 0px | Table headers, small metadata |
| Code Small | Monospace / JetBrains Mono | 13px | 400 | 1.65 | 0px | Inline and block code |
| Code Extra Small | JetBrains Mono | 12px | 400 | 1.60 | 0px | Compact code blocks |
| Code Extra Small Loose | JetBrains Mono | 12px | 400 | 1.90 | 0px | Spacious code rendering |
| Code Extra Small 2 | JetBrains Mono | 12px | 400 | 1.70 | 0.48px | Alternative code spacing |
-1.71px to -0.32px) to optically tighten letterforms and enhance visual impact. This is a defining characteristic and must be preserved in all implementations.Primary Button
{colors.primary} (#BDD7FF){colors.surface-alt} (#0B1B46)12px 20px{typography.body-sm} (16px){rounded.none} (0px) — square corners; sharp, modern aestheticrgba(13, 19, 32, 0.84); adjust text for contrastFilled Button (CTA variant)
rgb(37, 78, 153) (deep blue)rgb(244, 247, 255) (off-white)12px 22px{typography.body-sm} (16px)1px solid rgb(37, 78, 153){rounded.full} (9999px) — pill-shapedrgba(255, 255, 255, 0.08), border adaptsSmall Filled Button (Outline variant)
rgba(255, 255, 255, 0.05) (transparent-white)rgb(169, 185, 211) ({colors.ink})9px 18px{typography.caption-xs} (12px)1px solid rgba(237, 241, 247, 0.2){rounded.full} (9999px)Default Card
rgb(233, 238, 248) (light blue-white){colors.surface-alt} (#0B1B46)28px{typography.body-sm} (16px){rounded.md} (14px)rgba(14, 47, 126, 0.08) 0px 14px 34px; transform translateY(-3px); border tint to rgba(30, 108, 196, 0.28)Large Card (with inset highlight)
rgba(0, 0, 0, 0) (transparent; content shows through)rgb(22, 43, 80) (deep ink)40px{typography.body-sm} (16px){rounded.lg} (20px)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 -18pxrgb(30, 108, 196), text-decoration underlineText Input
rgba(13, 19, 32, 0.84) (very dark, semi-transparent){colors.ink} (#A9B9D3)12px 16px{typography.label-sm} (13.33px from Arial measure)1px solid (border-color context-dependent){rounded.none} (0px) — square corners{colors.faint} (#D5DFEF)rgba(188, 218, 208, 0.58), background rgba(13, 19, 32, 0.84)Header Navigation Bar
rgba(0, 0, 0, 0) (transparent)rgb(237, 241, 250) (off-white)8px 8px 8px 22px{typography.body-sm} (16px){rounded.full} (30px, for pill-like nav container)color-mix(in srgb, currentcolor 13%, transparent), color adapts to var(--lab-accent) on context switchoutline: currentcolor solid 2pxText Badge (Pill)
rgba(0, 0, 0, 0) (transparent)rgb(11, 27, 70) (deep ink)0px 13px{typography.body-md} (17px){rounded.full} (9999px)rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(143, 179, 236, 0.5) 0px 2px 8px -2pxSmall Badge
rgba(0, 0, 0, 0) (transparent)rgb(237, 241, 250) (off-white)0px{typography.body-md} (17px){rounded.none} (0px)Link (Default, footer/dark context)
rgba(0, 0, 0, 0) (transparent)rgb(237, 241, 250) (off-white)6px{typography.body-md} (17px){rounded.full} (9999px, for subtle pill effect)rgba(255, 255, 255, 0.2) 0px 1px 0.5px 0px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16pxrgb(189, 215, 255) or context-dependentLink (Large, light context)
rgba(0, 0, 0, 0) (transparent){colors.surface-alt} (#0B1B46)12px 22px{typography.body-sm} (16px){rounded.full} (9999px)rgb(30, 108, 196) or brand accent, transform translateX(2px)The system uses an 8px base unit scaled into 10 semantic steps:
| Token | Value | Usage Context |
|---|---|---|
{spacing.xxs} | 4px | Micro-adjustments, inset borders |
{spacing.xs} | 8px | Tight component padding, small gaps |
{spacing.sm} | 12px | Padding within buttons, input spacing |
{spacing.md} | 16px | Standard padding, body text line-adjacent margins |
{spacing.lg} | 20px | Card internal padding, moderate section margins |
{spacing.xl} | 24px | Generous component padding, section top/bottom spacing |
{spacing.xxl} | 28px | Card padding (28px measured on default card) |
{spacing.xxxl} | 32px | Section stacking, major content margins |
{spacing.section} | 36px | Between major sections |
{spacing.band} | 40px | Large card padding (40px measured on large card) |
Apply {spacing.md} (16px) as baseline body text margin and input padding; escalate to {spacing.band} (40px) for card internal padding and major section separation.
Max Width (desktop, 1440px viewport):
88px (left/right margin from viewport edge)Grid Strategy:
Section Padding (Responsive):
23px horizontal padding46px horizontal padding61px–88px horizontal paddingWhitespace is generous and strategic, creating visual breathing room and guiding attention through progressive disclosure. The system avoids clustering; large headings are followed by substantial vertical gaps ({spacing.band} or more), and card padding is internal and consistent (28px–40px). Between sections, use {spacing.section} (36px) minimum; for dramatic emphasis (hero to content), employ 2–4× that spacing. Horizontal padding scales with viewport, ensuring comfortable reading width on all devices.
{rounded.none} = 0px — Buttons (primary), inputs, images, badges (some variants); sharp, geometric aesthetic.{rounded.xs} = 6px — Small interactive outlines, compact badges.{rounded.sm} = 12px — Secondary UI elements; subtle rounding.{rounded.md} = 14px — Default card border radius; measured on default card variant.{rounded.lg} = 20px — Large card radius; emphasizes premium, spacious containers.{rounded.full} = 9999px — Pill-shaped buttons, links, navigation bars, badges; modern, approachable.Component-Specific Radius:
{rounded.md} (14px) or {rounded.lg} (20px){rounded.full} (9999px){rounded.none} (0px){rounded.none} (0px){rounded.full} (30px, bespoke)1px): Used on buttons (border separating interior states), inputs (control boundary), badges (fine outlines). Provides visual structure without heaviness.2px): Applied to focus states (outline: 2px solid) for keyboard navigation, ensuring sufficient visibility contrast.The system employs a layered-micro approach: depth arises from layered semi-transparent inset highlights and subtle drop shadows, not aggressive shadow stacking. Elevation is communicated through graduated opacity overlays and color-blocking (surface changes) rather than shadow alone.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no inset | Input fields, simple backgrounds |
| Micro Inset | rgba(255, 255, 255, 0.5) 0px 1px 0px inset or rgba(255, 255, 255, 0.2) 0px 1px 0.5px inset | Badges, links (subtle lift) |
| Base Layered | rgba(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 | Large cards (primary depth indicator) |
| Elevated (Hover) | rgba(14, 47, 126, 0.08) 0px 14px 34px with transform: translateY(-3px) | Card hover state; implies lift and interactivity |
| Maximum (Context-specific) | rgba(255, 255, 255, 0.25) 0px 1px 0.5px inset, rgba(1, 6, 20, 0.5) 0px 10px 30px -16px | Emphasis overlays, hero links |
Shadow Philosophy: Inset highlights suggest internal dimension and are preferred over drop shadows. When drop shadows do appear (card hover, context emphasis), they are soft and diffused (blur-radius 14px–30px), supporting the premium, polished aesthetic. Avoid multiple shadows on the same element unless creating layered depth (as in the large card's three-part shadow).
The system uses opacity to express state and hierarchy without altering hue:
Apply opacity to interact-able elements sparingly: reserved primarily for disabled states, secondary information, and decorative overlays.
| Layer | Z-index | Use |
|---|---|---|
| Base | 1–3 | Document flow; cards, body content, default containers. |
| Dropdown | 50 | Floating menus, popovers, context panels; above base, below sticky. |
| Sticky | 100 | Fixed navigation headers, sticky sidebars; persistent across scroll. |
| Modal / Overlay | 200+ | Not measured; reserve for future modal and full-screen overlay implementations. |
Use minimal z-index increments within each tier to avoid stacking conflicts. Ensure sticky navigation (z-index 100) sits above all interactive content except modals.
{rounded.full}) for primary CTAs and navigation elements; reserve {rounded.none} (square) for secondary or utilitarian buttons.{spacing.md} (16px), {spacing.lg} (20px), and {spacing.band} (40px) for major breaks.outline: 2px solid currentcolor or rgb(189, 215, 255) for sufficient contrast.{colors.body} and {colors.muted}.23px at mobile, 46px at tablet, and 61px–88px on desktop.{rounded.full}, but variants may remain {rounded.none}.translateY(-3px)), links shift (translateX(2px)), and navigation highlights with mixed opacity and background color.| Breakpoint | Viewport Width | Content Column | Grid Columns | Nav Links Visible | Key Changes |
|---|---|---|---|---|---|
| Mobile | 375px | 331px | 2 | Hidden (1 toggle) | Display text 40px; section padding 23px; menu collapses to hamburger. |
| Tablet | 768px | 688px | 2 | Hidden (1 toggle) | Display text 46px; section padding 46px; still two-column grid; menu toggle remains. |
| Desktop (Small) | 1024px | 944px | 4 | 7 (visible) | Display text 61px; section padding 61px; full navigation visible; four-column grid active. |
| Desktop (Medium) | 1280px | 1126px | 4 | 7 (visible) | Display text 56px (slight reduction for narrow content); section padding 77px. |
| Desktop (Large) | 1440px | 1267px | 4 | 7 (visible) | Display text 57px (standard); section padding 88px; maximum usable width. |
Breakpoint Logic:
6px–12px internal padding to expand touch-target area without resizing the text itself.{spacing.md} (16px) minimum to prevent accidental mis-taps.{typography.display-lg} (57px) to {typography.heading-sm} (40px); scale proportionally at 768px (46px).88px (1440px) to 23px (375px) in steps: 88px → 77px → 61px → 46px → 23px.Use these mappings to quickly assign semantic color roles:
{colors.primary} — #BDD7FF) — high contrast, fills primary buttons; draw focus on light backgrounds.{colors.accent} — #5870A7) — dividers, supporting brand messaging, decorative overlays.{colors.canvas} — #EDF1F7) — default page background, soft and neutral.{colors.surface} — #FFFFFF) — primary content containers, ensures clarity.{colors.surface-alt} — #0B1B46) — dark band sections, label text on brand colors.{colors.ink} — #A9B9D3) — primary headings and prominent information.{colors.body} — #B8C7DF) — standard paragraph text, legible at 16px+.{colors.muted} — #C5D1E5) — captions, metadata, de-emphasized content.{colors.faint} — #D5DFEF) — input placeholders, disabled state text.{colors.hairline} — #162B50) — 1px structural lines.{colors.link} — #697A9B) — underlines on hover; switches to brand accent on dark surfaces.Typography cascade: Always apply negative letter-spacing to display and heading roles. Start with {typography.display-lg} (57px, -1.71px tracking) for hero headlines; scale down to {typography.heading-sm} (20px, -0.32px) for subsections. Match line-height discipline: displays 1.03–1.06, body 1.50–1.65.
Color hierarchy: Layer surfaces from darkest (#0B1B46 hero) through light (#FFFFFF surface) to neutral (#EDF1F7 canvas). Use hairline borders sparingly; let color shifts carry visual structure.
Spacing rhythm: Pad components consistently using {spacing.band} (40px) for cards, {spacing.md} (16px) for inputs, and {spacing.lg} (20px) for section gaps. Never add arbitrary margins; refer to the 8px scale.
Radius consistency: Apply {rounded.full} (9999px) to all primary interactive elements (CTA buttons, pill badges, nav container) unless the design explicitly specifies sharp corners ({rounded.none}). Use {rounded.md} or {rounded.lg} for card containers only.
Depth via inset, not shadow: Prefer rgba(255, 255, 255, 0.5) 0px 1px 0px inset on small interactive elements; reserve drop shadows (rgba(X, Y, Z) 0px 14px 34px) for hover states and emphasis. Avoid stacking multiple shadows unless creating deliberate layering (as in large cards).
Responsive scaling: At 375px, set display text to 40px and section padding to 23px. Scale linearly through breakpoints to 57px and 88px at 1440px. Use CSS clamp() or viewport-relative units (vw) to smooth intermediate sizes.
Interactive hover states: All clickable elements should respond: buttons darken background and adjust border; cards lift with translateY(-3px) and gain drop shadow; links underline and shift color. Never create a "dead" interactive element without feedback.
Focus accessibility: Add outline: 2px solid currentcolor or rgb(189, 215, 255) to all interactive elements for keyboard navigation. Ensure sufficient contrast between focused and unfocused states.
Semantic status colors: No error, success, warning, or info colors were extracted from the site. If validation states are needed, they must be added as brand extensions (not inferred from the current palette).
Interaction state subtlety: Extracted data provides hover/focus states for major components but may lack nuance for tertiary interactions (e.g., pressed state on tabs, multi-select patterns, loading spinners). Implement conservatively using the observed transforms and opacity shifts.
Dark mode: The system exhibits a light canvas with dark hero sections but is not a full-fledged dark theme. No extracted dark-background color ramp exists for generic dark-mode support; any dark mode would require separate design and extraction.
Animation/motion: No transition durations, easing functions, or keyframe animations were measured. Interaction transforms (e.g., translateY(-3px), translateX(2px)) are CSS-ready but lack timing specifications; assume 200–300ms ease-in-out curves as reasonable defaults.
Disabled state styling: While opacity levels (0.55–0.91) are available, no explicit "disabled" button, input, or link style was directly extracted. Use reduced opacity (0.55–0.64) and {colors.faint} as a conservative disabled palette.
Print styles: No print-specific colors, spacing, or typography adjustments were measured. Assume standard web-to-print defaults or conduct separate extraction for print parity.
Authenticated/account surfaces: Analysis covered only the public homepage. Logged-in interfaces, dashboards, and account pages were not captured; their design may differ.
Error/warning UI patterns: No explicit error message, alert, or notification components were analyzed. If these are needed, they should reference the extracted color palette (particularly decorative accents like #146C52 or #254E99 for contextual theming) rather than be invented from whole cloth.
Micro-interactions and micro-animations: Measured hover states are static CSS property changes; no recorded delay, stagger, or sequential animation patterns were provided. Implement timing conservatively or conduct motion extraction separately.
Unused accent colors: Five accent colors ({colors.accent-1} through {colors.accent-5}) have no measured semantic role. They may be reserved for future use, thematic variations, or data visualization. Do not assign them roles without additional design context.