App Design System

Synapse · MedComm

The design system for the Synapse app — tokens, type, and components scoped to mobile-app sizing (the marketing site is a separate, later build with its own scale). Tokens live in src/styles/ds/ (the drop-in target for Claude Design re-exports); this page renders the live system. Screens below are shown in true ~393px iPhone frames.

Foundations

Brand

Full wordmark · 100% primary

Wordmark · 100% primary

Logomark · tree at 70%

Square lockup

Color

Teal · primary A spotlight, not a floodlight — aim ~10% of a screen.

50 --teal-50

100 --teal-100

200 --teal-200

300 --teal-300

400 --teal-400

500 --teal-500

600 --teal-600

700 --teal-700

800 --teal-800

900 --teal-900

Coral · secondary Teal's complement — energy, streaks, warm-lead status.

50 --coral-50

100 --coral-100

200 --coral-200

300 --coral-300

400 --coral-400

500 --coral-500

600 --coral-600

700 --coral-700

800 --coral-800

Honey · tertiary Categorization — tags, event types, pending states.

50 --honey-50

100 --honey-100

200 --honey-200

300 --honey-300

400 --honey-400

500 --honey-500

600 --honey-600

700 --honey-700

800 --honey-800

Plum · support Used lightly — variety for avatars / tags / charts.

100 --plum-100

200 --plum-200

300 --plum-300

500 --plum-500

600 --plum-600

700 --plum-700

Warm neutrals & ink

50 --cream-50

100 --cream-100

150 --cream-150

200 --cream-200

300 --cream-300

300 --ink-300

400 --ink-400

500 --ink-500

700 --ink-700

900 --ink-900

Semantic — success / danger only

100 --green-100

200 --green-200

500 --green-500

600 --green-600

700 --green-700

500 --red-500

600 --red-600

Green & red are never decorative — only success and destructive.

Text on color — "black on tint"

Ink on teal-200 · 13:1 ✓ Ink on coral-100 ✓ White on teal-800 ✓ No text on teal-600 ✕

Default is ink on the light tints. White only on strong/dark fills. Mid-saturation teal-600 is for the logo, strokes, and focus rings — never text.

Display · Lora

Advisors Display 2xl · 44 — hero

Advisors Display xl · 36 — focal entity

Advisors Display lg · 30 — screen title

Advisors Display md · 26

Advisors Title · 22 — card / section

UI · DM Sans

The quick brown fox Body lg · 18

The quick brown fox Body · 16 — default

The quick brown fox Body sm · 14

The quick brown fox Caption · 13

One serif headline per surface; everything supporting it in DM Sans.

Spacing · 4px base

Radii

md

lg

xl

2xl

pill

Elevation

workhorse soft elevation

a "strong sm" — hover lift

fab

the one floating shadow

hard

signature ink offset

hard-sm

bottom-only accent

Imagery

Icon panel (final). Tinted by category, with a faint oversized motif. The intended look for event/category headers.

Illustration

Illustration placeholder (pending). A dashed hatch slot — reads unmistakably as bespoke art pending, never as final.

Components

Button Pill · ink outline + hard offset shadow

IconButton Circular tap targets

Warm New Scheduled Agency Solid Confirmed Overdue Outline

Badge Tinted families + solid + dot

AO LT PN SR BH

Avatar Rotating tints + ring

Input Pill / box · soft / outline

Soft

Hard

Flat

Card soft · hard · flat

AO Dr. Amara Okafor KOL · Cardiology

Toronto symposium Thu · 24 advisors Scheduled

ListRow Leading / trailing affordances

14M reach ▲ 8%

92% response rate

StatTile Celebrated metrics

ProgressBar Outline / plain · colors

8 advisors

Stepper Clamped −/+ counter

SegmentedToggle pill · circle · track

Card recipes

Recipes, not components — generalized compositions of the primitives above for recurring use cases. If one keeps getting copied into screens, that's the signal to promote it to a real ui/ component.

Maya Chen

Medical lead · Toronto

No touch in three weeks — send the kickoff notes before Friday's review.

Action card

Use when Surfacing the single most important next step. The hard variant earns the emphasis — max one per screen, near the top.

Recipe Card hard · entity header (Avatar + name/sub) · one supporting sentence · primary + outline button row.

Don't Stack several hard cards, or use it for passive information with no action.

Jun 24 · 9:00 Confirmed

Quarterly summit

Toronto · Studio 4

MC TR LB 36 going

Media card

Use when The content has a visual identity — events, programs, articles. Works full-width in a feed or at ~210px in a horizontal rail.

Recipe Card soft + padding none · tinted icon panel (or photo) bleeding to the edges · meta row + display title · footer with social proof + one small button.

Don't Pad the panel away from the card edge — the full bleed is the point. Promote one featured item to hard, not all.

Last touch

3 days ago

Status

Warm

Owner

Dana H.

Summary card

Use when A detail screen needs its key facts scannable in one glance — status strips, record headers.

Recipe Card hard (or flat for quieter contexts) · 2–4 columns of muted label over bold value, space-between.

Don't Put buttons inside, or exceed four columns — split into two cards instead.

Day 2 of your streak

Weekly goal

Almost there

Progress card

Use when One number is trending toward a goal — streaks, scores, weekly targets.

Recipe Card soft · one big focal element on the left (icon or progress ring) · display-font headline · progress detail or one small secondary button.

Don't Use hard — progress is encouragement, not a demand. Never two focal elements.

Your best week yet

84 touchpoints · up 31% on last week

MTWTFSS

Insight card

Use when Data has one takeaway worth telling. The headline IS the insight — the chart just backs it up.

Recipe Card soft · display-font verdict + muted detail line · small chart in teal-300 with primary highlighting the point that matters · one full-width CTA.

Don't Show a chart without a verdict headline, or highlight more than one data point.

128 advisors +12 this week

4 priority

7 events hosted

36 touchpoints +8 this week

Stat tiles

Use when A handful of small counts belong together — dashboard vitals, profile stats. Always in a grid, never alone.

Recipe StatTile component in a 2-up grid · one accent-colored icon each (vary the accent across tiles) · optional delta line.

Don't Use for the hero metric — that's a Progress or Insight card. Skip deltas that say nothing.

Dr. Amara Okafor

Oncology KOL · Toronto

Tier 1 Warm

Person card

Use when A person IS the content — suggestions, introductions, featured profiles. For lists of people, use ListRow instead.

Recipe Card soft · centered Avatar xl + display name + muted role · up to two Badges · action row of IconButtons + one primary button.

Don't Stack many vertically — this is for one or two people, or a horizontal rail.

Selectable card

Use when A choice between 2–4 rich options that need a title and a description — onboarding, plans, settings. For short labels, use SegmentedToggle.

Recipe Stack of interactive Cards: flat when idle, hard when selected · display-font title + muted sub · primary check dot on the right.

Don't Mix with checkboxes in the same group, or exceed four options — use a list instead.

Flows live at /flows The advisor journey as full-fidelity iPhone storyboards — built from these primitives, annotated with the spine reads/writes each screen makes.