← All feature groups

Design System Gallery — winner

Winner: B — Memo recommendation. Archived variants (A · C · D) remain browsable for reference: /features/design-system-gallery/_archive. Token port to nextjs/app/globals.css + docs/DESIGN-SYSTEM.md ships in a follow-up architect-agent PR.

B — Memo recommendation ⭐fullscreen →

Design System Gallery

B — Memo recommendation

brand #9c7faf + brand-strong reserve + Hebrew-aware type (17 / 15 / 13). text-xs banned in content.

1Palette

Brand

brand#9c7faf

Chrome, fills, CTAs

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

Hover on brand fills

on #FFF · 4.38 · AA largeon text · 2.89 · fail
brand-strong#6f5883

NEW · rare emphasis, active nav pill

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

Selected rows, chips

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

Accent borders

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

Neutrals

canvas#f6f6f6

Page background

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

Cards, panels, modals

on #FFF · 1.00 · failon text · 12.63 · AAA
border#e5e0ea

Card / input borders (purple-tinted)

on #FFF · 1.30 · failon text · 9.74 · AAA
divider#ececec

Subtle horizontal rules

on #FFF · 1.18 · failon text · 10.69 · AAA

Text

text#333333

Headings, labels

on #FFF · 12.63 · AAAon text · 1.00 · fail
text-secondary#666666

Body, captions

on #FFF · 5.74 · AAon text · 2.20 · fail
text-muted#999999

Helper, disabled, timestamps

on #FFF · 2.85 · failon text · 4.43 · AA large

State

success#2E7D32

Success badges, completed states

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

Validation errors, destructive

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

Expiring, needs attention

on #FFF · 2.70 · failon text · 4.67 · 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