# ShareBoard design system 1.0.0

Design system: `venture:shareboard@1.0.0` · Published at
`https://ds-shareboard.pages.sharelabs.ai/` · Derived from the Share Ventures
Design System (`share-ventures@2.6.2`).

This is ShareBoard's own design system. It keeps the Share Ventures structure —
the same token names in `tokens.css`, the same sections below — and carries
ShareBoard's brand values. Publish it as the pages site `ds-shareboard` before any
page uses it; every page then declares and links it (see **Use it**).

Filled for ShareBoard on 2026-10-22.
Delete nothing: an empty section means the decision has not been made.

## Brand essence

- **One line:** ShareBoard is an AI meeting workspace for teams: it turns the conversation into a visual board, decisions and next actions.
- **Personality (three words):** clear, calm, exact.
- **Share family tie:** keeps the Share restraint: black and white, square corners, one green action colour, Aeonik Pro.

## Color roles

Pages use the semantic tokens; the primitives exist only to feed them.

| Role | Token | Value | Use |
| --- | --- | --- | --- |
| Page background | `--sv-surface` → `--sv-home-bg` | #f1f4f5 | Default page |
| Raised surface | `--sv-surface-raised` | #ffffff | Cards, menus |
| Sunken surface | `--sv-surface-sunken` → `--sv-off-white` | #e8e6e4 | Wells, inputs |
| Primary text | `--sv-ink` → `--sv-black` | #000000 | Body and headings |
| Secondary text | `--sv-ink-secondary` → `--sv-gray-dark` | #5e6366 | Supporting copy, 4.5:1 or more |
| Tertiary text | `--sv-ink-tertiary` → `--sv-gray-mid` | #939799 | Large or decorative text only |
| Hairline | `--sv-hairline` → `--sv-gray-light` | #c8cbcc | 1px rules and borders |
| Action | `--sv-accent` → `--sv-green` | #1a743e (dark: #4fc482) | At most one major action per page, plus functional state; never decoration |
| Text on action | `--sv-accent-ink` | #ffffff | Label on the action colour, AA contrast |
| Focus | `--sv-focus` → `--sv-ink` | #000000 (white on dark) | Neutral focus ring, never the action colour |

Dark sections (`.sv-dark`) remap the same roles; record their values here too.
A colour a page needs that is not in this table is a design-system change:
add it to `tokens.css` and this table first, then bump `VERSION`.

## Type scale

- **Family:** `--sv-font-sans` = Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only. The Share family default is Aeonik Pro,
  loaded by linking the Share Ventures release's `tokens/fonts.css` (see **Use
  it**). A venture with its own licensed face declares it with `@font-face` from
  its approved hosting source and puts it first; record the licence and that
  source. Arial is only the failure fallback. Before publishing this system or
  any page, measure in the browser that the face renders at each weight used
  (`document.fonts.check` true and a `measureText` width that differs from
  Arial); a declared family that draws Arial is not done.
- **Scale:** `--sv-text-display`, `-h1`…`-h4`, `-intro`, `-body`, `-small`,
  `-caption`, `-stat`. Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Weights and leading:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Case and tracking:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.

## Spacing

4px base: `--sv-space-1` (4px) through `--sv-space-48` (192px). Layout:
`--sv-container`, `--sv-gutter`, `--sv-rail`, `--sv-radius`, `--sv-hairline-w`.
Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.

## Components

For each component record its anatomy, tokens and states (default, hover,
focus, disabled). Start from Share Ventures `components.md`.

- **Navigation:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Buttons:** primary (the one action, `--sv-accent`), secondary (ink), text link. Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Hero:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Cards / tiles:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Forms:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Footer:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Logo:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.

## Voice

- **Tone:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Headlines:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.
- **Words we use / avoid:** Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only.

## Do / Don't

| Do | Don't |
| --- | --- |
| Take every colour and font from `tokens.css` via `var(--sv-…)` | Write raw hex values in page CSS |
| Use the action colour on one element per page | Scatter the action colour as decoration |
| Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only. | Share Ventures default (see components.md, release 2.6.2). Text wordmark "ShareBoard" with a 2x2 board glyph, black or white only. |

## Use it

Publish this directory (`DESIGN.md`, `tokens.css`, `VERSION`, `index.html`) as
the pages site `ds-shareboard` first. Every page built for ShareBoard then carries:

```html
<meta name="design-system" content="venture:shareboard@1.0.0">
<link rel="stylesheet" href="https://design.sharelabs.ai/v<share-ventures version>/tokens/fonts.css"><!-- when the family is Aeonik Pro -->
<link rel="stylesheet" href="https://ds-shareboard.pages.sharelabs.ai/tokens.css">
```

The version in the meta tag equals `VERSION`. Change a value: update
`tokens.css`, this file and `index.html`, bump `VERSION` (patch for a corrected
value, minor for an added token or component, major for a changed role) and
republish.