Gallery variantA · ControlB · MemoC · Softer + largerD · True monochrome← compare all

Design System Gallery

D — True monochrome

Blue-grey and cloud killed — replaced with warm purple-tinted neutrals. Delivers on the monochrome claim.

1Palette

Brand

brand#9c7faf

Chrome, fills, CTAs

on #FFF · 3.46 · AA largeon text · 4.06 · AA large
brand-hover#8a6e9d

Hover on brand fills

on #FFF · 4.38 · AA largeon text · 3.21 · AA large
brand-strong#6f5883

Rare emphasis, active states

on #FFF · 6.18 · AAon text · 2.27 · fail
brand-soft#ebe4f0

Selected rows, chips

on #FFF · 1.24 · failon text · 11.30 · AAA
brand-line#c9bed2

Accent borders

on #FFF · 1.78 · failon text · 7.88 · AAA

Neutrals

canvas#f7f5f8

Page background (warm-tinted)

on #FFF · 1.08 · failon text · 12.96 · AAA
surface#ffffff

Cards, panels

on #FFF · 1.00 · failon text · 14.05 · AAA
border#d8d3dc

NEW · warm neutral replacing blue-grey

on #FFF · 1.47 · failon text · 9.54 · AAA
divider#ede8f0

NEW · warm neutral replacing cloud

on #FFF · 1.21 · failon text · 11.64 · AAA

Text

text#2e2a33

Headings (warm-black, harmonized)

on #FFF · 14.05 · AAAon text · 1.00 · fail
text-secondary#645c6e

Body, captions

on #FFF · 6.37 · AAon text · 2.21 · fail
text-muted#95899e

Helper, disabled

on #FFF · 3.31 · AA largeon text · 4.25 · AA large

State

success#2E7D32

Success badges, completed states

on #FFF · 5.13 · AAon text · 2.74 · fail
error#D32F2F

Validation errors, destructive

on #FFF · 4.98 · AAon text · 2.82 · fail
warning#F57C00

Expiring, needs attention

on #FFF · 2.70 · failon text · 5.19 · AA

2Type specimen

text-meta

13px · lh 1.5 · ls 0.01em

chrome only: timestamps, breadcrumbs, badge labels

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-body-sm

15px · lh 1.55 · ls 0

secondary body, form helper

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-body

17px · lh 1.6 · ls 0

default body

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-body-lg

18px · lh 1.6 · ls 0

lead paragraph

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-h3

20px · lh 1.4 · ls 0

section heading

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-h2

24px · lh 1.3 · ls -0.01em

page heading

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

text-xs ⛔

12px · lh 1.35 · ls 0

BANNED in content — see text-meta

הגוף שלנו הוא הבית שבו אנחנו חיים. תנועה, נשימה, ומגע הם השפה הראשונה של הבית הזה.

The body is the house we live in — movement, breath, and touch are its first language.

3Buttons

primary
icon+label
secondary
text CTA

4Form controls

מספר טלפון לא תקין

5Cards

כרטיס רגיל

מטופל.ת ראשוני.ת, פגישת היכרות ראשונה.

כרטיס נבחר

brand-soft רקע · brand גבול

עם מפריד פנימי

טקסט לפני המפריד — brand-line מפריד עדין.

טקסט אחרי המפריד.

6Small-text zones

Where the type-scale differences show most. Body 17px · small 15px · meta 13px.

שורת תגים

יוגהפלדנקרייזקונטקטסומטיתנועה חופשית

עזרה מתחת לשדה

נשלח אליך קוד אימות ב־SMS

שורת מטא־נתונים

עודכן לפני 3 שעותמיכל כהן4 דקות קריאה

7Chrome samples