Color

Crimson by night, orange by day

Every colour is a semantic token with a Dark · RPG value and a Light · Bitcoin value. Use the token, never the hex, and the realm switch comes free.

Crest

The mark’s crimson. Identical in both realms, and never used for UI state.

Token	Dark · RPG	Light · Bitcoin	Use
`brand`	#c1121f	#c1121f	The Charisma crimson of the mark (charisma.rocks --brand). Same in both themes. Brand moments only: the logo disc, the cover, OG art. Never a button or a state.

Grounds and layers

Dark stacks translucent glass; light stacks white paper on hairlines.

Token	Dark · RPG	Light · Bitcoin	Use
`bg`	#0b0606	#f7f7f7	Page background. Dark: red-tinted black, between charisma.rocks's black body and its #170202 background. Light: Zesty's #F7F7F7.
`bg-glow`	#c1121f33	#f7f7f700	Radial hero glow behind the mark or a hero object (charisma.rocks hero). Dark only; the light value is fully transparent on purpose, because the Bitcoin theme has no glows.
`texture`	#ffffff0f	#ffffff00	Lines of the 32px grid texture behind heroes (charisma.rocks). Dark only; the light value is fully transparent on purpose.
`edge`	#0b060600	#fc6432	The 12px edge bar under a hero and along the bottom of OG images (Zesty). Light only; the dark value is fully transparent on purpose.
`surface-sunken`	#ffffff05	#f7f7f7	Panes nested inside a card: the swap card's pay and receive panes, inputs inside a dialog. Dark is simple-swap's bg-white/[0.02].
`surface`	#ffffff08	#ffffff	Cards, tiles, list rows and the header's icon tiles. Dark is simple-swap's bg-white/[0.03] (its most used fill); light is Zesty's white card.
`surface-hover`	#ffffff14	#f0f0f0	Hover fill for cards, rows and quiet buttons (simple-swap hover:bg-white/[0.08]).
`surface-selected`	#ffffff1f	#fff4ef	Selected row or chip, e.g. the chosen token in the token picker. Dark is bg-white/[0.12]; light is an alias of accent-soft.
`surface-raised`	#160d0e	#ffffff	Opaque layers above the page: dialogs, menus, toasts, the token picker sheet. Opaque so text stays legible over the overlay.
`overlay`	#000000cc	#00000066	Scrim behind dialogs and the token picker. Dark is simple-swap's bg-black/80 with backdrop-blur-xl; light is a lighter scrim.

Lines

Token	Dark · RPG	Light · Bitcoin	Use
`line-soft`	#ffffff0f	#eeeeee	Inner dividers and the swap card's nested panes (border-white/[0.06]).
`line`	#ffffff14	#e5e5e5	Default borders and hairlines on cards, panes and inputs. Dark is border-white/[0.08]; light is Zesty's #E5E5E5.
`line-strong`	#ffffff40	#000000	Hover and selected borders. Light is Zesty's 2px black border on a chosen side card. Dark is border-white/[0.25] and only 2.1:1 on bg, so never make it the only cue for a control.

Ink

Every ink holds 4.5:1 or more on bg and every surface, except ink-faint (disabled only).

Token	Dark · RPG	Light · Bitcoin	Use
`ink`	#f3eded 17.4:1 on bg	#141414 17.2:1 on bg	Headings, amounts and primary text, on bg, any surface and surface-raised (dark ≥16.5:1, light ≥17:1).
`ink-body`	#c9bebf 11.1:1 on bg	#3d3d3d 10.1:1 on bg	Body copy and secondary labels, on bg and every surface (dark ≥10.5:1, light ≥10:1). Light is Zesty's #3D3D3D.
`ink-muted`	#968a8b 6.0:1 on bg	#5c5c5c 6.2:1 on bg	Metadata, captions, placeholders, USD hints under amounts, on bg and every surface (dark ≥5.7:1, light ≥6.2:1). Light is Zesty's #5C5C5C.
`ink-faint`	#6e6465 3.5:1 on bg	#8f8f8f 3.0:1 on bg	Disabled labels and decorative separators only, at 3–3.5:1. Never use it for text people need to read.

Action

Crimson by night, Stacks orange by day. One accent fill per view.

Token	Dark · RPG	Light · Bitcoin	Use
`accent`	#c1121f	#ec3d03	The primary action fill: the swap CTA, Connect wallet, the active step. Dark is charisma.rocks crimson; light is a deeper Stacks orange (#EC3D03) so white labels read at 4.0:1, while #FC6432 itself stays on chrome (chrome-accent) and the edge bar. One accent fill per view. 3.7:1 against the light paper.
`accent-hover`	#d6202d	#da3803	Hover fill for accent buttons: a step deeper, so the white label stays legible.
`on-accent`	#ffffff	#ffffff	Text and icons on an accent fill: white in both realms (6.2:1 on crimson, 4.0:1 on the light orange).
`accent-text`	#ff4d6d 6.3:1 on bg	#b8410f 5.2:1 on bg	The accent as text: links, the app name in a lockup, 'Share on X', selected tab labels. Works on bg, every surface and accent-soft (dark ≥5.8:1, light ≥5.1:1). Dark is charisma.rocks --brand-light; light is Zesty's --z-orange-text.
`accent-soft`	#c1121f26	#fff4ef	Tinted fill behind accent-text: the active chip, an info callout, the selected token row in light. Light is Zesty's peach #FFF4EF.
`accent-line`	#c1121f66	#ffd9c9	Border of an accent-soft element. Light is Zesty's #FFD9C9.

Chrome

Header and footer bars stay near-black in both realms.

Token	Dark · RPG	Light · Bitcoin	Use
`chrome`	#070404	#000000	The header and footer bars. They stay dark in both themes: the light theme's black bar is the Bitcoin/Stacks signature (Zesty header).
`on-chrome`	#f3eded 17.4:1 on bg	#ffffff 1.1:1 on bg	Text and the wordmark on chrome (≥17:1).
`on-chrome-muted`	#a89c9d 7.6:1 on bg	#b3b3b3 2.0:1 on bg	Nav links and secondary text on chrome (≥7.6:1).
`chrome-accent`	#ff4d6d 6.3:1 on bg	#fc6432 2.8:1 on bg	The app name in the header lockup and the active nav link, on chrome (≥6.3:1).

Blaze

The instant subnet, and Blaze Wallet. Teal everywhere.

Token	Dark · RPG	Light · Bitcoin	Use
`blaze`	#2dd4bf 10.8:1 on bg	#0f766e 5.1:1 on bg	Blaze, the instant subnet: the subnet pill, the Blaze flame on a token logo, the Triggered mode dot, Blaze Wallet. Replaces simple-swap's purple subnet colour so Blaze reads as one brand with the Blaze Wallet's teal. On bg and every surface (dark ≥10:1, light ≥5.1:1).
`blaze-soft`	#2dd4bf1f 1.2:1 on bg	#e6f6f4 1.0:1 on bg	Fill behind blaze text in a subnet pill (blaze on it: dark 9.2:1, light 4.9:1).

Status and reward

Status always carries a word or icon. Gold is for games only.

Token	Dark · RPG	Light · Bitcoin	Use
`success`	#4ade80 11.6:1 on bg	#1b7a3a 5.0:1 on bg	Filled orders, price up, 'Minimum guaranteed', positive change. Always paired with a word or icon. Light is Zesty's green #1B7A3A.
`success-soft`	#22c55e26 1.2:1 on bg	#e8f5ec 1.0:1 on bg	Fill behind success text, and the 'recently updated' ring on an order card.
`danger`	#f87171 7.3:1 on bg	#b42318 6.1:1 on bg	Errors, failed transactions, price down, high price impact. Always paired with a word or icon. Light is a true red so errors never read as the orange accent; Zesty's #8F310A is retired.
`danger-soft`	#ef444426 1.1:1 on bg	#fdecea 1.1:1 on bg	Fill behind danger text in an error note or toast.
`warning`	#fbbf24 12.1:1 on bg	#8a5a00 5.5:1 on bg	Paused bots, medium price impact, 'check your balance'. Paired with a word or icon.
`warning-soft`	#f59e0b26 1.2:1 on bg	#fdf3e1 1.0:1 on bg	Fill behind warning text.
`gold`	#e8b04b 10.3:1 on bg	#946200 4.9:1 on bg	Game rewards: lottery winning balls, leaderboard rank 1, jackpots, the health bar's full end. An RPG flourish, so never use it for a financial state (light is 4.9:1 on bg).
`focus`	#ff4d6d 6.3:1 on bg	#b8410f 5.2:1 on bg	Keyboard focus ring: a solid 2px ring with a 2px offset in bg colour, at ≥5.1:1 on every surface. Light was Zesty's orange, darkened because #FC6432 is 2.8:1.