Site Map

Your Project — 1 theme · 21 style guide sections

Page Flow

graph LR
    ROOT["/ Layout"]
    ROOT -->|data-design-theme| HOME["/"]
    ROOT -->|data-design-theme| SG["/styleguide"]
    ROOT -->|data-design-theme| SM["/sitemap"]

/ — Home Page

graph TD
    PAGE["/ Home Page"]
    PAGE --> HERO["sg-page-title
h1 + sg-page-intro"]
    PAGE --> CTA["button-row
StyleGuideBtn primary
StyleGuideBtn outline"]
    PAGE --> CARDS["StyleGuideCardGrid"]
    CARDS --> C1["StyleGuideCard
Design Tokens"]
    CARDS --> C2["StyleGuideCard
Components"]
    CARDS --> C3["StyleGuideCard
Style Guide"]

/styleguide — Style Guide Viewer

graph TD
    PAGE["/styleguide"]
    PAGE --> PROVIDER["ThemeConfigProvider
config + branding for all themes"]
    PROVIDER --> SHELL["ShellChrome
navbar / sidebar / footer"]
    PROVIDER --> CONTENT["ThemeAwareSections
main content area"]
    PROVIDER --> BAR["LayoutBar
theme picker / layout / color mode"]

    CONTENT --> VF["Visual Foundation"]
    CONTENT --> STR["Structure"]
    CONTENT --> INT["Interaction"]
    CONTENT --> REF["Reference"]

Visual Foundation

graph LR
    VF["Visual Foundation"]
    VF --> TYP["Typography
TypeSpecimen
font scale"]
    VF --> COL["Color Palette
ColorSwatch
ColorGrid"]
    VF --> SPC["Spacing
SpacingScale
GridVisualizer"]
    VF --> DIV["Dividers"]
    VF --> GLY["Glyphs"]
    VF --> CODE["Code Blocks"]
    VF --> TERM["Terminal"]

Structure

graph LR
    STR["Structure"]
    STR --> SHELL["Shell Layouts
ShellChrome
ShellLayoutSummary"]
    STR --> CLAYOUT["Content Layouts
PageLayoutReference"]
    STR --> SITE["Site Archetypes
SiteLayoutShowcase"]
    STR --> NAV["Navigation
Navbar / Sidebar / Tabs"]

Interaction

graph LR
    INT["Interaction"]
    INT --> SEM["Semantic Classes
SemanticClassSelect
danger / success / warning"]
    INT --> STATUS["Status Indicators
StatusGrid
badges / alerts / toasts"]
    INT --> UI["UI Elements
ButtonShowcase
CardShowcase
FormsShowcase"]

Reference

graph LR
    REF["Reference"]
    REF --> TOK["Design Tokens
TokenCard groups"]
    REF --> CSS["Generated CSS
CssViewer"]
    REF --> YAML["Theme Config
YamlConfigViewer"]
    REF --> SNIP["Snippets
css-snippets / jsx-snippets"]

/sitemap — Site Map

graph TD
    PAGE["/sitemap"]
    PAGE --> FLOW["Page Flow
mermaid diagram"]
    PAGE --> PAGES["Page Inventory
spec-table"]
    PAGE --> SECTIONS["Style Guide Sections
grouped list"]
    PAGE --> THEMES["Themes
active indicator"]

Page Inventory

RoutePurposeKey Components
/Landing pageStyleGuideBtn, StyleGuideCard, StyleGuideCardGrid
/styleguideInteractive style guide viewerThemeConfigProvider, ThemeAwareSections, ShellChrome, LayoutBar
/sitemapSite flow and section inventorymermaid.js, spec-table

Style Guide Sections

Visual Foundation

  • Typography#typography
  • Color Palette#color
  • Spacing, Gutters & Whitespace#spacing
  • Dividers & Rules#dividers
  • Glyph Language#glyphs
  • Code Blocks#code-blocks
  • Terminal#terminal

Structure

  • Shell Layouts#shell-layouts
  • Content Layouts#content-layouts
  • Site Archetypes#site-archetypes
  • Navigation#navigation

Interaction

  • Semantic Classes#semantic-classes
  • Status Indicators#status-indicators
  • UI Elements#ui-elements
  • Project Components#ink-effects
  • Screens#screens

Reference

  • Design Tokens#design-tokens
  • Generated CSS#generated-css
  • Theme Config#theme-config
  • Snippets & Demos#snippets
  • Overrides#overrides

Themes

  • Base Themestyle-guide(active)