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

# Sparkles · Design System

> Warm editorial clarity for collaborative coding agents

**Theme:** light · **Industry:** ai · **Source:** https://sparkles.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._

Sparkles pairs an understated warm-neutral canvas with expressive serif headlines and playful hand-drawn character art. A spacious, product-led homepage moves from a clear signup pitch through workflows and pricing to FAQ and conversion sections.

## North star

Use warm editorial typography and generous space to make a practical developer product feel clear, human, and approachable.

## Overview

The visual strategy balances a restrained SaaS interface with a distinctive, friendly editorial voice. Warm off-white (#f5f5f4) carries most of the page, while pale gray-beige bands distinguish sections without introducing heavy contrast. Near-black headings and filled calls to action provide clear anchors; muted gray supports explanatory copy. Gelica serif headlines bring a soft, literary character to hero and section titles, while Inter handles navigation, body text, labels, and controls with practical clarity. A large hand-drawn assembly of colorful geometric characters gives the hero its memorable focal point; those illustration colors are supporting artwork, not the core interface palette. The page alternates centered introductions, paired product demonstrations, and split explanatory content, then uses a two-card pricing layout and a softly differentiated FAQ band. Generous vertical breathing room, thin borders, restrained shadows, and rounded controls keep the dense information approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f5f5f4` | `--color-warm-canvas` | surface | Dominant page canvas and the light base behind the hero and most content. |
| Soft Graphite | `#555555` | `--color-soft-graphite` | neutral | Primary muted copy, badge text, and supporting explanatory text. |
| Stone Band | `#efeeec` | `--color-stone-band` | surface | Subtle card, badge, and section surface contrast, including the FAQ band. |
| Quiet Line | `#dad9d7` | `--color-quiet-line` | neutral | Thin borders around badges, cards, media, and other restrained dividers. |
| Near Black | `#0a0a0a` | `--color-near-black` | brand | Display and body text, navigation links, dark interface details, and dark CTA surfaces. |
| Mint Trace | `#a4f4cf` | `--color-mint-trace` | semantic | Sparse badge detail; a minor interface accent rather than a defining page color. |
| Fresh Green | `#54b16c` | `--color-fresh-green` | accent | Prominent green footer surface and occasional supporting interface accents. |
| Charcoal Ink | `#18181b` | `--color-charcoal-ink` | neutral | Secondary navigation and button text, footer details, and compact interface labels. |
| Deep Teal | `#007a55` | `--color-deep-teal` | semantic | Rare badge or small text accent; not a dominant site color. |
| Apricot Tag | `#f4d8ae` | `--color-apricot-tag` | accent | Warm highlight behind the compact #sparkles badge. |
| Paper White | `#fafafa` | `--color-paper-white` | surface | Light text and button foreground against dark call-to-action surfaces. |
| Forest Panel | `#2a6942` | `--color-forest-panel` | accent | Green product-demo panel and card artwork; a supporting product surface. |
| Pale Divider | `#e5e4e3` | `--color-pale-divider` | neutral | Occasional subtle border or separator detail. |
| Cool Gray | `#d4d4d8` | `--color-cool-gray` | neutral | Minor muted interface text, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#f5f5f4` (Warm Canvas) · `--color-surface` → `#efeeec` (Stone Band) · `--color-surface-2` → `#0a0a0a` (Near Black) · `--color-surface-3` → `#2a6942` (Forest Panel) · `--color-text` → `#0a0a0a` (Near Black) · `--color-text-muted` → `#555555` (Soft Graphite) · `--color-text-subtle` → `#18181b` (Charcoal Ink) · `--color-border` → `#dad9d7` (Quiet Line) · `--color-accent` → `#54b16c` (Fresh Green) · `--color-accent-2` → `#f4d8ae` (Apricot Tag) · `--color-accent-3` → `#2a6942` (Forest Panel) · `--color-on-accent` → `#181818`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#f5f5f4` | 18.15:1 | AAA |
| `#0a0a0a` | `#efeeec` | 17.07:1 | AAA |
| `#0a0a0a` | `#2a6942` | 3.01:1 | AA-large |
| `#555555` | `#f5f5f4` | 6.83:1 | AA |
| `#555555` | `#efeeec` | 6.43:1 | AA |
| `#555555` | `#0a0a0a` | 2.66:1 | fail |
| `#555555` | `#2a6942` | 1.14:1 | fail |
| `#18181b` | `#f5f5f4` | 16.24:1 | AAA |
| `#18181b` | `#efeeec` | 15.28:1 | AAA |
| `#18181b` | `#0a0a0a` | 1.12:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, labels, and buttons. | Inter |
| Gelica | `--font-display` | webfont | 600, 500 | Hero display and section headings. | Lora |

- **Inter:** Mostly regular to semibold; compact navigation and labels, uppercase tracked eyebrow text, otherwise natural sentence case.
- **Gelica:** Use measured medium and semibold weights for expressive editorial headings; keep tracking neutral and case natural.

### Type scale — Perfect Fifth (ratio ≈ 1.494, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.04 | 0 | — | Gelica | Large serif hero or feature headline. |
| h1 | 48px | 600 | 1 | 0 | — | Gelica | Primary page and major section headings. |
| h2 | 24px | 600 | 1.33 | 0 | — | Gelica | Subsection titles and card headings. |
| body | 18px | 400 | 1.56 | 0 | — | Inter | Explanatory paragraphs and feature descriptions. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter | Small helper text, notes, and supporting labels. |
| button | 20px | 500 | 1.25 | 0 | — | Inter | Primary CTA text, with clear medium-weight emphasis. |
| nav | 14px | 600 | 1.43 | 0 | — | Inter | Compact semibold navigation links. |
| eyebrow | 12px | 500 | 1.33 | 0.28em | uppercase | Inter | Small uppercase, widely tracked section labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 64 px.
- Section rhythm 144px · element gap 8px · card padding — · max content width —.

Use a centered, wide desktop composition with a slim top navigation and a separate narrow announcement strip. The hero is a two-column split: centered copy and trust marks on one side, large character artwork on the other. Subsequent sections alternate centered introductions, paired product demonstrations, and split feature content. Pricing uses two side-by-side cards; FAQ is a distinct full-width band. Keep the vertical rhythm spacious, with large gaps between major sections and tighter spacing within controls and copy groups. The page is visually calm rather than grid-dense.

## Shape & elevation

- Radius: button `8px` · card `10px` · media `8px` · badge `9999px` · xs `6px` · sm `8px` · md `10px` · lg `14px` · xl `16px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `sm` (card, media, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep surfaces largely flat. Use thin pale borders to define cards, screenshots, badges, and pricing panels, with only a restrained small shadow where measured. Layering comes from section background shifts and framed product media, not dramatic elevation, gradients, or floating overlays.

## Imagery

The signature visual is a hand-drawn arrangement of geometric characters with heavy black outlines, simple eyes, and warm, saturated fills. It appears large in the hero and again beside FAQ content. Product UI is shown in framed screenshots or demos, sometimes paired to explain workflow; keep those images subordinate to the surrounding copy. The page relies on illustration and interface imagery rather than lifestyle photography or polished 3D.

## Components

### Top navigation

Light canvas header with a compact brand mark, semibold Inter links, sign-in control, and dark Book a demo CTA.

### Announcement strip

Centered backing notice beneath the navigation, separated by thin hairlines and using a small partner mark.

### Hero CTA group

Centered serif headline and muted supporting copy, paired with sign-in and dark demo buttons; trust marks sit below.

### Product workflow panels

Side-by-side web and Slack product views, framed as restrained media panels with concise explanatory captions.

### Pricing cards

Two bordered plan cards for credits and enterprise, with concise feature lists and full-width dark action buttons.

### FAQ accordion

A pale contrasting band with character artwork on one side and a question list with compact dividers on the other.

### Dark closing CTA

Near-black full-width conversion band with a serif headline, outlined sign-in option, and light-filled demo button.

### Green footer

Fresh green closing surface with brand artwork, grouped link columns, social marks, and legal details.

### Measured component styles

- **Primary button** (“#sparkles”): background #f4d8ae · text #181818 · radius 8px · padding 6px 8px · 600 11px Inter
- **Secondary button** (“Book a demo”): background #171717 · text #fafafa · radius 8px · padding 8px 16px · 500 14px Inter
- **Link** (“Moonfire Ventures Akshat Goenka”): transparent background · text #0a0a0a · radius 0px · padding 20px 16px · 400 16px Inter
- **Card** (“Search #channels Sparkles Workspace CHAN”): background #2a6942 · text #0a0a0a · border 1px solid #dad9d7 · radius 16px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“GitHub”): transparent background · text #555555 · border 1px solid #dad9d7 · radius 3.35544e+07px · padding 6px 12px · 500 12px Inter
- **Navigation item** (“Home”): transparent background · text #18181b · radius 0px · padding 0px · 600 14px Inter

## Do

- Use Warm Canvas (#f5f5f4) as the primary page background.
- Set major headlines in an expressive serif and interface copy in Inter.
- Keep section transitions spacious and visually calm.
- Use Near Black (#0a0a0a) for strong text and primary dark actions.
- Frame product screenshots with restrained borders rather than dramatic effects.
- Treat the colorful character artwork as illustration, not as the interface palette.

## Don't

- Don't introduce gradients or glossy, high-elevation cards.
- Don't use the illustration's colors as broad page backgrounds.
- Don't compress the long-page section rhythm into a dense dashboard.
- Don't replace the serif headlines with generic all-sans typography.
- Don't make every section a card grid.
- Don't use heavy borders where a subtle hairline is sufficient.

## Agent prompt

Build a new page in Sparkles' warm editorial SaaS style. Use Warm Canvas (#f5f5f4) as the dominant background, Near Black (#0a0a0a) for primary text and dark CTAs, Soft Graphite (#555555) for supporting copy, Stone Band (#efeeec) for subtle section contrast, and Quiet Line (#dad9d7) for borders. Pair expressive Gelica-style serif headlines with Inter-like navigation, body text, and controls. Favor a spacious centered layout with clear section groupings, split product-and-copy areas, and restrained two-card panels where useful. Use hand-drawn geometric character artwork as a distinctive supporting visual, not as a cue to flood the interface with bright colors. Keep shadows minimal, corners softly rounded, CTAs obvious, and content readable. Avoid gradients, dense dashboard styling, and excessive decoration.

## Source CSS custom properties (selected)

```css
--radius: .625rem;
--surface-0: oklch(97% .002 90);
--surface-1: oklch(95% .003 90);
--surface-2: oklch(98.5% .001 90);
--surface-3: oklch(99.5% 0 0);
--surface-4: oklch(100% 0 0);
--background: oklch(97% .002 90);
--foreground: oklch(14.5% 0 0);
--card-foreground: oklch(14.5% 0 0);
--popover-foreground: oklch(14.5% 0 0);
--primary: oklch(20.5% 0 0);
--primary-foreground: oklch(98.5% 0 0);
--secondary: oklch(95% .003 90);
--secondary-foreground: oklch(20.5% 0 0);
--muted-foreground: oklch(45% 0 0);
--accent: oklch(95% .003 90);
--accent-foreground: oklch(20.5% 0 0);
--border: oklch(88.5% .003 90);
--sidebar-foreground: oklch(14.5% 0 0);
--sidebar-primary: oklch(20.5% 0 0);
--sidebar-primary-foreground: oklch(98.5% 0 0);
--sidebar-accent: oklch(97% .002 90);
--sidebar-accent-foreground: oklch(20.5% 0 0);
--sidebar-border: oklch(88.5% .003 90);
--paper-texture-blend: multiply;
--clay-border: oklch(65.9% .039 24.452);
--terminal-foreground: oklch(93% .004 286);
--terminal-border: oklch(100% 0 0/.12);
--diff-addition-surface: oklch(96% .045 145);
--diff-addition-border: oklch(82% .09 145);
--diff-deletion-surface: oklch(96% .035 24);
--diff-deletion-border: oklch(84% .08 24);
```

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