Brand kit

FocusStreak Brand

Colors and typography taken from the habit-builder app — not the other way around. Copy values for Reels, ads, and design tools. When the app theme changes, update habit-builder/src/theme/index.ts then sync lib/brand.ts.

Extracted from habit-builder — src/theme/index.ts, AppLogo.tsx, app.json

Wordmark (logo text)

From AppLogo.tsx — use both colors only on the brand name.

FocusStreak
#8172EF

Focus

Inter Bold (700)

#FB8D52

Streak

Inter Medium (500) italic

Wordmark — Tailwind
// Wordmark (logo only)
text-[#8172EF] font-bold  // Focus
text-[#FB8D52] font-medium italic  // Streak

Dark theme

Default privacy-first look — `darkTheme` in the app

Live preview

Today's habitsComplete
#0f172a

Background

Main screen (slate-900)

#1e293b

Surface

Cards, headers (slate-800)

#334155

Elevated

Inputs, chips (slate-700)

#f1f5f9

Primary text

Headings, body (slate-100)

#cbd5e1

Secondary text

Subtitles (slate-300)

#94a3b8

Muted text

Hints, placeholders (slate-400)

#1e293b

Card

Card background

#334155

Card border

Card outlines

#334155

Border

Dividers, outlines

#6366f1

Primary button / accent

CTAs, tabs, toggles (indigo-500)

#475569

Secondary button

Secondary actions (slate-600)

#ffffff

Button text

Text on primary buttons

#10b981

Success

Completions, positive states

#ef4444

Error

Errors, destructive

#f59e0b

Warning

Warnings

#3b82f6

Info

Informational

#64748b

Placeholder

Empty fields (slate-500)

Dark theme — CSS variables
:root[data-theme="dark"] {
  --fs-background: #0f172a;
  --fs-backgroundSecondary: #1e293b;
  --fs-backgroundTertiary: #334155;
  --fs-text: #f1f5f9;
  --fs-textSecondary: #cbd5e1;
  --fs-textTertiary: #94a3b8;
  --fs-card: #1e293b;
  --fs-cardBorder: #334155;
  --fs-border: #334155;
  --fs-buttonPrimary: #6366f1;
  --fs-buttonSecondary: #475569;
  --fs-buttonText: #ffffff;
  --fs-success: #10b981;
  --fs-error: #ef4444;
  --fs-warning: #f59e0b;
  --fs-info: #3b82f6;
  --fs-placeholder: #64748b;
}

Light theme

Optional light mode in app settings — `lightTheme` in the app

Live preview

Today's habitsComplete
#f8fafc

Background

Main screen

#ffffff

Surface

Cards, sheets

#f1f5f9

Elevated

Subtle sections

#1f2937

Primary text

Headings, body

#6b7280

Secondary text

Subtitles

#9ca3af

Muted text

Hints

#ffffff

Card

Card background

#e5e7eb

Card border

Card outlines

#e5e7eb

Border

Dividers

#f3f4f6

Divider

Section separators

#6366f1

Primary button / accent

CTAs, tabs, toggles (indigo-500)

#e5e7eb

Secondary button

Secondary actions

#ffffff

Button text

Text on primary buttons

#10b981

Success

Completions

#ef4444

Error

Errors

#f59e0b

Warning

Warnings

#3b82f6

Info

Informational

Light theme — CSS variables
:root[data-theme="light"] {
  --fs-background: #f8fafc;
  --fs-backgroundSecondary: #ffffff;
  --fs-backgroundTertiary: #f1f5f9;
  --fs-text: #1f2937;
  --fs-textSecondary: #6b7280;
  --fs-textTertiary: #9ca3af;
  --fs-card: #ffffff;
  --fs-cardBorder: #e5e7eb;
  --fs-border: #e5e7eb;
  --fs-divider: #f3f4f6;
  --fs-buttonPrimary: #6366f1;
  --fs-buttonSecondary: #e5e7eb;
  --fs-buttonText: #ffffff;
  --fs-success: #10b981;
  --fs-error: #ef4444;
  --fs-warning: #f59e0b;
  --fs-info: #3b82f6;
}

Habit colors

User-selectable habit colors — identical in dark and light mode.

#3b82f6

Habit blue

Habit color option

#10b981

Habit green

Habit color option

#8b5cf6

Habit purple

Habit color option (violet)

#ec4899

Habit pink

Habit color option

#f97316

Habit orange

Habit color option

#ef4444

Habit red

Habit color option

#6b7280

Habit gray

Neutral / disabled

Default milestone card gradient: #6366f1 → #818cf8

Reels & short video (3-color rule)

Mapped from the app's dark theme. Use one accent per clip.

#0f172a

Background

App dark background

#ffffff

Text

Captions on pure dark

#6366f1

UI accent

Buttons, streak numbers (app primary)

#8172EF

Wordmark accent

“Focus” in logo only

Use dark theme background + primary text. Highlight with UI indigo (#6366f1) or wordmark purple (#8172EF) — not both in one frame.

AI / Reels prompt
Background #0f172a, text #ffffff, accent #6366f1 for UI highlights OR #8172EF for brand name only. Font: Inter.

Native app shell

From app.json and Android resources.

#6366f1

Splash / adaptive icon

Launch screen background

#6366f1

Notification tint

Android notification icon

#0f172a

Status bar (dark mode)

Android status bar

#ffffff

Status bar (light mode)

Android status bar

Typography

In-app logo

Inter is loaded for the in-app logo. Other screens use the system default unless styled.

  • Regular: Inter_400Regular
  • Medium: Inter_500Medium
  • Bold: Inter_700Bold

Website

Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Google Fonts — Inter

Reels / AI: Use Inter only — same as the logo. Do not swap fonts between clips.

Website (marketing)

Landing page uses the same wordmark colors; buttons use purple gradients.

#8172EF

Focus (web)

Navigation & headings

#FB8D52

Streak (web)

Navigation italic

Social profiles

Official handles — sourced from site config (NEXT_PUBLIC_SOCIAL_*).

Assets & links

https://focusstreak.codemadebiz.com/brand