Craftkit Documentation
Built on top of the battle-tested shadcn/ui architecture and Radix UI Primitives, customized with Jeri Dark Foundation, Electric Lime (#d3ff5e), and React 19 Server Component (RSC) patterns.
Design Tokens & Colors
Color foundations and visual design tokens from DESIGN.md.
Typography & Font Families
5 standardized typography fonts from DESIGN.md: Satoshi, Instrument Serif, Montserrat, Comfortaa, and JetBrains Mono.
.font-satoshiPrimary geometric sans-serif for main application headlines, buttons, form inputs, navigation labels, and structured data tables.
.font-instrumentHigh-contrast classical serif with elegant italic ligatures for display headlines, editorial quotes, and high-impact hero statements.
.font-montserratCrisp, wide geometric proportions optimized for large financial figures, stat card metric numerals, uppercase subheadings, and tracking badges.
.font-comfortaaSoft, rounded modern typeface designed for playful pill tags, onboarding highlights, notification counters, and friendly conversational microcopy.
.font-monoHigh-legibility developer monospace font with distinct programming ligatures for code blocks, JSON payloads, API key tokens, and terminal CLI outputs.
Proportional font sizing, line heights, and weight tokens across breakpoints.
| Scale Level | Font Size | Default Font | Preview Example |
|---|---|---|---|
| Display Title | 36px / 2.25rem | font-satoshi | Building Digital Architecture |
| Heading 1 | 24px / 1.5rem | font-satoshi | Interactive Component Library |
| Editorial Italic | 22px / 1.375rem | font-instrument | The standard for modern aesthetic craft |
| Metric Value | 18px / 1.125rem | font-montserrat | $1,250,400.00 (+18.4%) |
| Body Regular | 14px / 0.875rem | font-sans | Clean, legible body text for documentation and long-form prose. |
| Code / Key | 12px / 0.75rem | font-mono | pk_live_092a83bd78e024 |
Icons Library (Lucide React)
Curated icon library re-exported directly by Craftkit. Click any tile to copy its JSX snippet.
Form & Input Controls
Text fields, select dropdowns, search inputs, switches, checkboxes, and range sliders.
Inputs, search field, textareas, switch toggles, checkboxes, and sliders
Feedback & Overlays
Sonner-style toast notifications, confirm popups, alert callouts, dialogs, and tooltips.
Sonner toasts, modal dialogs, confirm popups, alerts, tooltips, and empty states
System Operational
Deployment Successful
API Key Expiring Soon
Database Sync Interrupted
No Documents Found
Get started by creating your first document or importing existing assets.
Layout & Surfaces
Stat cards, surface cards, structured data tables, and collapsible accordions.
StatCards, metric cards, and collapsible FAQ accordion panels
Layout Shells (Navbar, Sidebar, Footer)
Scaffolding and app shell layouts featuring headers, collapsible sidebars, and footers.
Top navigation headers, collapsible sidebar drawers, and bottom footer bars
Modern hero banner with badge, headline, glow effect, lead description, and CTA actions.
Top-level navigation header with brand identity, nav links, and action slots.
Responsive drawer sidebar with sections, active state badges, and user profile footer.
Bottom footer bar with copyright, navigation links, and legal policy links.
Login Page Template
Full-page sign-in form built entirely from Craftkit primitives. Includes email & password inputs, password visibility toggle, remember-me checkbox, social login (Google / GitHub), and a link to the register page.
Sign-in screen with social login, password toggle, and remember-me
Sign in
Welcome back to Jeri Ecosystem
Don't have an account? Create one free
Register Page Template
Multi-field sign-up form with full name, email, password strength meter (4-bar indicator), terms checkbox, and a submit button that enables only when the user agrees to terms.
Sign-up form with password strength meter, terms agreement, and social sign-up
Create account
Join the Jeri Ecosystem today
Strong
Already have an account? Sign in instead
Forgot Password Page Template
Two-state password reset flow: an email input form and a success confirmation screen. The success state shows the recipient address and security guidance. Both states support animated transitions.
Two-state password reset flow: input form + success confirmation
State 1 — Email Input
Reset password
Enter your email to receive a secure reset link
We'll send a link if it matches an account.
State 2 — Email Sent
Check your inbox
Reset link sent to
alex@jeriproject.com