Brand Identity

DopaBlocks Brand Style Guide

Last updated: October 15, 2025

Mission & Values

Mission

Help ADHD brains build better habits through gamified, dopamine-friendly productivity tools.

Values

  • Playfulness
  • Practicality
  • Neurodiversity
  • Progress Over Perfection

Voice & Tone

Energetic, encouraging, ADHD-aware. Speaks to the struggle but focuses on solutions. Like a supportive friend who "gets it" - never clinical, always actionable.

Logo Usage

Primary Logo System

Primary: Horizontal 3-block icon + "DopaBlocks" wordmark

Icon Structure: Three rounded squares (32x32px, 8px radius) arranged horizontally with 12px gaps

Clear space: ≥ height of block (32px) on all sides

Minimum size: 24px icon height on screen; 12mm in print

Backgrounds: Works on solid backgrounds; on images use 10-20px, 15-25% dark overlay

Logo Variations

Standard

Horizontal icon + wordmark on light backgrounds

Dark

Horizontal icon + white wordmark on dark backgrounds

Compact

Smaller icon + wordmark for navigation

Color System

All colors are AA compliant for accessibility.

Core Palette

Dopamine Purple
Dopamine Purple
#7C3AED
AA 5.70:1 on white
Focus Blue
Focus Blue
#2563EB
AA 5.17:1 on white
Energy Orange
Energy Orange
#F59E0B
Reward color only
Success Green
Success Green
#10B981
Calm Teal
Calm Teal
#14B8A6

Neutrals

Stone 50
Stone 50
#FAFAF9
Stone 100
Stone 100
#F5F5F4
Stone 200
Stone 200
#E7E5E4
Stone 600
Stone 600
#57534E
Stone 900
Stone 900
#1C1917

Gradients

Dopamine Gradient
Dopamine Gradient
linear-gradient(135deg, #7C3AED, #2563EB)
Energy Gradient
Energy Gradient
linear-gradient(135deg, #F59E0B, #10B981)

Typography

Font Stack

font-family: 'Figtree', system-ui, apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;

Scale & Hierarchy

--text-4xl (2.25rem / 36px)

Heading 1 - Build focus in blocks, not willpower

--text-3xl (1.875rem / 30px)

Heading 2 - Designed for ADHD Brains

--text-2xl (1.5rem / 24px)

Heading 3 - Focus Blocks

--text-xl (1.25rem / 20px)

Subheading - Break work into manageable chunks

--text-lg (1.125rem / 18px)

Lead text - DopaBlocks helps ADHD brains build better habits through gamified, dopamine-friendly productivity tools.

--text-base (1rem / 16px)

Body text - Break work into manageable chunks with visual timers that respect your attention span. Earn rewards, unlock achievements, and build streaks that keep you motivated.

--text-sm (0.875rem / 14px)

Secondary text - Used for labels, captions, and smaller interface text.

--text-xs (0.75rem / 12px)

Microcopy - Labels, microcopy, and the absolute smallest text.

.eyebrow
ADHD-Friendly Productivity

Spacing System

Scale

--space-3xs: 0.25rem (4px)
--space-2xs: 0.5rem (8px)
--space-xs: 0.75rem (12px)
--space-sm: 1rem (16px)
--space-md: 1.5rem (24px)
--space-lg: 2rem (32px)
--space-xl: 3rem (48px)
--space-2xl: 4rem (64px)
--space-3xl: 6rem (96px)

Components

Buttons

Primary Button
Secondary Button
Reward Button
Small Button
Large Button

Cards

Standard Card

Break work into manageable chunks with visual timers that respect your attention span.

Ink Card

Earn rewards, unlock achievements, and build streaks that keep you motivated.

Subtle Card

Visual progress indicators and immediate feedback create positive reinforcement loops.

Alerts

This is an informational alert message for users.

Badges

Default
Hit
New
Featured

Utility Classes

Gradient Text Utility

Use the .grad-text class to apply the brand gradient to text.

ADHD-Specific Components

Progress Bars

Task Completion: 75%

Daily Goal: 40%

Dopamine Blocks

1
2
3
4
5
6

Streak Counter

🔥 7-day streak

Accessibility

Focus States

All interactive elements have clear focus states using the brand's focus blue color.

Or on this link

High Contrast Support

The design system includes enhanced styles for users who prefer high contrast mode.

Reduced Motion

All animations respect the user's reduced motion preferences.

Content Guidelines

Writing Principles

  • Headlines: Benefits > features ("Build focus in blocks, not willpower")
  • Links: Action-oriented ("Start focusing" not "Click here")
  • Lists: Keep to 3-5 items max for ADHD attention spans
  • Paragraphs: 2-3 lines maximum; use plenty of white space

Color Psychology

  • Dopamine Purple: Primary actions, progress indicators
  • Energy Orange: Rewards, streaks, completion states only
  • Focus Blue: Secondary actions, information states
  • Success Green: Positive outcomes, achievements