Cello Design System

Geometric, tactile, and buildable.

A focused system for a technical product designer: high-contrast mono type, paper-grain texture, hard-edged cards, kinetic bars, and practical tokens that map directly to implementation.

Color Tokens

Ink 950--ds-color-ink-950

Paper 200--ds-color-paper-200

Signal 500--ds-color-signal-500

Earth 600--ds-color-earth-600

Earth 400--ds-color-earth-400

Blueprint--ds-color-blueprint-500

Coral--ds-color-coral-500

Typography

Cello Product Designer

Systems, technical prototypes, design-dev collaboration, and clear product storytelling.

Core Tokens

Display: --ds-text-heroHero name / campaign moments
Title: --ds-text-2xlPage and section headers
Body: --ds-text-baseCase-study narrative copy
Caption: --ds-text-smTags, labels, metadata
Stroke: --ds-stroke-lgPrimary geometric borders
Ease: --ds-ease-outShared interaction curve

Component Language

View Case Studies

Role Badge

Feature Prototype

Cards use strong borders, direct hierarchy, restrained texture, and a full-surface accent interaction.

Principles

Use accent color to signal action or proof, not decoration.
Prefer square edges and visible structure over soft generic UI.
Keep motion directional: wipe, slide, reveal, settle.