Welcome to Ditto
Branded layouts, blocks, and components built on shadcn/ui — designed for user testing workflows.
Claude Code agent skill with guardrails and patterns to build aligned with Ditto — preventing drift automatically.
This /ditto/ site helps designers understand capabilities and direct AI agents effectively.
Workflow: Explore demos → direct AI using component names → AI skill ensures correct implementation.
Brand Identity
The Centercode Logo
Multi-color palette representing energy and innovation. The swirl motif suggests continuous improvement.
Typography
Figtree from Google Fonts across the platform. Friendly, readable, mobile-first sizing.
Figtree
Single font family for everything — headlines, body, buttons, UI.
Type Scale
Heading 1 — Page Titles
Heading 2 — Sections
Heading 3 — Subsections
Body text for paragraphs and descriptions
Small text for captions and metadata
Heading Hierarchy
Level 2 for page sections (with icons), Level 3 inside cards, Level 4 subtle for form labels.
See SectionHeading →AI Direction Tip
Say "page title" or "section heading" — don't specify font sizes.
Design Fundamentals
Components handle these automatically — no need to specify.
Colors
Semantic tokens adapt to light/dark mode. Never use hex codes.
Spacing
Three semantic levels create consistent rhythm.
space-y-content — 16px (within content)space-y-section — 24px (between sections)space-y-block — 32px (between blocks)Border Radius
Consistent corner rounding built into all components.
Shadows
Elevation shadows built into Card, Dialog, etc.
Dark & Light Mode
Semantic tokens switch automatically. Components adapt instantly.
AI Direction Tip
Say "primary button" not hex colors or pixel values.
Visual Language
Icons
Font Awesome 7 Pro, Sharp Duotone Light style throughout.
Vocabulary
Standard terms for consistent UX:
New — create from scratch
Add — attach to existing
Delete — permanent removal
Remove — detach (can re-add)
Voice & Tone
How we communicate:
Conversational — credible, not corporate
Empathetic — users first, always
Humor — clever, not forced
AI Direction Tip
Reference icons by meaning ("save icon"), vocabulary by action ("Delete").
Component Architecture
Five tiers from primitives to composed pages. Each builds on the one below.
The Component Pyramid
AI Direction Tip
Start with high-level components like AdminListTableBlock.
Blocks
High-level compositions for common page patterns. Feature-rich, ready to use.
Page Layouts
Six patterns covering all page types. Responsive, navigation, and content handled automatically.
Tips for Directing AI
Get the best results from Claude Code:
- Describe what, not how. "Add a user profile card" not "create a div with flexbox."
- Use component names. "Use PageHeader" or "add AdminListTableBlock."
- Reference Ditto demos. "Like /ditto/components/nav-card-grid."
- Describe outcomes. "Users should filter projects by status."
- Trust the system. Don't specify colors or spacing.
Component Quick Reference
Request these by name instead of describing UI from scratch.
Use these component names when directing AI to ensure consistency.
LayoutShell — Sidebar + content
LayoutWizard — Multi-step flows
LayoutForm — Centered form pages
LayoutCard — Single card (login, etc.)
PageHeader — Page title + actions
PageCard — Content container
SectionHeading — Section titles (H2/H3)
Prose — Paragraph text
AdminListTableBlock — CRUD tables
ListTableBlock — Read-only tables
TimelineBlock — Activity feeds
PrettyCardListBlock — Card grids
DashboardBlock — Analytics dashboards
FormBlock — Complete form system
FormSection — Grouped fields
FormTextField, FormSelectField, etc.
FormAudiencePickerField — Access control
TopBar — Header with nav
LeftNav — Sidebar navigation
WizardNav — Step indicator
NavCardGrid — Link card grid
LoadingButton — Submit with spinner
EmptyCard — Empty states
FullPageLoader — Page loading
FormattedDate — Relative dates
See live demos: Components · Blocks · Layouts
Explore Further
Dive deeper into each area: