Design Brief
Guidelines and principles for the Nizam design system.
This document outlines the core design principles, color palette, typography scale, and component patterns used across Nizam products.
Design Principles#
- Clarity over cleverness — every element should communicate its purpose immediately
- Consistency across surfaces — the same patterns in docs, dashboard, and kiosk
- Respect the content — the UI should frame content, not compete with it
Color Palette#
| Token | Value | Usage |
|---|---|---|
primary-500 | Blue | CTAs, active states, links |
neutral-800 | Dark gray | Headings, primary text |
neutral-600 | Medium gray | Body text |
neutral-400 | Light gray | Descriptions, muted text |
neutral-200 | Border gray | Dividers, borders |
Typography Scale#
Font Stack
The platform uses the system font stack for body text and a monospace stack for code. No custom fonts are loaded.
| Class | Size | Usage |
|---|---|---|
text-display-1 | 36px | Hero headings |
text-heading-1 | 30px | Page titles |
text-heading-2 | 24px | Section headers |
text-heading-3 | 20px | Subsections |
text-heading-4 | 16px | Card titles |
text-body-1 | 16px | Lead paragraphs |
text-body-2 | 15px | Body text |
text-body-3 | 14px | Secondary text |
text-ui-2 | 14px | UI labels |
text-ui-3 | 13px | Small UI |
text-ui-4 | 12px | Captions |
Component Patterns#
Cards#
Cards use rounded-xl borders with hover:shadow-lg on interaction. Group cards with the card-group tag.
Callouts
Info, warning, error, and success callouts for contextual messaging.
Code Blocks
Syntax-highlighted code with language labels and copy buttons.
Steps#
Use numbered steps for sequential workflows. Each step has a number, title, and description.
Define the layout
Start with the Shell component which provides header, sidebar, and content areas.
Add navigation
Pass a navigation array to the Sidebar component with sections and links.
Render content
Use Markdoc to parse and render documentation pages with the shared component library.