Design System & Style Guide

A comprehensive reference for building consistent, accessible, and scalable interfaces across all Dictionary products. This document defines our visual language, component patterns, and development standards.

Brand Overview

Dictionary is a modern language tool built for clarity, precision, and discovery. Our design system reflects these values: clean typography, deliberate whitespace, and a color palette that balances academic trust with contemporary digital warmth.

Core Principles: Readability first, semantic structure, progressive enhancement, and universal accessibility. Every pixel should serve the user's journey through language.

Color Palette

Our color system is built on a 50-step functional scale. Use primary colors for interactive elements and brand recognition, neutrals for structure and text, and semantic colors for status communication.

Brand & Primary

Brand 50
#EEF2FF
Brand 100
#E0E7FF
Brand 500
#4F46E5
Brand 600
#4338CA
Brand 700
#3730A3
Brand 900
#312E81

Functional & Semantic

Secondary
#0D9488
Accent
#F59E0B
Success
#10B981
Error
#EF4444
Info
#3B82F6

Typography

We use a dual-font system: Playfair Display for headings (conveying authority and elegance) and Inter for body/UI text (optimized for screen readability). Code and technical data use JetBrains Mono.

H1 / 40px / 700
Exploring Language & Definition
H2 / 32px / 600
Contextual Meanings & Usage
H3 / 24px / 600
Etymology & Historical Roots
Body / 16px / 400
Body text is set in Inter for optimal legibility. We maintain a 1.6 line-height and avoid lines longer than 75 characters for comfortable reading.
Small / 14px / 400
Used for captions, hints, and secondary metadata.
Mono / 14px / 400
api.dictionary.com/v2/entries

Spacing & Layout

We follow a 4px baseline grid. All padding, margins, and gaps are multiples of 4 (0.25rem, 0.5rem, 0.75rem, etc.). Consistent spacing creates visual rhythm and reduces cognitive load.

/* Spacing Scale Reference */ --space-1: 0.25rem (4px) --space-2: 0.5rem (8px) --space-3: 0.75rem (12px) --space-4: 1rem (16px) --space-5: 1.25rem (20px) --space-6: 1.5rem (24px) --space-8: 2rem (32px) --space-12: 3rem (48px) --space-16: 4rem (64px)

Layout Grid: Desktop uses a 12-column grid with 24px gutters. Mobile collapses to a single column with 16px side padding. Content max-width is capped at 1280px for readability.

UI Components

Standardized building blocks for consistent interaction patterns. Always use semantic HTML and maintain keyboard accessibility.

Buttons

Badges & Tags

New Active Pending Restricted

Cards

Adjective

Effervescent

Vivacious and enthusiastic; marked by high spirits and buoyancy. Often used to describe personality or atmosphere.

Alerts & Notifications

ℹ️
Info: Word definitions update daily from our lexicographical partners.
✅
Success: Word successfully added to your study deck.
⚠️
Warning: You've reached your daily search limit on the free plan.
❌
Error: Unable to fetch audio pronunciation. Please check your connection.

Forms & Inputs

Forms should be progressive, clearly labeled, and provide immediate feedback. Use inline validation where possible.

Supports natural language queries and wildcard searches.

Icons & Imagery

Icons should be line-based, geometric, and consistent at 24px size. Use Lucide or Heroicons for the core set. Never use icons without accompanying text for primary actions.

Imagery Guidelines: Use abstract linguistic concepts, typography-focused photography, or clean vector illustrations. Avoid stock photos of people reading books. Maintain a 2:1 or 16:9 aspect ratio for hero/media elements.

Accessibility Standards

Dictionary meets WCAG 2.1 AA standards across all touchpoints. Key requirements:

  • Contrast: All text meets 4.5:1 ratio against backgrounds. Interactive elements meet 3:1.
  • Focus States: Visible outline using --color-brand-100 ring on :focus-visible. Never remove focus outlines without replacement.
  • Keyboard Navigation: Full functionality accessible via Tab, Shift+Tab, Enter, Space, and Escape.
  • Reduced Motion: Respect prefers-reduced-motion: reduce by disabling non-essential animations and parallax.
  • Semantic HTML: Use proper landmarks, ARIA labels where necessary, and skip-to-content links.

Developer Reference

Copy these custom properties directly into your project's root stylesheet to inherit the full design system.

/* Dictionary Design Tokens */ :root { --color-brand-500: #4F46E5; --color-neutral-900: #0F172A; --color-neutral-50: #F8FAFC; --font-sans: 'Inter', system-ui, sans-serif; --font-serif: 'Playfair Display', serif; --radius-md: 0.5rem; --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --transition-base: 200ms ease; /* ... additional tokens in full source */ }
Note: For production apps, consider exporting tokens to JSON/TS using a tool like @tokens/studio or style-dictionary to sync across CSS, Swift, and Kotlin.