Design system

Every component variant, rendered in light and dark at the same time. Copy the exact classes from here - do not paraphrase them, and never reach for a raw Tailwind palette colour.

canonical

Temporary palette

The token values are placeholders (neutral slate + teal) so the apps are legible before the visual direction is chosen. They are regenerated by scripts/design/gen-tokens.ts from design/tokens.json once a proposal is approved. The token names, the component APIs and this page’s structure are the stable part.

Lightdata-theme="light"

Semantic tokens

Every colour in the app comes from one of these. Raw Tailwind palette classes do not exist here.

bg-secondary

bg-tertiary

surface

surface-alt

border

border-strong

on-*

primary

on-*

accent

on-*

success

on-*

warning

on-*

error

on-*

info

focus

text tiers

text - primary reading colour

text-secondary - supporting copy

text-tertiary - hints, timestamps, disabled

Family accents

The four type families. Each has a paired on-accent colour for text drawn on top of it.

solid

NFIdealistNTRationalSPExplorerSJGuardian

soft

NFIdealistNTRationalSPExplorerSJGuardian

NFIdealist

NTRational

SPExplorer

SJGuardian

Button

primary

secondary

ghost

danger

icon only

Form controls

Display name

Shown on the public profile.

Username

That username is already taken.

Legacy id

Read-only, set at migration.

Publication status

Publishing refuses anything that is not approved in all 9 locales.

Section body

Markdown. Rendered with PvMarkdown in the app.

Checkbox

Send a push notificationGoes to every device registered for the segment.

Also post to the in-app inbox

Disabled option

Disabled and checked

Radio

Everyone

Premium onlyReads entitlements/{uid}.premium.

Disabled option

Toggle

AI coach enabled

Ads enabledFree tier only. Kill switch in appConfig/features.

Locked by a kill switch

Badge

soft

neutralprimaryaccentsuccesswarningerrorinfo

solid

neutralprimaryaccentsuccesswarningerrorinfo

with a leading dot

PublishedDraftFailed

Card

Content version

Currently published to production.

live

Version: 2026.08.24-1
Locales: 9 / 9 approved

Bare card

12,480

Results computed in the last 30 days

Alert

Info

A one-line explanation of what happened and what to do next.

Success

A one-line explanation of what happened and what to do next.

Warning

A one-line explanation of what happened and what to do next.

Error

A one-line explanation of what happened and what to do next.

With actions

3 locales are still in review; publishing is blocked until all 9 are approved.

Modal & dropdown

Shown both as a live trigger and as a static preview, so the panel is visible in a screenshot.

live

static preview

Delete account

This runs the deleteAccount callable and is irreversible.

The user, their results, their friendships and their coach threads are removed. An entry is written to adminAudit.

View profile

Override entitlement

Delete account

Spinner & skeleton

spinner

skeleton

Table

Recent results
User	Type	Locale	Status	Score
ada@example.com	NFINFJ	en	complete	86
grace@example.com	NTENTJ	it	partial	41
linus@example.com	SPISTP	de	abandoned	12
hedy@example.com	SJESFJ	ja	complete	93

Tabs

The source locale. Everything else is adapted from it.

Pagination

Empty state

No feedback yet

Feedback submitted from the app lands here, newest first, with the reporter's locale and app version.

Darkdata-theme="dark"

Semantic tokens

Every colour in the app comes from one of these. Raw Tailwind palette classes do not exist here.

bg-secondary

bg-tertiary

surface

surface-alt

border

border-strong

on-*

primary

on-*

accent

on-*

success

on-*

warning

on-*

error

on-*

info

focus

text tiers

text - primary reading colour

text-secondary - supporting copy

text-tertiary - hints, timestamps, disabled

Family accents

The four type families. Each has a paired on-accent colour for text drawn on top of it.

solid

NFIdealistNTRationalSPExplorerSJGuardian

soft

NFIdealistNTRationalSPExplorerSJGuardian

NFIdealist

NTRational

SPExplorer

SJGuardian

Button

primary

secondary

ghost

danger

icon only

Form controls

Display name

Shown on the public profile.

Username

That username is already taken.

Legacy id

Read-only, set at migration.

Publication status

Publishing refuses anything that is not approved in all 9 locales.

Section body

Markdown. Rendered with PvMarkdown in the app.

Checkbox

Send a push notificationGoes to every device registered for the segment.

Also post to the in-app inbox

Disabled option

Disabled and checked

Radio

Everyone

Premium onlyReads entitlements/{uid}.premium.

Disabled option

Toggle

AI coach enabled

Ads enabledFree tier only. Kill switch in appConfig/features.

Locked by a kill switch

Badge

soft

neutralprimaryaccentsuccesswarningerrorinfo

solid

neutralprimaryaccentsuccesswarningerrorinfo

with a leading dot

PublishedDraftFailed

Card

Content version

Currently published to production.

live

Version: 2026.08.24-1
Locales: 9 / 9 approved

Bare card

12,480

Results computed in the last 30 days

Alert

Info

A one-line explanation of what happened and what to do next.

Success

A one-line explanation of what happened and what to do next.

Warning

A one-line explanation of what happened and what to do next.

Error

A one-line explanation of what happened and what to do next.

With actions

3 locales are still in review; publishing is blocked until all 9 are approved.

Modal & dropdown

Shown both as a live trigger and as a static preview, so the panel is visible in a screenshot.

live

static preview

Delete account

This runs the deleteAccount callable and is irreversible.

The user, their results, their friendships and their coach threads are removed. An entry is written to adminAudit.

View profile

Override entitlement

Delete account

Spinner & skeleton

spinner

skeleton

Table

Recent results
User	Type	Locale	Status	Score
ada@example.com	NFINFJ	en	complete	86
grace@example.com	NTENTJ	it	partial	41
linus@example.com	SPISTP	de	abandoned	12
hedy@example.com	SJESFJ	ja	complete	93

Tabs

The source locale. Everything else is adapted from it.

Pagination

Empty state

No feedback yet

Feedback submitted from the app lands here, newest first, with the reporter's locale and app version.