Design System
DOD Design Language
Design System
The visual language behind every Dreamers of Day product. Built for consistency, flexibility, and the work of ambitious teams.
Color
Color Palette
Dark-first palette anchored in near-black. The signature gradient — pink to orange to gold — carries all accent energy.
Gradient Text
Gradient Eyebrow Label
Typography
Type Scale
Onest across all weights. Expressive at display sizes, readable at body sizes.
Display Headline
Section Heading
Sub-section Heading
Card Heading
The quick brown fox jumps over the lazy dog. Platform ownership means accountability — not just delivery. We build, operate, and evolve digital platforms without chaos or risk.
Gradient Pretitle
Components
Buttons & CTAs
Ghost buttons on dark backgrounds. Gradient for high-emphasis actions. Text links for supporting navigation.
Components
Cards
Three card types: benefit (numbered features), post (editorial), and case study (image + text).
Benefit Card
Used for numbered feature lists and service breakdowns. Includes count, heading, and body.
Elevated Card
Add bg-brand-color-3 and shadow-elevation-01 for a raised surface on the dark background.
Ghost Card
Default variant. Transparent background with 10% white border. Used for most content grids.
Components
Badges & Decorative
Platform Ops
Data & AI
WordPress
Layout
Grid System
Standard Tailwind grid inside a max-width container. 1 column on mobile, 2 or 3 on desktop. 20px gap default.