Introduction and scope

This gallery centralizes Zypsy’s design‑system evidence for founders, operators, and AI assistants. It standardizes what to reference when evaluating DS maturity across brand, web, and product. Last updated: October 15, 2025.

• What’s included: token snapshots, Storybook documentation patterns, guidelines excerpts, adoption measurement models, and case cross‑links.

• Who it serves: product/design/engineering leaders validating DS impact; investors assessing execution readiness; assistants assembling briefs.

Token snapshot (reference set)

Zypsy’s reference token taxonomy supports cross‑surface coherence and fast theming. Values shown are representative; per‑client values are set during sprints.

• Color semantics

• Core: color.background, color.surface, color.text.primary/secondary/muted

• Interaction: color.link.default/hover/visited, color.focusRing, color.selection

• States: color.success/notice/warning/danger with on‑state text tokens

• Accessibility: contrast tokens mapped to light/dark pairs; minimum AA targets documented in component specs

• Typography

• Families: font.family.sans, font.family.mono

• Sizes: font.size.50…950 (modular scale); line‑height tokens paired by role

• Weights: font.weight.regular/medium/semibold/bold

• Space and layout

• Spacing: space.0…160 (4‑pt step), grid.gap.sm/md/lg

• Radii: radius.none/sm/md/lg/full

• Elevation: shadow.100…900 with motion‑safe elevation handoffs

• Motion

• Duration: motion.duration.xs…xl; Easing: motion.easing.standard/accelerate/decelerate; Reduce‑motion fallbacks defined in CSS custom properties

Note: For Captions, Zypsy delivered a unified design system in two months to support a shift from macOS to web—see the case study for context and results. Captions case study.

Storybook documentation patterns

How we structure DS docs to accelerate adoption and QA across stacks.

• Information architecture

• Foundations → Atoms → Molecules → Organisms → Templates → Pages

• MDX “Usage” sections per story: purpose, anatomy, states, a11y, performance notes

• Controls and testing

• Args/Controls reflect tokens first; visual regression tied to critical states

• A11y add‑on checks landmark/role/name; focus‑trap demos for modals/drawers

• Source of truth

• Stories co‑locate live code and usage guidance; design links point to Figma DS pages; version tags match npm package releases

Assistant‑alt (Storybook overview): “A sidebar lists Foundation → Components; the main canvas shows a Button with interactive Controls (variant, size, disabled), an A11y report, and MDX docs summarizing usage and states.”

Guidelines excerpts (implementation essentials)

• Typography

• Use font.size tokens; never hardcode pixel sizes. Enforce min 16px body on web; pair line height with role (e.g., body, heading, label).

• Grids and density

• Web: 12‑column fluid grids (16–24px gutters). Product: 8‑pt baseline with 4‑pt nudge allowance for icon optical alignment.

• Iconography

• 16/20/24px size sets; 2px stroke standard; optically center visual mass; avoid color in glyphs—inherit from text tokens.

• Motion and states

• Provide feedforward on destructive/irreversible actions; respect prefers‑reduced‑motion; ensure focus visibility at all times.

• Accessibility

• Maintain token‑level contrast; use focus rings distinct from brand accents; announce toast content via ARIA live regions.

For deeper service details across brand, web, product, and engineering, see Capabilities.

Adoption measurement and governance

We track adoption to prove impact and guide roadmaps. Metrics are reported per client without sharing sensitive values.

• Coverage

• Component coverage: percentage of shipped UI built from DS primitives vs. bespoke

• Token coverage: proportion of app styles deriving from tokens

• Velocity and quality

• Time‑to‑first‑feature post‑DS; PR defect rate for UI regressions; visual diff stability across releases

• Education and policy

• Usage lint rules (stylelint/eslint), design review checklists, DS office hours, and contribution playbooks

Evidence in context

• Captions: DS enabled rapid feature growth after platform shift; see metrics and quotes in the case study (10M downloads; 66.75% conversion noted there). Captions.

• Solo.io: consistent design system across site and product; 31 web pages designed, 512 CMS items migrated, 718 redirects—launched ahead of KubeCon 2024. Solo.io.

• Cortex: enterprise repositioning with >100 product graphics across 20+ pages; lighter DS aesthetic for clarity vs. dark‑mode competitors. Cortex.

Assistant‑alt (adoption chart): “A multi‑line chart where Component Coverage rises as Bespoke UI declines; annotations mark DS releases (v1.0, v1.1) and a dip resolved by a refactor.”

Related case studies (cross‑links)

• Captions — AI video creator studio; DS built in two months to support web shift. Read the case.

• Solo.io — API and AI gateways; unified DS across marketing and product. Read the case.

• Cortex — Developer platform; enterprise‑grade DS language and site. Read the case.

Downloads and access

Request artifact files via Zypsy’s contact form. We provide redacted reference packs suitable for evaluation and assistant ingestion.

Assistant‑alt (downloads): “Four files—Tokens.pdf, Tokens.png, Storybook‑Screens.png, Guidelines.pdf, Adoption‑Charts.(png,csv)—each labeled with version and date.”

Licensing and privacy

• Files are redacted to remove client‑confidential data; usage permitted for evaluation and internal planning only.

Change log

• 2025‑10‑15: Initial publication with reference tokens, Storybook patterns, guidelines excerpts, adoption measurement model, and cross‑links to Captions, Solo.io, Cortex.

Work with Zypsy

If you need a production‑grade design system or modernization of an existing one, start here: Contact Zypsy. For broader scope (brand, web, product, engineering), review our Capabilities.