Wireframe Kit
Design System
Kaizen Wireframe Kit is a modular wireframing design system built in Figma for low fidelity prototyping and machine readable UI consistency.
This page documents the structure, tokens, and component architecture of the system.
System Overview
What is the Kaizen Wireframe Kit designed to solve?
The Kaizen Wireframe Kit solves the gap between abstract product ideas and structured engineering specifications. It eschews stylistic decoration in favor of structural clarity, utilizing a flat, minimal aesthetic that prevents stakeholders from focusing on visual design prematurely.
Consistency is the core philosophy. By strictly adhering to a token-based architecture, teams can produce wireframes that are not only visually coherent but semantically structured. This structure allows for seamless translation into higher fidelity designs or direct code scaffolding.
Core Principles
- Flat and minimal: Reduces visual noise and ambiguity for machine interpretation.
- Semantic naming: Components are named by function rather than appearance.
- Token-driven: Spacing, radii, and layout rely on explicit token primitives.
Components
This section lists all available components and supported variants in the Kaizen Wireframe Kit.
Components are grouped by function rather than visual placement to preserve semantic meaning and improve machine interpretation.
Navigation
- Navbar / Desktop
State=Default / State=Scrolled / LoggedIn=True / LoggedIn=False - Navbar / Mobile
State=Closed / State=MenuOpen - Sidebar / Vertical
Status=Expanded / Status=Collapsed / Theme=Dark - Breadcrumbs
Depth=3 / Depth=5 / Style=Slash - Pagination
Type=Basic / Type=Numbered / State=FirstPage - Tabs / Horizontal
Count=3 / Count=5 / Active=First - Stepper / Process
Steps=3 / Current=2 / Orientation=Horizontal - Menu / Dropdown
Items=Simple / Items=WithIcons / Width=Auto
Forms
- Input / Text
State=Default / State=Focused / State=Error / State=Disabled / Icon=Left - Input / Password
Visibility=Hidden / Visibility=Shown - Select / Dropdown
State=Closed / State=Open / Selection=Placeholder - Checkbox Group
Selected=None / Selected=Partial / Selected=All / Layout=Vertical - Radio Group
Options=3 / Selected=Option1 / Layout=Horizontal - Toggle / Switch
State=Off / State=On / Size=Small - Button / Primary
Size=Small / Size=Medium / Size=Large / Icon=None / Icon=Left / Icon=Right / State=Loading - Button / Secondary
Size=Medium / State=Hover / Theme=Light - Button / Ghost
State=Default / State=Hover - Textarea
Rows=4 / State=Resizable - Slider / Range
Handles=Single / Handles=Double - Upload / File
State=Empty / State=Uploading / State=Done
Data Display
- Table / Basic
Rows=10 / Header=Sticky / Actions=True - Table / Datagrid
Density=Compact / Pagination=Bottom - Card / Info
Image=Top / Image=Left / Footer=True / Shadow=None - Card / Product
Price=Visible / Rating=Stars - Badge / Status
Type=Success / Type=Warning / Type=Error / Type=Neutral / Style=Pill - Avatar / Single
Size=24 / Size=32 / Size=48 / Size=64 / Type=Image / Type=Initials - Avatar / Group
Count=3 / Count=5+ - Tooltip
Position=Top / Position=Bottom / Pointer=Center - Progress / Bar
Value=30% / Value=70% / Color=Primary - Stat / Metric
Trend=Up / Trend=Down / Icon=Background
Frames & UI
- Grid / Container
Columns=12 / Columns=4 / Gap=16px / Gap=24px / Width=Fixed - Modal / Dialog
Size=Small / Size=Medium / Size=Large / Actions=Two / Close=Icon - Drawer / Side
Orientation=Horizontal / Orientation=Vertical / Label=Text - Skeleton / Loader
Shape=Text / Shape=Circle / Shape=Rectangle - Device / Mobile
CountModel=iPhone14 / Orientation=Portrait=3 / Count=5+ - Device / Browser
OS=Mac / OS=Windows
Snippets
- Hero / Centered
CTAs=2 / Image=Background - Hero / Split
Image=Right / Image=Left - Footer / Simple
Socials=True / Newsletter=False - Footer / Mega
Columns=4 / Bottom=Copyright - Grid / Features
Columns=3 / Icons=Top - Table / Pricing
Tiers=3 / Highlight=Middle - Form / Contact
Fields=Basic / Map=Side - Review / Testimonial
Avatar=Left / Style=Quote
Components Variants – Copy & Paste
- Icon Set
Style=Outline / Style=Solid / Size=24 - Placeholder / Image
Ratio=16:9 / Ratio=4:3 / Ratio=1:1 - Cursor
Type=Pointer / Type=Text - Sticky Note
Color=Yellow / Color=Blue / Color=Red
Tokens Reference
The Kaizen Wireframe Kit uses a structured design token system covering color, typography, spacing, radius, and borders.
This section defines the design tokens used by the system.
Tokens act as the primary abstraction layer and must be used consistently across all components and layouts.
Colors (Raw & Semantic)
SEMANTIC
color/text/heading
#171d3e
color/text/body
#1D1D1D
color/surface/background
#ffffff
color/surface/secondary
#e8e8e8
color/interactive/link
#1677E8
color/brand/accent
#181F47
RAW
primary
#171d3e
heading
#1D1D1D
background
#ffffff
surface_secondary
#e8e8e8
link
#1677E8
accent_kaizen
#181F47
Typography
PROPERTIES
Family
Roboto Mono
Weights
Bold, Medium, Regular
Sizes
h1
48px
h3
24px
body_md
16px
caption
12px
Spacing
sp-8
8px
sp-16
16px
sp-24
24px
Border Radius
rd-16
16px
rd-24
24px
rd-36
36px
Border Weight
br-1
1px
br-2
2px
Component Architecture
This component architecture is structured for semantic clarity and machine interpretation.
Grouping Strategy
Components are grouped by function, not visual similarity. For example, a search input is located under Forms, not "Headers," even if it appears in the header. This functional grouping aids the Model Context Protocol (MCP) in understanding the *intent* of the element.
Variants follow a Property=Value syntax. This allows for declarative component usage.
Composition
High Fidelity Structure
Card / Info
-- Image = Top
-- Badge / Status (Type=Success)
-- Button / Primary (Size=Small)
Layout System
The layout system defines how grids, containers, and spacing tokens create responsive wireframes compatible with CSS Grid and Flexbox.
Designers must strictly utilize the Grid / Container primitive found in the "Frames & UI" category. This ensures that all wireframes follow a responsive logic compatible with CSS Grid and Flexbox implementations.
Spacing Scale
Padding and margins must only use the defined sp-* tokens. Do not use arbitrary pixel values (e.g., 13px) as these do not map to the design system's utility classes.
Adaptive Frames
When designing for multiple breakpoints, maintain the same hierarchy but adjust the Grid / Container variant (e.g., switching from Columns=12 on desktop to Columns=4 on mobile).
Usage Guidelines
Rapid Assembly
Start with a Frames & UI container. Drag in "Snippets" for headers and footers first to establish the viewport boundaries.
Low Fidelity Intent
Do not override fonts or colors manually. If a component needs to stand out, use the State=Hover or Type=Warning variants.
Documentation
Use the "Sticky Note" component (found in Snippets) to document specific UX behaviors or business logic directly on the canvas alongside the wireframe.
Why This Kit Is MCP-Ready
MCP Ready means the Kaizen Wireframe Kit is structured for machine interpretation, consistent extraction, and AI assisted code generation.
Attribute-Based Mapping
Variant names such as "Active=True", "Amount=5", and "Status=Expanded" align perfectly with MCP's attribute-based mapping. This allows Large Language Models to read the component node and immediately understand the prop structure without visual analysis.
Deterministic Naming
Standardized naming conventions (PascalCase, consistent grouping) allow MCP to detect hierarchy and roles efficiently. A "Navbar / Mobile" component explicitly tells the model the context and the target device, removing ambiguity.
Semantic Color Tokens
By using semantic colors (e.g., color/text/heading) instead of hex codes, the MCP understands meaning rather than appearance, facilitating accurate code generation for theming systems.
Benefits for Extraction Models
- Reduced Noise: The flat, minimal visual style minimizes "visual hallucinations" where models might misinterpret decoration as content.
- Prop-Style Logic: Button variants (Primary, Secondary) and Input states map directly to React/Vue prop interfaces.
- Stable Extractor Output: Because naming is stable, the MCP Extractor can translate wireframes into code scaffolds with high fidelity.
Common questions
Attribution and License
- This wireframe kit is created and maintained by Kaizen Softworks.
- It is released under the MIT License.
- Free to use, modify, and distribute, including for commercial purposes.
Ready to start wireframing?
