Skip to content
pycolors
Theme Builder

Your brand. Your theme.

Turn your brand color into a complete light and dark theme. Try it on real PyColors components, then take the tokens into your app.

Theming guide
Free, no account neededLight and dark includedYour colors stay in your browser

Theme workspace

Customize, preview, export.

    Export theme
    Preview mode

    Northstar

    Avery's workspace

    Demo data

    Workspace Overview

    Dashboard

    Your team's delivery, capacity, and upcoming work.

    Active projects

    12

    +2 this month

    3 shipping this week

    Completed tasks

    148

    +17.5% vs previous

    Last 7 days

    Team capacity

    86%

    4 seats available

    8 active team members

    Delivery health

    98%

    +4% this month

    Milestones delivered on time

    Delivery activity

    Completed tasks · last 7 days

    17.5%
    403020100Mon: 12 tasks completedMonTue: 18 tasks completedTueWed: 15 tasks completedWedThu: 24 tasks completedThuFri: 20 tasks completedFriSat: 28 tasks completedSatSun: 31 tasks completedSun
    Completed tasks126 in the previous period

    Upcoming milestones

    What needs your attention next.

    • TomorrowReview

      Platform handoff

      Atlas platform

    • In 2 daysAt risk

      Launch readiness

      Pulse launch

    • In 3 daysOn track

      Onboarding release

      Orbit onboarding

    Delivery board

    Recent projects across your workspace.

    4 projects
    ProjectStatusOwnerProgressDue

    Orbit onboarding

    Orbit Labs

    		On trackAvery Kim
    28 of 36 tasks78%
    		In 3 days

    Atlas platform

    Atlas Finance

    		In reviewSam Patel
    46 of 50 tasks92%
    		Tomorrow

    Pulse launch

    Pulse Health

    		At riskMorgan Lee
    18 of 40 tasks45%
    		In 2 days

    Nova design system

    Nova Studio

    		On trackJordan Chen
    16 of 25 tasks64%
    		Next week
    Preview data · Changes here do not affect your exported theme.

    Live activity

    1. Sam Patel requested a review

      Atlas platform

      12 min ago

    2. Avery Kim completed 4 tasks

      Orbit onboarding

      38 min ago

    3. Morgan Lee updated the timeline

      Pulse launch

      1 hour ago

    4. Jordan Chen published new components

      Nova design system

      2 hours ago

    All activity is from this demo workspace.
    Component states · Forms, empty states, and focus

    Form validation

    Test field labels, errors, and helper text.

    Empty state

    Test quiet surfaces without losing hierarchy.

    No pending reviews

    New client feedback will appear here.

    Focus-ready action

    Test the visible keyboard focus treatment.

    Usage update
    86% of this month's delivery capacity is assigned. Review upcoming work before adding another project.
    Color readabilityChecks text, field outlines, and keyboard focus in light and dark mode.6 checks need review

    28 of 34 checks meet their contrast target.

    Contrast is how much text or a control stands out from its background. The items below may be harder to read or find. Review them before using this theme.

    Light mode

    15 passed · 2 to review

    • Component borders

      Check borders that identify interactive controls. Decorative dividers can stay subtle.

    • Input field outlines

      Fields may blend into the page. Strengthen the outline if it is needed to identify the field.

    Dark mode

    13 passed · 4 to review

    • Text on destructive buttons

      This text may be hard to read. Increase the difference between the text color and its background.

    • Keyboard focus outline

      The active control may be hard to spot when using a keyboard. Increase the contrast of its focus outline.

    • Component borders

      Check borders that identify interactive controls. Decorative dividers can stay subtle.

    • Input field outlines

      Fields may blend into the page. Strengthen the outline if it is needed to identify the field.

    Try another preset to compare. For precise adjustments, edit the CSS variables listed below after export. This checks generated colors, not every state of your interface. Review actual text, hover, disabled, and keyboard focus states in your app.

    Technical details

    A higher ratio means more contrast. Each row shows the measured ratio and its target for that use. These results describe the exported colors; they do not certify a complete interface as accessible.

    • Component borders · Light

      --border / --background

      Measured 1.96:1 · Target 3:1

    • Input field outlines · Light

      --input / --background

      Measured 1.96:1 · Target 3:1

    • Text on destructive buttons · Dark

      --destructive-foreground / --destructive

      Measured 2.75:1 · Target 4.5:1

    • Keyboard focus outline · Dark

      --ring / --background

      Measured 2.89:1 · Target 3:1

    • Component borders · Dark

      --border / --background

      Measured 1.64:1 · Target 3:1

    • Input field outlines · Dark

      --input / --background

      Measured 1.64:1 · Target 3:1

    Automatic color adjustments

    • A neutral scale was generated from your brand.
    • A color was refined to display reliably. Applied in light mode.
    • Text color was strengthened for readability. Applied in light mode.
    • Text color was strengthened for readability. Applied in light mode.
    • A color was refined to display reliably. Applied in dark mode.
    • Text color was strengthened for readability. Applied in dark mode.

    Export your theme

    Color tokens for both modes, with separate typography CSS. Copy or download your files. Nothing is uploaded.

    CSS variables for :root and .dark. Paste after your PyColors token import.

    Integration checklist

    1. 1Keep the PyColors token import in your global stylesheet.
    2. 2Paste the generated override after that import so it wins predictably.
    3. 3Review one light and one dark product screen before committing.

    Typography

    Mona Sans · Copy separately from your color tokens.

    Save the font in public/fonts/Mona-Sans.var.woff2, then add this CSS after your token imports. Download font

    View typography CSS
    /* Save the font file to public/fonts/Mona-Sans.var.woff2 first. */
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/Mona-Sans.var.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: var(--font-sans);
}

body {
  font-family: var(--font-sans);
}

    From preview to product

    Make it part of your app.

    1. Install @pycolors/tokens and import @pycolors/tokens/tokens.css once in your global stylesheet.
    2. Paste your generated overrides after that import. Keep the existing Tailwind v4 @theme inline bridge.
    3. Use semantic utilities and public @pycolors/ui imports, then check your screens in both modes.
    Read the theming guide

    Before you ship

    Review it in context.

    Theme Builder is contrast-aware, not an accessibility certification. Review generated values in the real interface before shipping.

    • Brand perception across your product and audience.
    • Complete component and page context.
    • Color-vision deficiencies and non-color cues.
    • States communicated only by color.
    • Real focus, hover, and disabled contexts.