Theme Studio - by Javier Padilla

Theme Studioshadcn · theme editor

Preset Gallery

Measured with the WCAG relative luminance formula against the pairings shadcn/ui actually paints. Text needs 4.5:1 for AA and 7:1 for AAA. Focus rings and solid fills need 3:1.

Body text17.42:1

Every paragraph and heading on the page

AAAAA

Text inside cards16.30:1

The card title in the Card section

AAAAA

Text in menus and popovers17.42:1

Region names inside the open Select menu

AAAAA

Label on primary buttons8.42:1

The word "Default" on the filled primary button

AAAAA

Label on secondary buttons14.82:1

The word "Secondary" on the secondary button and badge

AAAAA

Muted text on muted fills3.16:1

Inactive tab labels in the Controls section

AAAAAlarge text only

Helper text and placeholders3.71:1

The "hello@example.com" placeholder in the form

AAAAAlarge text only

Card descriptions3.47:1

The "Your project is linked" line under the card title

AAAAAlarge text only

Highlighted menu item7.87:1

The row under your cursor in an open Select menu

AAAAA

Error alert text5.82:1

The "Destructive alert" banner in the Alerts section

AAAAA

Destructive button label6.22:1

The word "Destructive" on the delete button

AAAAA

Primary button against the page8.42:1

The filled primary button's edge where it meets the background

AAnon-text · no AAA level

Keyboard focus ring8.42:1

The ring drawn when you tab to a button or input

AAnon-text · no AAA level

measured, not scored

WCAG 1.4.11 covers boundaries that identify a control or its state, not decorative rules. These are shown so you can judge them, and left out of the score.

Divider and outline lines1.47:1

The hairline rules between preview sections

not counted · decorative boundary

Form field outlines1.47:1

The border around the email input

not counted · decorative boundary

dark mode11/13 pass AA

6/11 text pairs also reach AAA in this mode. Switch modes to fix the other palette.

Mode

Detail

Colors

Page background

--background

The page itself. Every other surface sits on top of this.

in the preview The ground behind this entire preview panel.

contrast

Body text17.42:1AA

Helper text and placeholders3.71:1AA

Destructive button label6.22:1AA

Primary button against the page8.42:1AA

Keyboard focus ring8.42:1AA

Divider and outline lines1.47:1not scored

Form field outlines1.47:1not scored

Body text

--foreground

Default text colour for body copy and headings.

in the preview Every paragraph and section heading in the preview.

contrast

Body text17.42:1AA

Button colorlabel auto8.42:1 AA

--primary

Your main action colour: filled buttons, active states, and links.

in the preview The filled "Default" button and the "v1.0" badge.

contrast

Label on primary buttons8.42:1AA

Primary button against the page8.42:1AA

Secondary buttonlabel auto14.82:1 AA

--secondary

A quieter fill for lower-priority actions.

in the preview The "Secondary" button and the "stable" badge.

contrast

Label on secondary buttons14.82:1AA

Showing 4 of 19 variables. Button labels are paired for you as you pick. Switch to for the full token list.

Live preview

Ivory

light

live preview

buttons

form

Email address

Message

card

Connection ready

Your project is linked. Deploy whenever you're happy with this theme.

v1.0stablefree tier

badges

DefaultSecondaryOutlineDestructive

alerts

Heads up

Your theme is auto-saved to the URL - share the link to share the theme.

Destructive alert

Use this pattern for errors, warnings, or irreversible actions.

controls

Notifications

Tab content syncs with theme.

loading state

data tableborder · muted · accent

Recent deploys
Commit	Branch	Status	Duration
a3f9c21	main	Ready	42s
7b2e004	main	Ready	38s
c81d5fa	fix/auth	Building	12s
19ee7b3	main	Error	8s

4 of 24 deploys

palette19 variables

background

foreground

primary

secondary

muted

accent

destructive

border

card

popover

ring

input