# Sparo VI Design System

> Source image: `png/VI.png`  
> This document extracts the visible design information from the VI board. A few very small labels are summarized where exact text is not fully legible.

## 1. Brand Basics

### Brand Name

- English name: **Sparo**
- Chinese naming cue: **点亮每个人的 AI 火种**
- English slogan: **Ignite AI for Everyone**

### Brand Keywords

- 有序
- 克制
- 清晰
- 可信赖
- 有活力
- 持续运行
- 面向大众
- 系统感

### Visual Language

- Primary visual cue: **印红 / 唤红**
- Role: **作为小型点缀信号，不作为主色**
- Core metaphor: a small ignition point, signal node, orbit, flow, and system connection.

## 2. Logo Concept & Construction

The Sparo logo is built from four symbolic elements:


| Element  | Meaning  |
| -------- | -------- |
| 字母 S     | 品牌识别     |
| 双轨运行     | 智能运转     |
| 印红节点     | 点燃信号     |
| Sparo 标志 | 点燃、流动、系统 |


### Logo Structure

- The symbol uses an abstract **S** constructed from curved orbital strokes.
- A red circular node sits near the center as the ignition point.
- A short red curved stroke extends the motion language.
- The mark should feel precise, restrained, and systematic rather than decorative.
- Construction diagrams use grid, circular, and angular references, including an approximate **18°** directional axis.

## 3. Logo Variants

### Available Variants


| Variant    | Usage                                           |
| ---------- | ----------------------------------------------- |
| Symbol     | Standalone mark for compact brand recognition   |
| Horizontal | Symbol plus `Sparo` wordmark                    |
| Stacked    | Symbol above `Sparo`, for centered layouts      |
| App Icon   | Symbol placed on dark rounded-square background |


### Wordmark

- Wordmark text: **Sparo**
- Typeface impression: geometric sans with generous spacing.
- Wordmark color: Sparo Ink / near-black navy.

### App Icon

- Background: Sparo Ink
- Foreground: white logo stroke plus Sparo Print Red / Echo Red accent
- Corner radius: moderate rounded square
- Use for desktop/app launch surfaces, dock/taskbar icon, and compact product identity.

## 4. Safe Space

- Minimum clear space is defined by **X**.
- `X` is based on the diameter of the red node inside the mark.
- Maintain at least `X` spacing around the full horizontal logo lockup.
- Do not crowd the logo with text, borders, icons, or panel edges.

## 5. Color Palette


| Token           | Hex / Value              | Usage                                              |
| --------------- | ------------------------ | -------------------------------------------------- |
| Sparo Ink       | `#0F172A`                | Primary brand ink, dark backgrounds, main wordmark |
| Sparo Graphite  | `#253044`                | Secondary dark UI surfaces and supporting text     |
| Sparo Slate     | `#5B6B8C`                | Muted text, secondary labels, subdued UI marks     |
| Sparo Print Red | `#B7372F`                | Main accent, ignition node, key action highlight   |
| Sparo Echo Red  | `#E06B5F`                | Secondary accent, motion echo, soft red emphasis   |
| Sparo Cloud     | `#F8FAFC`                | Light UI background                                |
| Sparo Surface   | `#FFFFFF`                | Cards, panels, clean surfaces                      |
| Sparo Border    | `rgba(15, 23, 42, 0.12)` | Dividers, panel outlines, subtle borders           |


### Color Principles

- Use dark navy/ink as the foundation.
- Use red sparingly as a signal, not as a large dominant field.
- Prefer quiet light surfaces with fine borders for product UI.
- Keep contrast clean and practical.

## 6. Typography

### Font Stack

- `Inter`
- `Geist`
- `Noto Sans SC`
- `HarmonyOS Sans SC`

### Type Scale


| Role          | Size / Weight / Tracking | Notes                                       |
| ------------- | ------------------------ | ------------------------------------------- |
| Hero          | `56-72 / 700 / 0`        | Large brand statements, e.g. “点亮每个人的 AI 火种” |
| Page Title    | `36-44 / 600-700`        | Main product page titles                    |
| Section Title | `22-28 / 600`            | Section headings                            |
| Body          | `16-18 / 400-500`        | Product descriptions and main content       |
| Caption       | `13-14 / 500`            | Status text, labels, helper copy            |


### Typography Principles

- Use clear hierarchy.
- Keep letter spacing neutral.
- Pair English and Chinese with a clean sans-serif system.
- Favor calm, readable product UI over expressive display typography.

## 7. Graphic System

The graphic language expands the logo’s orbital and node-based structure.

### Core Graphic Motifs


| Motif | Meaning       | Usage                                           |
| ----- | ------------- | ----------------------------------------------- |
| 轨道    | 有序的曲线，代表系统与运行 | Background lines, motion paths, product visuals |
| 节点    | 印红节点，作为点燃信号   | Key focus point, status marker, highlight       |
| 路径    | 连接与流线，形成系统路径  | Workflow diagrams, connection states            |
| 模块    | 卡片化模块，信息清晰层次  | Product cards, dashboard panels                 |
| 扩散    | 从一个点出发，连接更多可能 | Activation moments, onboarding, data flow       |
| 持续运转  | 闭环与循环，带来持续价值  | Automation, agent loops, task progress          |


### Graphic Style

- Thin orbital strokes.
- Small circular nodes.
- Dotted or light construction lines.
- Sparse red accents at decisive moments.
- Clean layout with generous whitespace.
- Visual rhythm should suggest flow, intelligence, and system coordination.

## 8. Application Preview

The VI board shows a desktop product interface using Sparo branding.

### UI Style

- Background: Sparo Cloud / Surface.
- Panels: white cards with subtle border.
- Accent: Sparo Print Red for active actions and progress.
- Icons: thin-line style.
- Layout: quiet, structured, productivity-focused.

## 9. Brand In Action

### Example Business Card

- Dark front side:
  - Sparo logo and slogan.
  - Red orbital path as visual accent.
- Light back side:
  - Sparo logo.
  - Name example: **Alex Wang**
  - Role example: **Product Designer**
  - Email example: `alex.wang@sparo.ai`
  - Website example: `www.sparo.ai`

### Example Dark Banner

Copy visible on board:

> 深色上的点红效果  
> 印红色建议配合深色背景使用，增强识别与层次。

### Example Icon Set

Shown categories:

- 智能助手
- 知识库
- 工作空间
- 自动化
- 数据分析

## 10. Usage Principles

The board summarizes eight usage principles:


| Principle     | Chinese | Guidance       |
| ------------- | ------- | -------------- |
| Order         | 有序      | 信息结构清晰，引用/层级明确 |
| Restraint     | 克制      | 色彩克制，突出重点      |
| Clarity       | 清晰      | 层次分明，易于理解      |
| Trust         | 可信赖     | 专业可靠，值得信赖      |
| Energy        | 有活力     | 点燃信号，激发行动      |
| Continuity    | 持续运行    | 系统循环，持续创造价值    |
| Public-facing | 面向大众    | 简单易用，为大众而生     |
| Systemic      | 系统感     | 整体一致，协同高效      |


## 11. Practical Implementation Notes

- Treat `#0F172A` as the main identity color.
- Reserve `#B7372F` for the logo node, active state, primary action, notification signal, or important progress.
- Use `#E06B5F` for secondary red echoes, never as the default button color unless the composition needs softness.
- Prefer white/light panels with `rgba(15, 23, 42, 0.12)` borders.
- Maintain restrained density: the identity should feel intelligent, operational, and calm.
- Keep all brand graphics aligned to orbit/path/node logic so decorative elements still feel systematic.

## 12. Website Element Library (extracted from `SparoOS-Website/website`)

The Sparo OS marketing site (`/website`) materializes the VI into a concrete set of HTML/CSS primitives. The following elements are the canonical reference implementations for the brand. Reuse these patterns wherever Sparo branding extends into product UI, docs, decks or other surfaces.

### 12.1 Design Tokens (canonical CSS variables)

Mirror these tokens from `app/globals.css` and `tailwind.config.ts` into any Sparo surface. They are 1:1 with the VI palette.

```css
:root {
  --ink: #0F172A;       /* Sparo Ink     - text & dark surfaces        */
  --graphite: #253044;  /* Sparo Graphite- secondary dark surface       */
  --slate: #5B6B8C;     /* Sparo Slate   - muted text, eyebrow labels  */
  --print: #B7372F;     /* Sparo Print Red - ignition / primary accent */
  --echo:  #E06B5F;     /* Sparo Echo Red - secondary echo accent      */
  --cloud: #F8FAFC;     /* Page background                              */
  --surface: #FFFFFF;   /* Card / panel surface                         */
  --border: rgba(15, 23, 42, 0.12); /* Hairline divider                 */
}
```

Tailwind aliasing in use: `ink`, `graphite`, `slate2`, `print`, `echo`, `cloud`, `surface`. Default `borderColor` is `rgba(15, 23, 42, 0.12)` (the "hairline").

### 12.2 Orbit Backdrop (the signature "轨道" element)

The orbit backdrop is the primary brand-graphic motif on the site. Rules:

- Five solid concentric circles at radii `120 / 200 / 300 / 420 / 560` with stroke `rgba(15,23,42,0.14)`, stroke-width `1`.
- Four dashed concentric circles at radii `160 / 260 / 360 / 480`, stroke `rgba(15,23,42,0.10)`, `stroke-dasharray="2 6"`, stroke-width `1`.
- Two off-axis arcs rotated `-18°` (matches the VI's 18° construction axis), stroke `rgba(15,23,42,0.22)`, stroke-width `1.5`.
- One **red echo arc** (`#B7372F`, stroke-width `3`, opacity `0.75`, `strokeLinecap="round"`) — only one decisive red curve per composition.
- One **ignition node** at the center: solid red dot `r=7` plus a `r=14` ring with `stroke-opacity=0.25` (`#B7372F`).
- Two small **satellite nodes** in `#0F172A` at `opacity 0.5–0.7`, placed off-orbit to break symmetry.
- Container opacity ≈ `0.55`, sized `1200×1200`, viewBox centered (`-600 -600 1200 1200`), positioned absolutely behind hero content, `pointer-events-none`.

Reference implementation: `website/components/OrbitBackdrop.tsx`. Treat the radii ratios and the single red arc as canonical — do not multiply red strokes.

When using orbits at smaller sizes (e.g. inside a CTA card, see `app/page.tsx` final section), reduce to **3 concentric circles + 1 short red arc + 1 red node**. The same logic, dialed down.

### 12.3 Ignition Node (`.ignition`)

Reusable inline brand pulse. Use it as a status / "live" / "Ready" marker, never decoratively spammed.

```css
.ignition {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--print);
  box-shadow: 0 0 0 0 rgba(183, 55, 47, 0.4);
  animation: ignition-pulse 2.2s ease-out infinite;
}
@keyframes ignition-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(183, 55, 47, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(183, 55, 47, 0); }
  100% { box-shadow: 0 0 0 0  rgba(183, 55, 47, 0); }
}
```

Smaller, non-pulsing variants used throughout the site:

- `1.5×1.5` red dot before an eyebrow label (most common).
- `1×1` red dot in compact strips.
- `2×2` red dot inside the primary dark CTA button.

### 12.4 Animations (canonical keyframes)

From `tailwind.config.ts`:


| Name                 | Duration / curve              | Use                                     |
| -------------------- | ----------------------------- | --------------------------------------- |
| `orbit-pulse`        | `2.4s ease-in-out infinite`   | Live nodes ("…以及更多" trailing dot)       |
| `orbit-spin-slow`    | `40s linear infinite`         | Background orbit slowly rotating        |
| `orbit-spin-reverse` | `60s linear infinite reverse` | Counter-rotating orbit ring             |
| `fade-up`            | `0.6s ease-out both`          | Section reveal (`opacity 0→1`, `y 8→0`) |
| `ignition-pulse`     | `2.2s ease-out infinite`      | The red ignition dot box-shadow ripple  |


Animation principle: at most **one moving red element** per viewport.

### 12.5 Eyebrow Label (used on every section)

The "uppercase mini-label + red dot" eyebrow is the website's section-opening device.

```html
<div class="flex items-center gap-2 text-[12px] uppercase tracking-[0.18em] text-slate2">
  <span class="w-1.5 h-1.5 rounded-full bg-print"></span>
  设计哲学
</div>
```

Variants:

- `text-[12px]` with `tracking-[0.18em]–[0.20em]` for major sections.
- `text-[11px]` with `tracking-[0.16em]–[0.18em]` for compact strips.
- On dark surfaces the label is `text-white/60` and may add a `flex-1 h-px bg-white/10` trailing rule.

### 12.6 Hairline Dividers

The site is divider-driven, not card-driven. Three forms:

- Section border: `border-t hairline` / `border-b hairline` (uses `--border`).
- Inline "fade-out" rule: `flex-1 h-px bg-[rgba(15,23,42,0.08)]`.
- List separator inside a list: `divide-y hairline` (rows do not get individual borders).

Rule of thumb: **prefer a hairline over a card**. Cards exist (white panel + hairline border + `shadow-card`) but are reserved for content that genuinely needs containment.

### 12.7 Editorial Row (the recurring list pattern)

The homepage "Sparo OS 能做什么" and product page "Agentic OS capabilities" both use the same row vocabulary:

```
[ small UPPERCASE label ]   [ Bold name ]   [ slate description ]
                            ↑ hover → text-print
```

Tailwind layout shape:

```html
<div class="grid grid-cols-[56px_1fr] sm:grid-cols-[80px_220px_1fr]
            items-baseline gap-x-6 gap-y-2 py-7 border-b hairline group">
  <span class="font-mono text-[12px] text-slate2 tracking-wider pt-1">01</span>
  <h3 class="text-[19px] font-semibold tracking-tight text-ink">统一调度</h3>
  <p class="text-[14.5px] text-slate2 leading-[1.7] max-w-2xl">…</p>
</div>
```

Use this whenever you would have reached for a 4-up or 6-up feature card grid.

### 12.8 Buttons


| Variant            | Style                                                                                  |
| ------------------ | -------------------------------------------------------------------------------------- |
| Primary (light bg) | `bg-ink text-white` + leading `w-2 h-2 rounded-full bg-print` dot, `hover:bg-graphite` |
| Secondary (light)  | `bg-surface border hairline text-ink`, `hover:border-ink/40 hover:-translate-y-px`     |
| Primary (dark bg)  | `bg-white text-ink`, `hover:bg-white/90`                                               |
| Secondary (dark)   | `border border-white/20 text-white`, `hover:bg-white/10`                               |


Shared geometry: `px-5 py-3 rounded-lg text-[14px] font-medium`, with smaller secondary at `px-4 py-3`.

### 12.9 Hero Title Treatment (red highlight underline)

The signature hero accent is a thick low-opacity red bar **behind** a phrase, not under it as a stroke:

```html
<span class="relative inline-block align-baseline mx-1">
  <span class="relative z-10">每一个人</span>
  <span aria-hidden
        class="absolute left-0 right-0 -bottom-1 h-[12px] bg-print/20 rounded-sm z-0"></span>
</span>
```

Two acceptable accent treatments inside headings:

1. The red underline-bar above (`bg-print/20`, `h-[12px]`).
2. A whole phrase set in `text-print` (or `text-echo` on dark backgrounds).

Never combine both in the same heading.

### 12.10 Dark CTA Block

Reusable "Ready to ignite" dark panel — the only place where the orbit motif appears at large size on a dark surface:

- `rounded-2xl bg-ink text-white px-10 py-16 sm:px-16`.
- Background SVG (`opacity-30`): three concentric circles in `stroke=#ffffff strokeOpacity=0.18`, one **echo-red** open arc (`#E06B5F`, stroke-width `3`, `strokeLinecap="round"`), and one **print-red** node (`#B7372F`, `r=6`).
- Eyebrow uses `text-white/60`. Body text uses `text-white/70`.

This is the canonical dark-mode application of the VI ("深色上的点红效果").

### 12.11 Built-in Apps Strip

When listing peer items (product apps, integrations, capabilities), prefer a **vertically divided strip** instead of bordered cards:

```html
<div class="grid grid-cols-2 lg:grid-cols-4
            divide-y lg:divide-y-0 lg:divide-x divide-[rgba(15,23,42,0.08)]
            border-y hairline">
  <!-- each cell: tiny uppercase zh label, big English name, slate description -->
</div>
```

This pattern is the website's answer to "feature cards" — it preserves the system feel without box noise.

### 12.12 Prose Style (`.prose-sparo`)

Long-form content (docs, blog) uses these specifics:

- Body color `var(--graphite)`, line-height `1.75`.
- `h2` is preceded by a `6×6` red dot at `top: 0.55rem`, with `padding-left: 0.9rem`.
- Inline links are `var(--print)` with `text-underline-offset: 3px`.
- `code` uses `background: #0f172a0a` (4% ink), `border-radius: 4px`.
- `pre` uses `background: var(--ink)`, text `#e2e8f0`, `border-radius: 10px`.
- `ul li` markers are custom `5×5` dots in `var(--slate)` (no native bullets).
- `blockquote` has a 2px `var(--print)` left border.

Use `.prose-sparo` (or its tokens) whenever Sparo brand voice meets long text — README, marketing copy blocks, in-product docs.

### 12.13 Element Reuse Map (website → product)

When porting these patterns into the desktop Web UI (`src/web-ui`), the following mappings apply:


| Website element        | Product placement                                                  |
| ---------------------- | ------------------------------------------------------------------ |
| `OrbitBackdrop`        | Welcome / empty states, onboarding splash, app launcher background |
| `.ignition`            | "Live" / "running" / "ignited" status indicator                    |
| Eyebrow label          | Scene / panel section headers                                      |
| Editorial Row          | Settings groups, capability lists, app catalogs                    |
| Hairline divider       | Default separator between any two zones                            |
| Hero red underline-bar | Empty-state and onboarding headlines only                          |
| Dark CTA block         | Promotional / upgrade dialogs                                      |
| Built-in Apps strip    | Apps Scene category strips, integration listings                   |


Implementations of the above already exist in the website repo and should be treated as the source of truth for both the marketing surface and the product UI.