# Celli design system 1.0.0

Design system: `venture:celli@1.0.0` · Published at
`https://ds-celli.pages.sharelabs.ai/` · Derived from the Share Ventures
Design System (`share-ventures@2.6.2`). Values measured from the live
celli.ai landing page on 2026-10-12.

## Brand essence

- **One line:** Celli is the platform for building and deploying AI sales agents that qualify, answer, book and close across web, WhatsApp, SMS and voice.
- **Personality (three words):** calm, precise, commercial.
- **Share family tie:** keeps Share's restraint, Aeonik Pro, one action style per page and real product proof (live agents, no invented logos or quotes).

## Color roles

Strict black and white. No blue accent (the old `#2a35f0` look is retired). The action is ink.

| Role | Token | Value | Use |
| --- | --- | --- | --- |
| Page background | `--sv-surface` → `--sv-home-bg` | `#ffffff` | Default page |
| Raised surface | `--sv-surface-raised` | `#ffffff` | Cards, menus |
| Sunken surface | `--sv-surface-sunken` → `--sv-off-white` | `#f5f6f8` | Wells, inputs, section bands |
| Primary text | `--sv-ink` → `--sv-black` | `#0a0a0a` | Body and headings |
| Secondary text | `--sv-ink-secondary` → `--sv-gray-dark` | `#565a63` | Supporting copy (7.1:1 on white) |
| Tertiary text | `--sv-ink-tertiary` → `--sv-gray-mid` | `#8b909a` | Large or decorative text only |
| Hairline | `--sv-hairline` → `--sv-gray-light` | `#e8eaee` | 1px rules and borders |
| Strong hairline | `--celli-hairline-strong` | `#d7dae0` | Inputs, secondary button edge |
| Action | `--sv-accent` → `--sv-green` | `#0a0a0a` | The primary button |
| Text on action | `--sv-accent-ink` | `#ffffff` | Label on the action |
| Live state | `--celli-live` | `#16a34a` | The "live / online" dot only |
| Focus | `--sv-focus` | `#0a0a0a` | Neutral focus ring |

Dark sections (`.sv-dark`): surface `#0a0a0a`, raised `#1a1a1a`, ink `#ffffff`,
secondary `#e8eaee`, hairline `#2a2a2a`, action `#ffffff` with `#0a0a0a` text.

## Type scale

- **Family:** `--sv-font-sans` = Aeonik Pro, Arial fallback. The Share font host (app.shareos.ai/fonts/aeonik/) sends no CORS header, so a page on another origin draws Arial. Each Celli page serves the Regular, Medium and Bold woff2 files from its own origin (`./fonts/`) with its own `@font-face` rules. Use on sharelabs.ai and pages.sharelabs.ai is a member-confirmed decision (Reyansh Gupta, 2026-10-02).
- **Scale:** Share Ventures scale unchanged.
- **Weights:** display and headings 500 with tight tracking (-0.03em on display); body 400; labels 500.
- **Case:** sentence case. No all-caps eyebrows.

## Spacing

4px base, Share Ventures steps. Sections `--sv-space-24` apart (`--sv-space-16` on mobile).
Radius: `--sv-radius` 16px for cards and panels, `--celli-radius-sm` 10px for avatars and tiles, `--celli-radius-pill` for buttons, chips and badges. Celli is rounded; this is its main departure from Share's square geometry.

## Components

- **Navigation:** wordmark left, menu centered, Sign in plus one ink pill right. Below 1180px a menu button replaces menu and actions.
- **Buttons:** primary ink pill (`--sv-accent`), secondary white pill with `--celli-hairline-strong` edge, text link.
- **Hero:** one large headline, one paragraph, primary and secondary button, the live chat demo.
- **Cards / tiles:** white, 1px hairline, 16px radius, no decorative shadow.
- **Forms:** sunken fill, strong hairline, 10px radius.
- **Footer:** multi-column links on white, hairline top rule.
- **Logo:** the official black Celli wordmark (PNG, inlined), no hexagon mark, no "a product by" line. Min height 20px.

## Voice

- **Tone:** confident, commercial, plain.
- **Headlines:** sentence case, short, about revenue and outcomes. Sales-led framing.
- **Words we use / avoid:** use "agent", "sell", "close", "live". Share is a "venture lab", never "studio". No em or en dashes.

## Do / Don't

| Do | Don't |
| --- | --- |
| Take every color and font from `tokens.css` via `var(--sv-…)` | Write raw hex values in page CSS |
| Keep the page black and white; green only for the live dot | Add a blue or gradient accent |
| Show real live agents (Amy, Tycoon, Share Mind, Share Insights) | Invent testimonials, logos or counts |

## Use it

```html
<meta name="design-system" content="venture:celli@1.0.0">
<link rel="stylesheet" href="https://ds-celli.pages.sharelabs.ai/tokens.css">
```