FREE TOOL · MINIHABITS.CO/TOOLS/THEME-BUILDER

Theme Builder

Two colours in, a whole theme out. Text tones, borders, panels, a 23-step accent ramp, and a light form and a dark form that match. Every pair is contrast-checked as you type, and the export is written so a model can apply it without guessing.

12 PRESETS TO START FROM · NO ACCOUNT · NOTHING UPLOADED

BackgroundAccentDerive the light form for meOff to tune both ends by hand. The twelve shipped themes name both.

Body text on background16.1:1 · AAA

Muted text on background7.0:1 · AA

Accent on background12.5:1 · AAA

Text on an accent fill13.3:1 · AAA

Name (optional)

START FROM

Today

FRI 27 JUL · 3 OF 5 DONE

◆ ◆ ◆

✓Read 20 pagescounter · streak 12820/20

Deep worktimer · running62:11

✓StepsHealthKit · auto8 412

Meditatecheckbox · morning—

2 missed

Paste this into Claude, ChatGPT or your editor's assistant. It names every role and prints the contrast each pair was checked at, so the model knows which colour is allowed where instead of guessing from twelve hex values.

Use this colour palette for the UI. It is a complete theme, checked for contrast,
in a light and a dark form. Apply the form that matches the user's colour scheme.

PALETTE: Untitled
SOURCE: minihabits.co/tools/theme-builder

[DARK]

  GROUND
  background   #101418
  raised       #14181c   cards, sections, anything one step off the page
  panel        rgba(30,34,38,0.55)   translucent, sits over the background

  ACCENT
  accent       #5eead4   contrast on background 12.5:1
  on-accent    #0b0b0c   text and icons ON an accent fill, 13.3:1
  accent-alt   #5f5eea   second accent, for charts and gradients only
  negative     #f4767c   errors, destructive actions

  TEXT (all on the background above)
  primary      #eeefef   contrast on background 16.1:1
  secondary    #c8c9ca   contrast on background 11.2:1
  muted        #9d9fa0   contrast on background 7.0:1
  muted-soft   #8c8e90   contrast on background 5.6:1
  faint        #6d7072   contrast on background 3.7:1
  faintest     #5c5f62   contrast on background 2.9:1

  LINES (alpha over the background, not solid colours)
  hairline     rgba(255,255,255,0.06)   the lightest rule that still reads
  border       rgba(255,255,255,0.1)   default border
  border-strong rgba(255,255,255,0.16)   hover, focus, emphasis

[LIGHT]

  GROUND
  background   #f6f7f8
  raised       #eeeff0   cards, sections, anything one step off the page
  panel        rgba(255,255,255,0.62)   translucent, sits over the background

  ACCENT
  accent       #0d9488   contrast on background 3.5:1
  on-accent    #0b0b0c   text and icons ON an accent fill, 5.3:1
  accent-alt   #170d94   second accent, for charts and gradients only
  negative     #c24249   errors, destructive actions

  TEXT (all on the background above)
  primary      #171717   contrast on background 16.7:1
  secondary    #3c3c3c   contrast on background 10.3:1
  muted        #5c5c5c   contrast on background 6.2:1
  muted-soft   #6b6b6b   contrast on background 5.0:1
  faint        #8a8a8b   contrast on background 3.2:1
  faintest     #9a9b9b   contrast on background 2.6:1

  LINES (alpha over the background, not solid colours)
  hairline     rgba(0,0,0,0.07)   the lightest rule that still reads
  border       rgba(0,0,0,0.12)   default border
  border-strong rgba(0,0,0,0.18)   hover, focus, emphasis

RULES
  1. Text on an accent fill uses on-accent, never a text colour. In this
     palette that is #0b0b0c on dark and #0b0b0c on light.
  2. The faint tones are for metadata and disabled states. Do not set body
     text in them: they are below 4.5:1 on purpose.
  3. Lines are alpha over the ground, so they keep working on top of any
     raised surface. Do not convert them to solid hex.
  4. The accent carries meaning, not decoration. One accent per view.
  5. Do not introduce colours that are not in this list. If something needs
     a tone that is missing, derive it from the accent at a lower alpha.

How to use it

Pick a background and an accent. The other mode is derived while you type, so you always have a light and a dark form.
Watch the four contrast ratios. Anything below AA is called out before you ship it, not after.
Apply it to this site if you want to live in it for a minute. Every page follows, and it survives a reload.
Copy the export. The first tab is written for a model, the other two are JSON and CSS custom properties.

FAQ

What does "reusable by an AI" mean here?

The first export is written as instructions rather than a list of colours. It names every role, prints the contrast ratio each pair was checked at, and ends with the rules that are easy to get wrong, like never putting a text colour on an accent fill. A model can apply it to a codebase without a follow-up prompt.

I only picked two colours. Where did the rest come from?

They are derived. Every text tone is the background mixed towards its opposite by a fixed amount, every hairline is a flat alpha, and the accent ramp is your accent at twenty-three alphas. Those amounts were measured off the miniHabits design, so a theme built here is built the same way the twelve shipped ones are.

Why does it check contrast?

Because two colours that look good together are often unreadable, and a generated palette is exactly where that goes unnoticed. The four ratios update as you type. The faint tones are deliberately below 4.5:1 and are meant for metadata, which is why the export says so.

Does applying a theme send anything anywhere?

No. It is kept in your browser under ih-custom, the same place the twelve themes keep their name. There is no account and nothing is uploaded. Clearing your site data removes it.

Can I put this theme in the app?

Not yet. The app ships 23 themes of its own and does not read a theme from outside. The JSON export is the format that would be imported when it does.

The app ships 23 of these.

miniHabits is a habit tracker built like a dev tool: five tracking modes, a heatmap, and streak shields so one missed day does not reset the chain. Free for 10 habits.

Get miniHabits