@stoovles/gap-kit

A Make kit — a design-system package built for Figma Make, Figma's prompt-to-prototyping tool. This kit ships Gap's Gap 1.0.0 brand expression as production-ready React components, scoped CSS, design tokens, and AI-readable guidelines so that prompts in Figma Make can produce on-brand prototypes from the first generation.

What is a Make kit?

Figma Make consumes a kit the same way an application consumes an npm package: it imports React components, applies a CSS bundle of tokens and styles, and reads a guidelines/ folder that teaches the AI how the system is intended to be used. A well-authored kit lets a designer type "build a Gap product detail page" and get a result that already uses the right typography, spacing, components, and composition patterns.

This repository is the source of one such kit, built specifically for Gap.

Brand identity — Gap 1.0.0

The kit encodes Gap's current visual identity:

• Typeface — Gap Sans, single weight (400) across the system
• Corner style — sharp; 0px radius on buttons, inputs, cards, selectors
• Accent color — deep blue #031ba1, used sparsely (links, focus rings, active states)
• Surface strategy — white backgrounds, black/gray type; hierarchy comes from weight and spacing, not color
• Density — generous padding, 44px minimum touch targets

Full rationale lives in guidelines/overview.md and guidelines/foundations/.

What's in the package

Path	Purpose
src/components/	32 React components (atoms, components, templates)
src/styles/tokens.css	All Gap 1.0.0 design tokens as CSS custom properties
src/styles/<component>.css	One scoped, namespaced (gap-*) stylesheet per component
src/styles.css	Barrel that @imports tokens and every component stylesheet
scripts/bundle-css.mjs	Inlines the barrel into a single dist/styles.css for shipping
guidelines/	AI-readable documentation that drives Figma Make's behavior
preview/	Local Vite dev sandbox for visually inspecting components

Public exports

import {
  Button, TextInput, Icon, GapLogo,
  GlobalHeader, GlobalFooter, MegaNav, HamburgerNav,
  ProductCard, FilterControls, /* ...and 20+ more */
} from "@stoovles/gap-kit";

import "@stoovles/gap-kit/styles.css"; // tokens + all component styles

A single CSS import wires up every token and every component class. No ThemeProvider, no context — styling flows entirely through CSS custom properties on :root.

Architecture at a glance

The CSS layer follows a layered, Atomic Design-shaped structure:

1. Tokens (tokens.css) — primitives, semantic, and branded values
2. Atoms — Button, Checkbox, Chip, Divider, Handle, Link, Price, Radio, Switch, TextInput, …
3. Components — Accordion, Breadcrumb, Dropdown, Notification, Pagination, Popover, Selector, Tabs, …
4. Templates — GlobalHeader, GlobalFooter, SearchInput, ProductCard, HamburgerNav, MegaNav, FilterSort

Every selector is namespaced with gap- (e.g. .gap-global-footer, .gap-button) to avoid collisions with consumer styles, and every value reads from a token via var(--token-name, fallback) so theming and mode-switching can happen at the CSS-variable layer without touching component code.

Source of truth

This kit is generated from two Figma libraries, accessed via the Figma MCP server:

Figma file	Used for
Fabric Theming Variables 1.0 (yl7oauvHXCR3p6xRvr38Q7) — Gap 1.0.0 mode	All design tokens in tokens.css
Fabric Web Components 2.0 (rNmDPf06cWCAZtkFDpjBFg)	Per-component visual specs (atoms → templates)

For the full step-by-step build process, see workflow.md.

Local development

Requires Node 18+ and pnpm/npm/yarn.

npm install        # install dependencies
npm run dev        # launch the preview sandbox (http://localhost:5173)
npm run build      # build dist/ (ESM JS, .d.ts bundle, and styles.css)

npm run build runs Vite's library build then scripts/bundle-css.mjs, which recursively inlines the @import barrel into a single ship-ready dist/styles.css.

Using the kit in Figma Make

The kit is designed to be uploaded to a Figma Make project. Figma Make's docs cover the full flow:

• Bring your design system package to a Make kit
• Write design system guidelines for Make kits

The guidelines/ folder in this repo follows that spec: an overview.md at the root, a setup.md for installation, foundations/ for tokens, components/ for one-per-component usage docs, and composition/ for page-level patterns Make composes from atoms.

Repo layout

kit/
├── guidelines/            # AI-readable design system docs (Figma Make spec)
│   ├── overview.md
│   ├── setup.md
│   ├── foundations/       # color, typography, spacing, borders, iconography
│   ├── components/        # one .md per component + overview.md
│   └── composition/       # buy-box, recommendations, product-gallery
├── src/
│   ├── components/        # React components (.tsx)
│   ├── styles/            # tokens.css + one .css per component
│   ├── styles.css         # barrel that @imports everything
│   └── index.ts           # public package surface
├── preview/               # local Vite sandbox (App.tsx + main.tsx)
├── scripts/
│   └── bundle-css.mjs     # inline @imports → dist/styles.css
├── package.json
├── tsconfig.json
├── vite.config.ts
└── workflow.md            # the plan that was executed to build this kit

Status

Current published version: see package.json. Component library is feature-complete for Gap 1.0.0; future work focuses on accessibility refinement, additional composition patterns, and keeping pace with the upstream Fabric libraries.