Saturday Design System

Built with Figma, Figma MCP, Cursor and MagicPath in a weekend. A solo end-to-end demonstration of what modern design-to-code workflow looks like in practice.

Foundations

Color

Palette with HEX and RGB values for product UI.

Typography

Type scale tokens for headings, body, and captions.

Spacing

4-point spacing scale for layout, padding, and gaps.

Iconography

Consistent icon stroke and sizing for UI actions.

Components

Button

A reusable React button family built from the current Figma button frames, including five semantic variants, three sizes, optional icons, and realistic implementation previews.

SemanticPalettes

Tabs

Switch between sections with optional scroll arrows, icons beside labels, and a disabled state—documented in one interactive playground.

Input Field

Standard text input for most free-form entries with optional left or right icon, size and state controls, and implementation-ready code previews.

Choose a plan

Dropdown

Selection input with a trailing chevron for controlled option lists, with size, state, and token reference specs.

Accept terms

Checkboxes

On/off choices for one setting or a related list where people can pick more than one option.

Email updates

Radio buttons

Single-choice controls for one option at a time, shown alone, in a vertical list, or in a compact horizontal row.

Toggle

A switch that turns a setting on or off immediately, with playground controls for state and disabled.

Process

From design file to shipped system

Saturday started in Figma—every component, token, and variant defined once as the source of truth.

Figma MCP kept design tokens in sync with the repo; Cursor handled implementation and scaffolding; MagicPath helped on a few production surfaces. Together they became this doc site—one place for designers and engineers to share the same language.