SplashNG — "Quiet Blue" design system

SplashNG v0.1.13 is a light/dark design system for SaaS cabinets and web UI: agent tasks, runs, approvals, artifacts, settings. Marketing surfaces and product surfaces share one token set, one type family, and one accent.

The aesthetic in one line: Apple-consumer calm meets a working tool — near-white canvas, hairline borders, one type family, a single cobalt accent doing all the talking, and information-dense miniature panels that feel like the real app.

Brand

• Name: SplashNG. One name everywhere — files, wordmark, docs.
• Mark: a 26px rounded square (radius 7), --accent-fill ground, white "S" at 700. Always paired with the wordmark at app scale; never used alone below 20px.
• Wordmark: "SplashNG" in the system stack at 700, -0.02em. No separate wordmark font.

Content fundamentals

• Outcome-first, declarative copy. Headlines promise finished work: "AI that gets your everyday tasks done." The accented word is the payoff word.
• Sentence case everywhere. No Title Case. Uppercase only for 11px micro-labels (ASSISTANT, YOU) with letter-spacing: .07em.
• Middle dot · as the universal separator: "Coworker · any model", "Markdown · PDF · Images".
• Arrows as verbs: → forward ("Download for Mac →", "Leaves this Mac → Email"), ↗ outbound/delta, › drill-in, ← back.
• Approve/deny microcopy is human: "Approve" / "Not now" (never "Cancel/Deny"). Check-ins phrased as questions: "Email the follow-up to their CTO?"
• File names in mono, always with extension: northwind-renewal-brief.html.
• Em-dash pattern for spec lines: "Works with — HubSpot · Email · Calendar".
• No emoji. Ever.
• Voice: second person ("you stay in charge"), quietly confident, no exclamation marks.

Visual foundations

• Canvas: page --bg #FBFBFD; app workspace --paper #F5F6F7; raised surfaces pure white --panel. Whisper-quiet radial blue washes (≤6% opacity) behind marketing pages only — never in product UI.
• Tertiary text is --faint (#656C74, AA on every surface) — group headers, ids, timestamps. --faint-quiet (#9AA1AA) is non-informational only: dividers, disabled, placeholders.
• Hairlines everywhere: 1px --line #E8EAED; --line-strong #D8DCE1 for interactive controls. Borders do the separating; shadows do the floating.
• One accent, two roles: --accent for accent TEXT and ICONS (#2563EB; dark lifts to #4C8DFF). --accent-fill for SOLID fills carrying white text — primary buttons, active nav, badges. Never fill with --accent. Solid fills hover/press with --accent-fill-hover (mixed from the fill) — never --accent-deep, which is a text color in dark. 15 alternative accent sets via data-accent (16 hues counting default cobalt), 8 background tones via data-tone — components read only the variables, never a hue.
• Semantic colors muted, paired ink+soft: ok #2F7D57/#EEF6F0, warn #B45309/#FEF3C7, danger #B91C1C/#F9E7E5, teal (connector badges only) #0F766E/#EDFAFA.
• Type: system stack only (-apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif, named weights 400/500/600/700) + IBM Plex Mono for paths/code/models. Integer px scale: 10 chrome floor (badge pills, avatar initials — nothing smaller ships) · 11 caps (uppercase only) · 12 caption · 13 body (the workhorse) · 15 prose · 17 lede · 19 card title · 24 pane · 30 page · display clamp(32px, 3.9vw, 44px) at 700/−0.022em/1.07. Weights never repeat two steps in a row: 400 body · 500 medium and ledes · 600 emphasis, titles and micro-labels · 700 display only. Tracking is negative for display sizes and barely there for UI text (−0.006em at 13–19px), never below 13px.
• Cards: white, --radius-lg 13px (product) / --radius-xl 18px (marketing), 1px hairline + layered soft shadow. Hover lift + --shadow-pop on marketing cards only.
• Buttons: product = compact rects (--radius-sm 7px); marketing = pills with colored glow. Primary hover: darker fill + translateY(-1px); active scale(.98); arrow slides 3px on hover.
• Frosted bars: sticky headers use --glass + backdrop-filter: blur(16px) saturate(1.6) over a hairline.
• Motion: one house curve cubic-bezier(.22,.6,.2,1); rises 18–22px + fade; ~.09s staggers; everything collapses under prefers-reduced-motion.
• Dark theme: data-theme="dark" on <html> — workspace #131417, panels #1C1E22, ink #E6E8EB. Screens never branch on theme.
• Density: miniature and information-rich — 13px body, 11px micro-labels, 32–46px controls, 236px sidebar (--sidebar-w), 54px topbar (--topbar-h), 332px inspector.

Responsive (mobile-first)

One layout system, two shells. Breakpoints: 768px (app shell) and 1180px (inspector rail); marketing/auth headers tighten below ~560–720px.

• App shell <768px: sidebar → bottom tab bar, max 5 items (Tasks / Projects / Runs / Artifacts / More), ≥48px targets, badges carry over; everything else lives behind "More" in a bottom sheet. Inspector rails open as bottom sheets (scrim + grabber + close) from a row tap.
• Tables shed columns, never scroll sideways — each list computes available width and drops secondary columns (agent, tools, type, updated) in documented order; name + status survive last.
• Grids are auto-fit, minmax(), gutters step 32→16px; the density scale itself does not change on touch — rows are already 52–56px (fixed per species: 56 list row, 54 dense, 52 metric/add — see DECISIONS §Cabinet patterns).
• Reference implementation: Demo Cabinet.html (mobile/wide flags, Insp, Tab), Landing.html (stacked run rows), Signup.html.

Iconography

• Icons are stroke SVGs — components/core/Icon.jsx: Lucide-style geometry, 24px grid, 1.75 stroke, currentColor, sized 12–20px in UI. Add paths to Icon.jsx; never inline one-off SVGs in screens. No icon font, no emoji.
• Typographic glyphs stay in copy: → ↗ › · are verbs and separators inside text and buttons, not icons. Tinted icon containers: --accent-soft ground + accent glyph, --radius-sm.
• Progress checkboxes: 9px squares, 3px radius; done = accent fill + white ✓; active = accent dot ring.
• macOS traffic lights (--traffic-red / --traffic-amber / --traffic-green) on demo window chrome.
• Third-party logos are external SVGs (not shipped — third-party marks); logo-chip style: 42px pill-cards, hairline, 21px logo + 13px 600 label.

Accessibility (baseline, not optional)

• Text colors pass AA on their documented surfaces; --faint-quiet never carries information.
• Every interactive component draws the cobalt focus ring (--focus-ring) on keyboard focus (:focus-visible semantics); nav items, tabs, chips and menu items are real buttons or carry menu roles.
• Modal: role="dialog", focus trap, Esc closes, focus returns. Toast: role="status" polite. Banner danger: role="alert". Switch: role="switch".
• All motion honors prefers-reduced-motion.

The carousel pattern (heroCarousel)

The signature marketing pattern — a miniature app window demoing real work, one use-case per slide: app window with traffic lights → chat column (user bubble, collapsed steps, assistant answer, artifact chip) → approval card → progress/artifacts/access rail → artifact viewer sliding in → dots + ‹ › nav. Staged reveals (~3s holds), auto-advance. Implementation: components/patterns/CaseCarousel.jsx.

Index

• styles.css — demo/reference entry (imports everything under tokens/, incl. the Google Fonts import)
• styles.product.css — production entry: same tokens + reset, no font import (host self-hosts fonts, see ANGULAR.md §8)
• DECISIONS.md — binding adjudications from implementation audits (wins over cards/JSX/screens on conflict)
• docs.css — documentation shell for specimen cards only (never in product)
• tokens/ — colors.css (light+dark+accents+tones), typography.css, spacing.css, effects.css, fonts.css
• guidelines/ — foundation specs: colors ×5, type ×3, icons, radii, shadows, spacing, motion, voice
• components/core/ — Button, IconButton, Badge, Chip, Avatar, Icon
• components/forms/ — Input, Textarea, Select, Checkbox, Radio, Switch
• components/navigation/ — Sidebar, Topbar, Tabs, Breadcrumbs
• components/data/ — MetricCard, Table, ProgressList, ArtifactChip
• components/overlays/ — Modal, Toast, Dropdown, Tooltip, ApprovalCard
• components/feedback/ — Banner, Skeleton, Spinner, EmptyState
• components/patterns/ — CaseCarousel, Composer
• Cabinet.html (the working cabinet) · Landing.html (Today overview) · Signup.html (auth) — reference screens (project root); see ui_kits/examples/README.md
• SKILL.md — agent-skill entry point · CHANGELOG.md — version history · ANGULAR.md — Angular component implementation plan

Using this system in Claude Code

Drop the folder into your repo (e.g. design/splashds/), then:

1. Tokens are the contract. Import styles.css once (demos; use styles.product.css + self-hosted fonts in production) — every component reads CSS variables, so theming is document.documentElement.dataset.theme = "dark" and nothing else.
2. Components are plain React — dependency-free function components with inline styles, matching .d.ts + .prompt.md. Copy what you need.
3. Tell Claude Code where it lives — add to CLAUDE.md:

   Design system: design/splashds/ — read README.md before any UI work.
   Import design/splashds/styles.css (demos) or styles.product.css (production); use components from design/splashds/components/.
   Never invent colors, radii, or fonts: use the CSS variables in tokens/.
   

4. Start from a screen, not a blank page. Copy Cabinet.html as the reference layout for new cabinet screens.

Primitives (Table, Modal, Toast, Dropdown, Tabs) share the same foundations as everything else — no separate visual rules.