Outfox Design Guide
"Software that takes a breath."
Outfox should feel productive, calm, and fun — like a well-lit workspace where everything is where you expect it. The interface stays out of your way so you can think, but rewards attention with moments of personality: a serif headline, a fox-orange sparkline, a springy animation. It's professional without being corporate, playful without being loud.
- Soft geometry— Generous rounded corners on everything. Approachable and fun, never clinical
- Depth without borders— Surfaces create hierarchy through tonal shifts and shadows, not outlines
- Fox-orange as accent, not furniture— Our brand color appears in charts, badges, and highlights — not on buttons or large surfaces
- Typographic personality— Playfair Display for editorial headings. Inter for clean, contemporary body text
Two themes — Arctic Fox Dark and Arctic Fox Light — share the same semantic tokens. Toggle with the sun/moon button above. For the full spec, seearchitecture/reference/DESIGN.md
Typography
Three font families create hierarchy: a serif display face for headings, a clean sans-serif for body, and a monospace for data.
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
The quick brown fox jumps over the lazy dog
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
Type Scale
Brand Dashboard
Campaign Performance
Weekly Overview
Notification Preferences
Track your creative performance across all channels and campaigns.
Last updated 2 hours ago
12,482 impressions
$1,234.56
Colors
All colors are defined as OKLCH CSS custom properties, themed for light and dark modes. Use Tailwind semantic classes — never raw color values.
Surfaces
Surfaces create visual depth. From back to front: background, card, muted, accent, popover.
--background
--card
--popover
--muted
--accent
Interactive
Used for buttons and interactive elements. Each token pairs with a foreground color for text.
--primary
--secondary
--destructive
--success
Text Hierarchy
Primary text, headings, stat values
--foregroundPrimary text on card surfaces
--card-foregroundSubtitles, descriptions
--secondary-foregroundHelper text, timestamps, labels
--muted-foregroundText on accent surfaces
--accent-foregroundBorders & Ring
border-border
Card borders, dividers, separators
border-input
Input fields, textareas, selects
ring-ring
Focus indicator on interactive elements
Chart Palette
A curated 5-color palette for data visualization. Use in order. Never use for UI chrome.
Chart 1
Primary series (fox-orange)
Chart 2
Secondary series (green)
Chart 3
Tertiary series (blue-grey)
Chart 4
Fourth series (gold/purple)
Chart 5
Fifth series (amber/coral)
Buttons & Status
Use shadcn/ui Button variants. One primary per section, secondary for supporting actions, outline for neutral, ghost for minimal.
Primary
Main CTA — one per section
Secondary
Supporting actions
Outline
Neutral actions, filters
Ghost
Minimal — icon buttons, nav
Destructive
Dangerous / irreversible
Positive: connected, complete, growth
Danger: errors, failures, delete confirmations
Neutral: inactive, pending, disabled
Metric changes
Badges
Shadows & Elevation
Shadows communicate layering. Use the predefined tokens — they adapt automatically for dark mode.
Card
Default card elevation
Float
Elevated overlays, dropdowns
Composer
Chat composer resting state
Composer Focus
Chat composer when focused
Inset
Subtle pressed / inset effect
Glow
Decorative glow
Border Radius
Base radius is 0.875rem (14px). All radii derive from this base value.
Small
radius - 4px
Pills, inner elements
Medium
radius - 2px
Buttons, inputs
Large
radius (14px)
Cards
Extra Large
radius + 4px
Panels, modals
Motion & Easing
Easing curves and animation utilities defined in globals.css.
Easing Curves
Spring
cubic-bezier(0.22, 1, 0.36, 1)
Enter animations, slide-ins
Bounce
cubic-bezier(0.34, 1.56, 0.64, 1)
Playful micro-interactions
Smooth
cubic-bezier(0.4, 0, 0.2, 1)
General transitions
Animation Utilities
Fade Up
Fade in + slide up (0.25s spring)
Fade In
Simple opacity fade (0.2s)
Shimmer
Loading shimmer gradient
Dot Pulse
Typing indicator dots
Thinking Dot
AI thinking indicator
Message In
Chat message entrance
Composer Glow
Pulsing glow on composer
Common Patterns
Reference implementations of frequently-used UI patterns.
Impressions
12.4K
+14%
Click Rate
3.2%
+0.8%
Bounce Rate
24%
-3.1%
No campaigns yet
Create your first campaign to start tracking performance.
This will be visible to your team.
