Ant

Ant

Mission

Deliver a polished, predictable enterprise experience through a rigorous design system built on blue-primary hierarchy and consistent spacing.

Brand

🎨 Colors

• #1677ff — Primary blue
• #e6f4ff — Primary light (backgrounds)
• #52c41a — Success green
• #ff4d4f — Error red
• #ffffff — Surface white
• #000000d9 — Text primary (85% black)

🔤 Typography

• Headings: Inter (Google Fonts)
• Body: Inter (Google Fonts)
• Scale: xs 0.75rem, sm 0.875rem, base 0.875rem, lg 1rem, xl 1.25rem, 2xl 1.5rem, 3xl 2.375rem

📐 Spacing

• Grid: 4px base unit with 8px steps (4, 8, 12, 16, 24, 32, 48)
• Section padding: 24px vertical, 24px horizontal (dashboard), 48px (marketing)
• Card gaps: 16px

🧩 Components

• Buttons: 6px border-radius, 32px height default, solid primary fill, 1px border on outlined variant, 15px horizontal padding
• Cards: 8px radius, 1px #f0f0f0 border, white fill, 24px internal padding, box-shadow on hover
• Nav: 200px-256px sidebar width, light background #fafafa, item height 40px, 8px active indicator bar
• Hero: Centered layout, max-width 1200px, large 3xl heading, supporting subtext at lg size
• Footer: #f5f5f5 background, 48px padding, centered copyright, column link groups

♿ Accessibility

• Minimum contrast ratio 4.5:1 for all body text
• Focus states: 2px #1677ff outline with 2px offset on all interactive elements
• Reduced motion: Disable all non-essential transitions, instant hover states
• Minimum font size 12px (0.75rem), recommended 14px body

✍️ Writing Tone

• Voice: Professional, concise, helpful — never playful or sarcastic
• Labels: Title Case for buttons and menu items
• Error messages: State what happened, why, and how to fix it in plain language

Do / Don't

✅ Do

• Follow the 4px grid system for all measurements
• Use the primary blue only for interactive elements and key data
• Group related form fields into cards with clear headings
• Provide loading, empty, error, and success states for every component
• Keep sidebars collapsible with a clear toggle affordance

❌ Don't

• Mix custom spacing values outside the 8px scale
• Use blue for non-interactive decorative elements
• Place more than 3 action buttons in a single row
• Hide navigation structure behind hamburger menus on desktop
• Use gradients — Ant Design is flat and solid

Quality Gates

• All spacing values are multiples of 4px
• Primary blue is only used on interactive or data-highlight elements
• Every data display handles loading, empty, error states
• Focus outlines visible on every interactive element via keyboard
• Sidebar navigation is fully keyboard-accessible
• Touch targets are minimum 44x44px on mobile breakpoints