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
Centercode Logo
Geometric mark representing testing and collaboration
Typography
Clean, modern typography for excellent readability across devices.
Figtree
Primary typeface for all UI text. Geometric sans-serif with excellent legibility.
Type Scale
Heading 1 (text-3xl)
Heading 2 (text-2xl)
Heading 3 (text-xl)
Body text (text-base)
Small text (text-sm)
Heading Hierarchy
Level 2 for page sections (with icons), Level 3 inside cards, Level 4 subtle for form labels.
See SectionHeading →AI Direction Tip
Use text-foreground for primary text, text-muted-foreground for secondary. Never hardcode colors.
Design Fundamentals
Core patterns for spacing, colors, and visual consistency
Semantic Colors
Use semantic tokens for theme-aware styling. Never hardcode hex values.
Spacing System
Consistent spacing tokens for layout and component spacing.
space-y-content — 16px (within cards)space-y-section — 24px (between sections)space-y-block — 32px (major divisions)Border Radius
Consistent rounding for UI elements. Larger radius for cards, smaller for buttons.
Shadows
Subtle elevation for interactive elements. Use sparingly for focus and hover states.
Dark & Light Mode
Full theme support with automatic color adaptation. Use semantic tokens to ensure correct appearance in both modes.
AI Direction Tip
Always use semantic spacing tokens (space-y-content, space-y-section) rather than arbitrary values like space-y-4.
Visual Language
Icons
Font Awesome Sharp Duotone Light icons for consistent visual language.
Vocabulary
Consistent terminology for user-facing text and UI labels.
New creates from scratch
Add adds to existing collection
Delete permanently removes
Remove detaches without deleting
Voice & Tone
Friendly, professional communication that respects users' intelligence.
Conversational but not casual
Empathetic acknowledges user effort
Humor when appropriate, never forced
User Roles
Standardized icons and colors for role badges across the platform.
AI Direction Tip
Use action verbs for buttons: Save, Create, Delete. Avoid vague labels like Submit or OK.
Component Architecture
Layered system from primitives to composed pages
Component Pyramid
AI Direction Tip
Start with the highest-level component that fits. Use ListTableBlock before building a custom table.
AI Direction Tips
Follow these guidelines when directing AI to build with Ditto:
- Reference components by name: "Use PageHeader with back button"
- Specify semantic tokens: "Use text-muted-foreground for help text"
- Request blocks for features: "Add a ListTableBlock for the users table"
- Mention layout choice: "Use LayoutShell with the standard sidebar"
- Point to demos: "Like the example on /ditto/components/page-header"
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
LayoutFocus — Focused 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
FormattedDate — Relative dates
See live demos: Components · Blocks · Layouts