Charisma Brand

Components

Drawn from the live apps

Twenty widget families, each taken from a real Charisma app and set in the system’s tokens. Every one is shown in both realms; the guide under it names the source file.

Brand

Actions

Button

The one button family: primary, secondary and quiet, at 40px or 56px.

Dark · RPG

Light · Bitcoin

  • Primary (accent fill, on-accent label, shadow-cta) is for the single thing the view is for: Swap, Connect wallet, Create an order. Use at most one per view.
  • Secondary (surface with a line border) is for every other action: View documentation, Execute order now.
  • Quiet (no fill) is for cancel and dismiss actions, next to a primary.
  • Large (56px, cx-btn-lg) is for the CTA that ends a card or a step, usually full width (cx-btn-block). This merges the swap CTA and Zesty's BigButton.
  • States:
  • - Hover lifts to accent-hover or surface-hover; a press scales to 0.98.
  • - Loading keeps the label, adds a 16px spinner and says what's happening ("Confirm in wallet…").
  • - Disabled is at 50% opacity, and stays focusable when you need to explain why.
  • Copy: use a verb, in sentence case, with no trailing punctuation.
  • Don't use gradients (the swap CTA's from-primary to-primary/90 is retired), purple subnet buttons, or white labels on orange.
  • Hand-written from apps/simple-swap/src/components/swap-interface/swap-button.tsx and apps/simple-swap/src/components/zesty/ui.tsx (BigButton).

Chip

Small toggles and presets: amount presets, range toggles, tip amounts, the proof pill and share chips.

Dark · RPG

$6.8M across Charisma pools

Light · Bitcoin

$6.8M across Charisma pools
  • Use it for one-tap choices beside an input or a chart: 25%, 50% and MAX on the swap pane; 7 days and 30 days on a chart; 1, 5 and 10 STX in the tip jar.
  • The selected chip sets aria-pressed="true" and turns accent-soft with accent-text. Square chips (radius-sm) sit beside inputs; round chips (cx-chip-round) sit under charts and in share rows.
  • The proof pill (cx-proof) links a live figure to Analytics: a success dot and one line, for example "$6.8M across Charisma pools".
  • Don't use chips as tabs for whole pages; use the nav.
  • Hand-written from apps/simple-swap/src/components/swap-interface/TokenInputSection.tsx, apps/simple-swap/src/components/zesty/ui.tsx (Chip) and apps/simple-swap/src/app/page.tsx (Proof).

ModeToggle

The segmented switch between Instant swaps and Triggered (Blaze) orders.

Dark · RPG

Instant selected
Triggered selected
Triggered unavailable for this token

Light · Bitcoin

Instant selected
Triggered selected
Triggered unavailable for this token
  • Use it above the swap card, and anywhere one flow has two modes.
  • Dots: Instant is accent, Triggered is blaze. The selected item fills with surface-selected.
  • Disabled: when the token has no subnet, Triggered is disabled and its tooltip says why ("This token has no subnet yet").
  • Use it for two or three options only. Don't hide a mode that changes what gets signed: show both, side by side.
  • Hand-written from apps/simple-swap/src/components/swap-interface/swap-header.tsx.

WalletButton

The wallet entry point: Connect wallet, then Connecting…, then the short address.

Dark · RPG

Light · Bitcoin

  • Disconnected: a primary button labelled "Connect wallet", in sentence case (today's "Connect Wallet" changes).
  • Connecting: the same button with a spinner and "Connecting…".
  • Connected: a secondary button showing the address in mono (SP2ZN…55KS) with a success dot. On chrome, it's an outline on on-chrome-muted. Clicking it opens the account menu.
  • Width: at least 140px, so the header doesn't jump between states.
  • Hand-written from apps/simple-swap/src/components/wallet-button.tsx.

Swap

RouteDetails

The quote breakdown under a swap: the route path, price impact, guarantees and fees.

Dark · RPG

2 hops
Price impact0.12%
Minimum guaranteed0.003630 sBTC
Price protection1.0%
Network fee≤ 0.01 STX
Analyzing optimal route...

Light · Bitcoin

2 hops
Price impact0.12%
Minimum guaranteed0.003630 sBTC
Price protection1.0%
Network fee≤ 0.01 STX
Analyzing optimal route...
  • You provide: the path tokens, the hop count, price impact, the minimum received, price protection and the network fee.
  • Path: 20px logos joined by chevrons, with "N hops" on the right.
  • Price impact: a pill that is success under 1%, warning up to 5% and danger above. A high impact also adds a danger note above the CTA.
  • Minimum guaranteed is in success. Figures are in mono.
  • Loading: a spinner and "Analyzing optimal route...".
  • Price protection is fixed at 1.0% today; there is no editable slippage control.
  • Hand-written from apps/simple-swap/src/components/swap-interface/swap-details.tsx and swap-information-sidebar.tsx.

SwapCard

The exchange itself: a send pane, the reverse button, a receive pane and one CTA, inside a card.

Dark · RPG

You sendBalance 2,450.00
≈ $412.80
You receiveSubnet
≈ $411.952 hops

Light · Bitcoin

You sendBalance 2,450.00
≈ $412.80
You receiveSubnet
≈ $411.952 hops
  • Use it on the swap page, and wherever a flow trades one token for another (DCA, Range, In & Out).
  • You provide:
  • - Both tokens.
  • - The amount, with its USD hint.
  • - The balance.
  • - The quote: output, hops and subnet state.
  • - The CTA label.
  • Panes use surface-sunken inside the card's surface. The amount input is num-xl in mono, with a placeholder in ink-faint. The token trigger is a pill; the 25%, 50% and MAX chips sit under the amount.
  • Reverse: a 40px round button on surface-raised, overlapping both panes.
  • Blaze: when the output stays on the subnet, the receive pane shows a blaze "Subnet" pill and the token logo gets the flame.
  • CTA: large and full width; primary only when the swap can run. Otherwise it says what's missing ("Enter an amount", "Insufficient STX").
  • Don't add a second accent button, or decorative gradients behind the panes.
  • Hand-written from apps/simple-swap/src/components/swap-interface/swap-interface-content.tsx, TokenInputSection.tsx, TokenOutputSection.tsx, reverse-tokens-button.tsx and swap-button.tsx.

TokenPicker

The token selection sheet: a title, a search field, and balance-sorted rows.

Dark · RPG

Light · Bitcoin

  • Use it everywhere a token is chosen (14 places in simple-swap). It's full screen on mobile, and a centered surface-raised sheet over overlay on desktop.
  • You provide: the token list with name, symbol, logo, balance, USD value and subnet flag; and the selected token.
  • Search is 48px with a radius-lg field, the placeholder "Search by name, symbol, or address...", and a ⌘K hint.
  • Rows: the logo, symbol and name on the left; the balance in mono and the USD value on the right. The selected row (aria-selected) uses surface-selected with an accent-line border; this replaces the blue→purple glow. Subnet tokens get the flame and a blaze pill.
  • Empty: "No tokens found", with a hint to paste a contract address.
  • Hand-written from apps/simple-swap/src/components/TokenDropdown.tsx.

Orders

StatusPill

One- or two-word state labels, uppercase mono, with a dot.

Dark · RPG

OpenConfirmedBroadcastedCancelledPausedSubnetLive

Light · Bitcoin

OpenConfirmedBroadcastedCancelledPausedSubnetLive
  • Use the pill's word as the status itself; never rely on its colour alone.
  • Don't invent per-app colours (lottery blue, roulette green).
  • Hand-written from apps/simple-swap/src/components/orders/orders-panel.tsx (PremiumStatusBadge) and apps/simple-swap/src/components/zesty/screens/Trades.tsx.

StrategyCard

An order or strategy on the Orders page: limit, DCA, range or social trigger.

Dark · RPG

Limit orderSTX → sBTC · 2h ago
Open
Amount1,000 STX
Trigger≤ 0.0000036
Now0.0000037
DCA · 4 of 10CHA → STX · just now
Confirmed
BroadcastedCancelledSubnet

Light · Bitcoin

Limit orderSTX → sBTC · 2h ago
Open
Amount1,000 STX
Trigger≤ 0.0000036
Now0.0000037
DCA · 4 of 10CHA → STX · just now
Confirmed
BroadcastedCancelledSubnet
  • You provide:
  • - The pair.
  • - The type and age.
  • - The status pill.
  • - Progress toward the trigger, or fills done.
  • - Amount, trigger and current price.
  • - Actions for open single orders.
  • Card: surface with a line border. On hover, surface-hover with line-strong.
  • Recently updated: a success border and soft ring for a few seconds after a change. This replaces the emerald ring and ping dot.
  • Progress: a 6px bar in accent.
  • Actions: "Execute order now" (secondary) and "Cancel order" (quiet), on open orders only.
  • Status: use StatusPill.
  • Hand-written from apps/simple-swap/src/components/orders/strategy-cards/base/BaseStrategyCard.tsx and the types/ cards.

Data

RankedTable

Top-N tables: top tokens, top traders, leaderboards.

Dark · RPG

#TokenVolumeTrades
1sBTC$43.4K1,660
2FAFAKFUN$36.9K467
3STX$33.3K11,499
4CHA$18.8K5,602
5WELSH$10.8K1,176

Light · Bitcoin

#TokenVolumeTrades
1sBTC$43.4K1,660
2FAFAKFUN$36.9K467
3STX$33.3K11,499
4CHA$18.8K5,602
5WELSH$10.8K1,176
  • You provide: the ranked rows (rank, entity, then two or three figures).
  • Headers use label. Numeric columns are right-aligned mono. Rows are divided by line-soft.
  • Rank 1 is set in gold, the one place finance UI uses the RPG reward colour.
  • Entities: a token logo plus its symbol, or a BNS name over the short address.
  • Mobile: collapse to rank, entity and one figure.
  • Hand-written from apps/simple-swap/src/components/analytics/AnalyticsPage.tsx. The figures are real top-token volumes from Analytics.

StatTile

A single figure with its label and a note, as on Analytics.

Dark · RPG

Trades22,711Since Dec 2024
Traders353Unique wallets
Liquidity (TVL)$6.8MIn Charisma pools now
Weekly volume

Light · Bitcoin

Trades22,711Since Dec 2024
Traders353Unique wallets
Liquidity (TVL)$6.8MIn Charisma pools now
Weekly volume
  • You provide: the label (in label style), the value, and a one-line note saying where it comes from ("Since Dec 2024", "In Charisma pools now").
  • Value: num-xl in mono, tabular. Abbreviate above 10K ("$6.8M").
  • Layout: tiles fill the row in equal widths, with three or four per row.
  • Bar chart: the CSS-only weekly volume bars in accent are allowed as a tile's body.
  • Use real figures only; a tile with an invented number is a bug.
  • Hand-written from apps/simple-swap/src/components/analytics/AnalyticsPage.tsx. Figures are as published on swap.charisma.rocks on 2026-10-01.

Feedback

Dialog

A modal decision on surface-raised, over overlay.

Dark · RPG

Light · Bitcoin

  • Use it for decisions that block the flow: balance checks, purchases, bids, DCA setup.
  • You provide: a title that states the situation, one or two sentences of body text, and one to three actions.
  • Actions: the primary on the right, a quiet Cancel on its left.
  • Style: radius-lg, space-6 padding, shadow-overlay. On mobile, a bottom sheet (vaul).
  • Don't use a dialog for information a toast or inline note could carry.
  • Hand-written from apps/simple-swap/src/components/ui/dialog.tsx and balance-check-dialog.tsx.

EmptyState

What a list shows before it has items, and how it looks while loading.

Dark · RPG

No orders yetOrders you create on the swap page show up here and run on their own.

Light · Bitcoin

No orders yetOrders you create on the swap page show up here and run on their own.
  • Empty: a 56px icon tile, a one-line title ("No orders yet"), one sentence on what will appear and why, and one primary action to make the first item.
  • Loading: pulse skeletons in surface-hover, shaped like the real content.
  • Never show an empty table header with no rows.
  • Hand-written from the orders panel empty state and apps/simple-swap/src/components/tokens/token-table-skeleton.tsx.

Toast

Short-lived confirmations and errors, bottom right, via sonner.

Dark · RPG

Swap transaction submitted1,000 STX → 0.003667 sBTCView on Hiro Explorer
Creating order…Sign the message in your wallet.

Light · Bitcoin

Swap transaction submitted1,000 STX → 0.003667 sBTCView on Hiro Explorer
Creating order…Sign the message in your wallet.
  • Success: what happened, in past tense ("Swap transaction submitted"), the amounts, and a link to "View on Hiro Explorer" or "View orders".
  • Error: what failed, whether funds moved, and what to do next.
  • Loading: the step in progress ("Creating order…") and what the user must do.
  • Style: surface-raised with shadow-overlay, and a 28px tinted icon disc (success-soft or danger-soft).
  • Don't stack more than three; never toast something the page already shows.
  • Hand-written from apps/simple-swap/src/components/ui/sonner.tsx and the custom toasts in swap-interface-content.tsx.

Flows

ChoiceCard

A big, single-choice card: Zesty's up or down side picker.

Dark · RPG

Light · Bitcoin

  • You provide: an icon, a short title, and one sentence on what Charisma will do for you.
  • Title: uppercase, Zesty's voice. The icon disc is accent for the main choice and ink for the alternative.
  • Selected: aria-pressed="true" and a 2px line-strong border (black in light, as on Zesty).
  • Use it for two to four options that decide the whole flow; for anything smaller, use chips.
  • Hand-written from apps/simple-swap/src/components/zesty/screens/PickSide.tsx.

Steps

Progress through a multi-step flow: Zesty's segmented bar, and Launchpad's numbered stepper.

Dark · RPG

Step 1 of 4
Configure2Liquidity3Review4Deploy

Light · Bitcoin

Step 1 of 4
Configure2Liquidity3Review4Deploy
  • Segmented bar: one 4px segment per step, done segments in accent, with "Step 1 of 4" in label underneath. Use it on mobile and in wizards.
  • Numbered stepper:
  • - A 28px circle per step.
  • - A done step fills with accent and a check.
  • - The current step has an accent ring.
  • - Upcoming steps sit on line.
  • - Use it for deploy flows.
  • Keep step names to one word.
  • Hand-written from apps/simple-swap/src/components/zesty/ui.tsx (Progress) and apps/launchpad/src/app/templates/liquidity-pool/page.tsx (ContractStepper).

Surfaces

Card

The base surfaces: a card, and a pane nested inside it.

Dark · RPG

Card · surface

Best price, every swap

Every swap checks every pool and route, then takes the best one.

Card with a pane
surface-sunken inside surface

Light · Bitcoin

Card · surface

Best price, every swap

Every swap checks every pool and route, then takes the best one.

Card with a pane
surface-sunken inside surface
  • Card: surface, line border, radius-lg, space-5 padding, and in dark, shadow-card and an 8px backdrop blur. Use it for any self-contained group: a feature, a tile, a form.
  • Pane: surface-sunken with a line-soft border, inside a card. Use it for grouped inputs (the swap panes).
  • Raised: surface-raised with shadow-overlay, for anything floating above the page.
  • Don't put cards inside cards; use a pane instead. Never add a coloured left border.
  • Hand-written from simple-swap's glass pair bg-white/[0.03] border-white/[0.08] (87 uses) and Zesty's Card.