# sksammy33/product-design-system architecture

> Architecture diagram of the GitHub repository sksammy33/product-design-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sksammy33/product-design-system
- Repository: https://github.com/sksammy33/product-design-system

## Overview

This is a Figma-led product design system: token extraction and generated themes provide a foundation for React controls, with Storybook for interactive exploration and documentation for design and accessibility guidance. The token package and several React controls are implemented, while other documented areas remain guidance or deferred scope. The README documents the token-to-components-to-Storybook flow; source excerpts are limited, so internal wiring beyond that documented flow is not inferred.

Main entry points: [`packages/react/src/index.ts`](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/index.ts) (React exports), [`packages/react/src/internal/SelectionText.tsx`](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/internal/SelectionText.tsx) (Selection text), [`packages/tokens/figma`](https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/figma) (Figma snapshots), [`packages/tokens/src`](https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/src) (Token sources)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_tokens["Token foundation"]
  node_token_inputs["Figma snapshots"]
  node_token_sources["Token sources"]
  node_token_build["Token conversion<br/>[build.mjs]"]
  node_token_outputs["Generated themes"]
end

subgraph group_react["React controls"]
  node_react_api["React exports<br/>[index.ts]"]
  node_button["Button<br/>[Button.tsx]"]
  node_input["Input and fields<br/>[Input.tsx]"]
  node_textarea["Textarea<br/>[Textarea.tsx]"]
  node_checkbox["Checkbox<br/>[Checkbox.tsx]"]
  node_radio["Radio<br/>[Radio.tsx]"]
  node_switch["Switch<br/>[Switch.tsx]"]
  node_selection_text["Selection text<br/>[SelectionText.tsx]"]
  node_react_styles["Theme styles"]
end

subgraph group_storybook["Storybook exploration"]
  node_storybook["Component stories"]
  node_storybook_app["Storybook app"]
end

subgraph group_guidance["Design guidance"]
  node_foundations["Foundation guidance"]
  node_component_guidance["Component guidance"]
  node_complex_components["Complex components"]
  node_patterns_templates["Patterns and templates"]
  node_accessibility["Accessibility guidance"]
end

node_figma(("Figma source"))
node_developer(("Product developer"))

node_figma -->|"records decisions"| node_token_inputs
node_token_inputs -->|"normalizes tokens"| node_token_sources
node_token_sources -->|"converts tokens"| node_token_build
node_token_build -->|"generates themes"| node_token_outputs
node_token_outputs -->|"provides token types"| node_react_api
node_react_api -->|"exports"| node_button
node_react_api -->|"exports"| node_input
node_react_api -->|"exports"| node_textarea
node_react_api -->|"exports"| node_checkbox
node_react_api -->|"exports"| node_radio
node_react_api -->|"exports"| node_switch
node_checkbox -->|"renders"| node_selection_text
node_radio -->|"renders"| node_selection_text
node_switch -->|"renders"| node_selection_text
node_storybook -->|"renders components"| node_react_api
node_storybook_app -->|"loads stories"| node_storybook
node_developer -->|"explores controls"| node_storybook_app
node_developer -->|"consults"| node_foundations
node_developer -->|"consults"| node_component_guidance
node_developer -->|"consults"| node_complex_components
node_developer -->|"consults"| node_patterns_templates
node_developer -->|"consults"| node_accessibility

click node_token_inputs "https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/figma"
click node_token_sources "https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/src"
click node_token_build "https://github.com/sksammy33/product-design-system/blob/main/packages/tokens/scripts/build.mjs"
click node_token_outputs "https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/dist"
click node_react_api "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/index.ts"
click node_button "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Button/Button.tsx"
click node_input "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Input/Input.tsx"
click node_textarea "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Textarea/Textarea.tsx"
click node_checkbox "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Checkbox/Checkbox.tsx"
click node_radio "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Radio/Radio.tsx"
click node_switch "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Switch/Switch.tsx"
click node_selection_text "https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/internal/SelectionText.tsx"
click node_react_styles "https://github.com/sksammy33/product-design-system/tree/main/packages/react/src/styles"
click node_storybook "https://github.com/sksammy33/product-design-system/tree/main/apps/storybook/stories/components"
click node_storybook_app "https://github.com/sksammy33/product-design-system/tree/main/apps/storybook"
click node_foundations "https://github.com/sksammy33/product-design-system/tree/main/docs/foundations"
click node_component_guidance "https://github.com/sksammy33/product-design-system/tree/main/docs/components"
click node_complex_components "https://github.com/sksammy33/product-design-system/tree/main/docs/complex-components"
click node_patterns_templates "https://github.com/sksammy33/product-design-system/tree/main/docs/patterns"
click node_accessibility "https://github.com/sksammy33/product-design-system/tree/main/docs/accessibility"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_token_inputs,node_token_sources,node_token_build,node_token_outputs toneBlue
class node_react_api,node_button,node_input,node_textarea,node_checkbox,node_radio,node_switch,node_selection_text,node_react_styles toneAmber
class node_storybook,node_storybook_app toneMint
class node_foundations,node_component_guidance,node_complex_components,node_patterns_templates,node_accessibility toneRose
class node_figma,node_developer toneIndigo
```

## Components

### Token foundation

- [Figma snapshots](https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/figma): `packages/tokens/figma`
- [Token sources](https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/src): `packages/tokens/src`
- [Token conversion](https://github.com/sksammy33/product-design-system/blob/main/packages/tokens/scripts/build.mjs): `packages/tokens/scripts/build.mjs`
- [Generated themes](https://github.com/sksammy33/product-design-system/tree/main/packages/tokens/dist): `packages/tokens/dist`

### React controls

- [React exports](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/index.ts): `packages/react/src/index.ts`
- [Button](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Button/Button.tsx): `packages/react/src/components/Button/Button.tsx`
- [Input and fields](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Input/Input.tsx): `packages/react/src/components/Input/Input.tsx`
- [Textarea](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Textarea/Textarea.tsx): `packages/react/src/components/Textarea/Textarea.tsx`
- [Checkbox](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Checkbox/Checkbox.tsx): `packages/react/src/components/Checkbox/Checkbox.tsx`
- [Radio](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Radio/Radio.tsx): `packages/react/src/components/Radio/Radio.tsx`
- [Switch](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/components/Switch/Switch.tsx): `packages/react/src/components/Switch/Switch.tsx`
- [Selection text](https://github.com/sksammy33/product-design-system/blob/main/packages/react/src/internal/SelectionText.tsx): `packages/react/src/internal/SelectionText.tsx`
- [Theme styles](https://github.com/sksammy33/product-design-system/tree/main/packages/react/src/styles): `packages/react/src/styles`

### Storybook exploration

- [Component stories](https://github.com/sksammy33/product-design-system/tree/main/apps/storybook/stories/components): `apps/storybook/stories/components`
- [Storybook app](https://github.com/sksammy33/product-design-system/tree/main/apps/storybook): `apps/storybook`

### Design guidance

- [Foundation guidance](https://github.com/sksammy33/product-design-system/tree/main/docs/foundations): `docs/foundations`
- [Component guidance](https://github.com/sksammy33/product-design-system/tree/main/docs/components): `docs/components`
- [Complex components](https://github.com/sksammy33/product-design-system/tree/main/docs/complex-components): `docs/complex-components`
- [Patterns and templates](https://github.com/sksammy33/product-design-system/tree/main/docs/patterns): `docs/patterns`
- [Accessibility guidance](https://github.com/sksammy33/product-design-system/tree/main/docs/accessibility): `docs/accessibility`

### Other components

- **Figma source**
- **Product developer**

## Connections

- Figma source → Figma snapshots: records decisions
- Figma snapshots → Token sources: normalizes tokens
- Token sources → Token conversion: converts tokens
- Token conversion → Generated themes: generates themes
- Generated themes → React exports: provides token types
- React exports → Button: exports
- React exports → Input and fields: exports
- React exports → Textarea: exports
- React exports → Checkbox: exports
- React exports → Radio: exports
- React exports → Switch: exports
- Checkbox → Selection text: renders
- Radio → Selection text: renders
- Switch → Selection text: renders
- Component stories → React exports: renders components
- Storybook app → Component stories: loads stories
- Product developer → Storybook app: explores controls
- Product developer → Foundation guidance: consults
- Product developer → Component guidance: consults
- Product developer → Complex components: consults
- Product developer → Patterns and templates: consults
- Product developer → Accessibility guidance: consults