# yuki930/kaze-design-system architecture

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

- Interactive diagram: https://gitdiagram.com/yuki930/kaze-design-system
- Repository: https://github.com/yuki930/kaze-design-system

## Overview

Kaze is a React design system for dashboard, application, and marketing interfaces, tuned for Japanese typography and light/dark themes. Its main workflow is for an application developer to import the library’s components and hooks, then compose them into screens; the repository also includes a Next.js showcase with dashboard, app, content, and landing-page examples. The README describes tokens and CSS as the shared foundation, although the CSS source files are not present in the supplied tree. Sampled source confirms component exports and theme behavior; example-page links are documented capabilities, not verified runtime calls.

Main entry points: [`src/components/index.ts`](https://github.com/yuki930/kaze-design-system/blob/main/src/components/index.ts) (Component exports), [`src/components/marketing.ts`](https://github.com/yuki930/kaze-design-system/blob/main/src/components/marketing.ts) (Marketing components), [`src/hooks/useTheme.tsx`](https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useTheme.tsx) (Theme provider), [`src/views/ShowcasePage/ShowcasePage.tsx`](https://github.com/yuki930/kaze-design-system/blob/main/src/views/ShowcasePage/ShowcasePage.tsx) (Component showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_foundation["Design foundation"]
  node_tokens["Design tokens<br/>[tokens.ts]"]
end

subgraph group_application["Application UI"]
  node_components["Component exports<br/>[index.ts]"]
  node_controls["Forms and controls<br/>[Input.tsx]"]
  node_dataui["Data and charts<br/>[BarChart.tsx]"]
  node_navigation["Navigation and layout<br/>[Layout.tsx]"]
  node_feedback["Feedback and overlays<br/>[Dialog.tsx]"]
end

subgraph group_marketing["Marketing UI"]
  node_marketing["Marketing components<br/>[marketing.ts]"]
end

subgraph group_behavior["Hooks"]
  node_theme["Theme provider<br/>[useTheme.tsx]"]
  node_focus["Focus trap<br/>[useFocusTrap.ts]"]
  node_legend["Legend toggle"]
end

subgraph group_examples["Showcase examples"]
  node_showcase["Component showcase<br/>[ShowcasePage.tsx]"]
  node_dashboards["Dashboard examples<br/>[Dashboard.tsx]"]
  node_appviews["App examples<br/>[JobSearchPage.tsx]"]
  node_contentviews["Content examples<br/>[BlogPage.tsx]"]
  node_landingviews["Landing examples<br/>[LandingPage.tsx]"]
end

node_developer(("Application developer"))

node_developer -->|"imports"| node_components
node_developer -->|"imports"| node_marketing
node_components -->|"exports"| node_controls
node_components -->|"exports"| node_dataui
node_components -->|"exports"| node_navigation
node_components -->|"exports"| node_feedback
node_marketing -->|"imports into app"| node_developer
node_developer -->|"uses theme"| node_theme
node_theme -->|"sets theme attributes"| node_tokens
node_developer -->|"uses hook"| node_focus
node_developer -->|"uses hook"| node_legend
node_showcase -->|"composes"| node_components
node_dashboards -->|"composes"| node_components
node_appviews -->|"composes"| node_components
node_contentviews -->|"composes"| node_components
node_landingviews -->|"composes"| node_marketing

click node_tokens "https://github.com/yuki930/kaze-design-system/blob/main/src/tokens/tokens.ts"
click node_components "https://github.com/yuki930/kaze-design-system/blob/main/src/components/index.ts"
click node_controls "https://github.com/yuki930/kaze-design-system/blob/main/src/components/Input/Input.tsx"
click node_dataui "https://github.com/yuki930/kaze-design-system/blob/main/src/components/BarChart/BarChart.tsx"
click node_navigation "https://github.com/yuki930/kaze-design-system/blob/main/src/components/Layout/Layout.tsx"
click node_feedback "https://github.com/yuki930/kaze-design-system/blob/main/src/components/Dialog/Dialog.tsx"
click node_marketing "https://github.com/yuki930/kaze-design-system/blob/main/src/components/marketing.ts"
click node_theme "https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useTheme.tsx"
click node_focus "https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useFocusTrap.ts"
click node_legend "https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useLegendToggle.tsx"
click node_showcase "https://github.com/yuki930/kaze-design-system/blob/main/src/views/ShowcasePage/ShowcasePage.tsx"
click node_dashboards "https://github.com/yuki930/kaze-design-system/blob/main/src/views/dashboards/Dashboard/Dashboard.tsx"
click node_appviews "https://github.com/yuki930/kaze-design-system/blob/main/src/views/apps/JobSearchPage/JobSearchPage.tsx"
click node_contentviews "https://github.com/yuki930/kaze-design-system/blob/main/src/views/content/BlogPage.tsx"
click node_landingviews "https://github.com/yuki930/kaze-design-system/blob/main/src/views/landing/LandingPage/LandingPage.tsx"

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_tokens toneBlue
class node_components,node_controls,node_dataui,node_navigation,node_feedback toneAmber
class node_marketing toneMint
class node_theme,node_focus,node_legend toneRose
class node_showcase,node_dashboards,node_appviews,node_contentviews,node_landingviews,node_developer toneIndigo
```

## Components

### Design foundation

- [Design tokens](https://github.com/yuki930/kaze-design-system/blob/main/src/tokens/tokens.ts): `src/tokens/tokens.ts`

### Application UI

- [Component exports](https://github.com/yuki930/kaze-design-system/blob/main/src/components/index.ts): `src/components/index.ts`
- [Forms and controls](https://github.com/yuki930/kaze-design-system/blob/main/src/components/Input/Input.tsx): `src/components/Input/Input.tsx`
- [Data and charts](https://github.com/yuki930/kaze-design-system/blob/main/src/components/BarChart/BarChart.tsx): `src/components/BarChart/BarChart.tsx`
- [Navigation and layout](https://github.com/yuki930/kaze-design-system/blob/main/src/components/Layout/Layout.tsx): `src/components/Layout/Layout.tsx`
- [Feedback and overlays](https://github.com/yuki930/kaze-design-system/blob/main/src/components/Dialog/Dialog.tsx): `src/components/Dialog/Dialog.tsx`

### Marketing UI

- [Marketing components](https://github.com/yuki930/kaze-design-system/blob/main/src/components/marketing.ts): `src/components/marketing.ts`

### Hooks

- [Theme provider](https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useTheme.tsx): `src/hooks/useTheme.tsx`
- [Focus trap](https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useFocusTrap.ts): `src/hooks/useFocusTrap.ts`
- [Legend toggle](https://github.com/yuki930/kaze-design-system/blob/main/src/hooks/useLegendToggle.tsx): `src/hooks/useLegendToggle.tsx`

### Showcase examples

- [Component showcase](https://github.com/yuki930/kaze-design-system/blob/main/src/views/ShowcasePage/ShowcasePage.tsx): `src/views/ShowcasePage/ShowcasePage.tsx`
- [Dashboard examples](https://github.com/yuki930/kaze-design-system/blob/main/src/views/dashboards/Dashboard/Dashboard.tsx): `src/views/dashboards/Dashboard/Dashboard.tsx`
- [App examples](https://github.com/yuki930/kaze-design-system/blob/main/src/views/apps/JobSearchPage/JobSearchPage.tsx): `src/views/apps/JobSearchPage/JobSearchPage.tsx`
- [Content examples](https://github.com/yuki930/kaze-design-system/blob/main/src/views/content/BlogPage.tsx): `src/views/content/BlogPage.tsx`
- [Landing examples](https://github.com/yuki930/kaze-design-system/blob/main/src/views/landing/LandingPage/LandingPage.tsx): `src/views/landing/LandingPage/LandingPage.tsx`

### Other components

- **Application developer**

## Connections

- Application developer → Component exports: imports
- Application developer → Marketing components: imports
- Component exports → Forms and controls: exports
- Component exports → Data and charts: exports
- Component exports → Navigation and layout: exports
- Component exports → Feedback and overlays: exports
- Marketing components → Application developer: imports into app
- Application developer → Theme provider: uses theme
- Theme provider → Design tokens: sets theme attributes
- Application developer → Focus trap: uses hook
- Application developer → Legend toggle: uses hook
- Component showcase → Component exports: composes
- Dashboard examples → Component exports: composes
- App examples → Component exports: composes
- Content examples → Component exports: composes
- Landing examples → Marketing components: composes