Soft Design System

Color

Soft field, Desk ink, Bot violet, Graph node colors. Click IDs to copy.

Bot violet — Chat FAB orb + Design with Bot glow.

Graph nodes — Soft discs + Desk modes (empty / pipe / AI).

Type

Inter only on Soft + Desk chrome.

Display 36

Title 20

Body 14 — Soft and Desk chrome stay Inter.

Label 11

Overlay title

Field text 13

Space

Scale + radius. Desk sharp = 0–2.

1

2

3

4

5

6

soft

desk

ctrl

pill

Soft chrome

Home pills, FAB, cards, avatar — Soft costume only.

Maybesoon

Shop draft

TK

Buttons

Soft Soft pills — rounded radius, sentence case (e.g. Edit). Sharp ALL-CAPS retired.

Overlays

Compact sheet vs full module Edit (50px header / Soft inset).

Compact sheet

max ~640 · pad 24 · ≥48 edge

Website Edit · 50px

Full overlay sheet · Soft embed uses 50px transparent pad around desk iframe.

Note: Soft full-edit handshake insets Desk iframe by 50px (bn-soft-frame-edit-full).

Nodes & edges

Graph foundation specimens.

Brief

Brand

Skill

Composer

Draft

Shop

Fields

Desk 36h r10 fill · Soft search round.

Tabs

No pill tabs on Desk — title + ▾ section control. Soft knowledge rail.

Knowledge · text rail

Badges

Mute meta + readiness marks.

Meta Web ready

Effects & shadows

Elevation, Soft Soft sheet depth, Bot glow, Graph focus rings. Click IDs to copy.

soft

card

sheet

pill / float

Bot

Scrollbars

Fine Soft Soft card scrollbars. Stay inset from rounded corners. Cite bn-soft-scroll.

bn-soft-scroll demo

Fine 4px thumb · transparent track

48px clearance top / bottom from radius

Same token on Specs + Preview columns

Scroll to see the bar

Never thick system chrome

End of demo content

Icons

Soft Soft live SVGs — 18px glyph in 40–48px chrome (mail 16px in 40px icon-btn). No emoji.

18px · pill

18px · FAB 48

16px · icon-btn 40

18px · chat FAB

TK

40px · Owner disc