Colors

Pho's palette is monochrome, straight from photon.codes: black and white surfaces with an alpha-stepped text hierarchy. "Brand" is not a hue — it is the high-contrast action fill (black in light mode, white in dark). Color appears only as functional states and a categorical accent set. Every semantic token resolves light/dark via CSS light-dark(). Click any swatch to copy.

Accents

Categorical only — code syntax highlighting, charts, avatars. Never for interactive states. Click to copy the CSS variable.

Categorical set

Functional anchor

Semantic tokens

Theme-aware — toggle the theme (sidebar) to watch them shift.bg-pho-brand-solid is the monochrome contrast fill (black in light mode, white in dark); anything on it usestext-pho-on-brand / bg-pho-on-brand, nevertext-white. Click to copy the utility class.

Background

Text & icons

One ink ladder for copy and icons (no separate text-fg-pho-*ramp):

• text-pho-primary (100%) — headings, emphasis, highlighted UI
• text-pho-secondary (75%) — default UI chrome: menus, short labels, icons, nav, kbd
• text-pho-description (55%) — supporting prose: Dialog / Field descriptions, empty states, captions (last step clearing AA on white)

text-pho-placeholder and text-pho-disabled are functional states, not hierarchy. Brand / error / success / warning stay on their own axes.

Border

Hover pairs, rings, and focus

Interactive tokens ship with a matching hover step —text-pho-secondary-hover,text-pho-description-hover,text-pho-brand-hover, text-pho-error-hover,bg-pho-primary-hover,bg-pho-brand-solid-hover, bg-pho-error-solid-hover, andbg-pho-success-solid-hover. The ring-pho-*set mirrors border-pho-* for ring-based hairlines, and focus outlines use outline-pho-brand (monochrome 40%) oroutline-pho-error.