Design system venture:celli@1.0.0 · DESIGN.md · tokens.css · VERSION

Celli design system

The reference sheet for Celli. Pages declare <meta name="design-system" content="venture:celli@1.0.0">, link https://ds-celli.pages.sharelabs.ai/tokens.css and take every color and font from these tokens.

Color roles

Page background--sv-surface

Raised surface--sv-surface-raised

Sunken surface--sv-surface-sunken

Primary text--sv-ink

Secondary text--sv-ink-secondary

Tertiary text--sv-ink-tertiary

Hairline--sv-hairline

Action--sv-accent

Text on action--sv-accent-ink

Type scale

--sv-text-displayDisplay

--sv-text-h1Heading one

--sv-text-h2Heading two

--sv-text-h3Heading three

--sv-text-h4Heading four

--sv-text-introIntro copy sets up the page.

--sv-text-bodyBody copy carries the reading.

--sv-text-smallSmall supporting text.

--sv-text-captionCaption

Spacing

--sv-space-1

--sv-space-2

--sv-space-4

--sv-space-8

--sv-space-16

--sv-space-32

--sv-space-48

Components

Text link

Card

A raised surface with a hairline. Radius is --sv-radius.

On dark

The same roles remapped inside .sv-dark.