{
 "name": "Charisma",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "dark",
    "name": "Dark · RPG"
   },
   {
    "id": "light",
    "name": "Light · Bitcoin"
   }
  ],
  "tokens": [
   {
    "name": "brand",
    "value": {
     "dark": "#c1121f",
     "light": "#c1121f"
    },
    "usage": "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."
   },
   {
    "name": "bg",
    "value": {
     "dark": "#0b0606",
     "light": "#f7f7f7"
    },
    "usage": "Page background. Dark: red-tinted black, between charisma.rocks's black body and its #170202 background. Light: Zesty's #F7F7F7."
   },
   {
    "name": "bg-glow",
    "value": {
     "dark": "#c1121f33",
     "light": "#f7f7f700"
    },
    "usage": "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."
   },
   {
    "name": "texture",
    "value": {
     "dark": "#ffffff0f",
     "light": "#ffffff00"
    },
    "usage": "Lines of the 32px grid texture behind heroes (charisma.rocks). Dark only; the light value is fully transparent on purpose."
   },
   {
    "name": "edge",
    "value": {
     "dark": "#0b060600",
     "light": "#fc6432"
    },
    "usage": "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."
   },
   {
    "name": "surface-sunken",
    "value": {
     "dark": "#ffffff05",
     "light": "#f7f7f7"
    },
    "usage": "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]."
   },
   {
    "name": "surface",
    "value": {
     "dark": "#ffffff08",
     "light": "#ffffff"
    },
    "usage": "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."
   },
   {
    "name": "surface-hover",
    "value": {
     "dark": "#ffffff14",
     "light": "#f0f0f0"
    },
    "usage": "Hover fill for cards, rows and quiet buttons (simple-swap hover:bg-white/[0.08])."
   },
   {
    "name": "surface-selected",
    "value": {
     "dark": "#ffffff1f",
     "light": "{accent-soft}"
    },
    "usage": "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."
   },
   {
    "name": "surface-raised",
    "value": {
     "dark": "#160d0e",
     "light": "#ffffff"
    },
    "usage": "Opaque layers above the page: dialogs, menus, toasts, the token picker sheet. Opaque so text stays legible over the overlay."
   },
   {
    "name": "overlay",
    "value": {
     "dark": "#000000cc",
     "light": "#00000066"
    },
    "usage": "Scrim behind dialogs and the token picker. Dark is simple-swap's bg-black/80 with backdrop-blur-xl; light is a lighter scrim."
   },
   {
    "name": "line",
    "value": {
     "dark": "#ffffff14",
     "light": "#e5e5e5"
    },
    "usage": "Default borders and hairlines on cards, panes and inputs. Dark is border-white/[0.08]; light is Zesty's #E5E5E5."
   },
   {
    "name": "line-soft",
    "value": {
     "dark": "#ffffff0f",
     "light": "#eeeeee"
    },
    "usage": "Inner dividers and the swap card's nested panes (border-white/[0.06])."
   },
   {
    "name": "line-strong",
    "value": {
     "dark": "#ffffff40",
     "light": "#000000"
    },
    "usage": "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."
   },
   {
    "name": "ink",
    "value": {
     "dark": "#f3eded",
     "light": "#141414"
    },
    "usage": "Headings, amounts and primary text, on bg, any surface and surface-raised (dark ≥16.5:1, light ≥17:1)."
   },
   {
    "name": "ink-body",
    "value": {
     "dark": "#c9bebf",
     "light": "#3d3d3d"
    },
    "usage": "Body copy and secondary labels, on bg and every surface (dark ≥10.5:1, light ≥10:1). Light is Zesty's #3D3D3D."
   },
   {
    "name": "ink-muted",
    "value": {
     "dark": "#968a8b",
     "light": "#5c5c5c"
    },
    "usage": "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."
   },
   {
    "name": "ink-faint",
    "value": {
     "dark": "#6e6465",
     "light": "#8f8f8f"
    },
    "usage": "Disabled labels and decorative separators only, at 3–3.5:1. Never use it for text people need to read."
   },
   {
    "name": "accent",
    "value": {
     "dark": "#c1121f",
     "light": "#ec3d03"
    },
    "usage": "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."
   },
   {
    "name": "accent-hover",
    "value": {
     "dark": "#d6202d",
     "light": "#da3803"
    },
    "usage": "Hover fill for accent buttons: a step deeper, so the white label stays legible."
   },
   {
    "name": "on-accent",
    "value": {
     "dark": "#ffffff",
     "light": "#ffffff"
    },
    "usage": "Text and icons on an accent fill: white in both realms (6.2:1 on crimson, 4.0:1 on the light orange)."
   },
   {
    "name": "accent-text",
    "value": {
     "dark": "#ff4d6d",
     "light": "#b8410f"
    },
    "usage": "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."
   },
   {
    "name": "accent-soft",
    "value": {
     "dark": "#c1121f26",
     "light": "#fff4ef"
    },
    "usage": "Tinted fill behind accent-text: the active chip, an info callout, the selected token row in light. Light is Zesty's peach #FFF4EF."
   },
   {
    "name": "accent-line",
    "value": {
     "dark": "#c1121f66",
     "light": "#ffd9c9"
    },
    "usage": "Border of an accent-soft element. Light is Zesty's #FFD9C9."
   },
   {
    "name": "chrome",
    "value": {
     "dark": "#070404",
     "light": "#000000"
    },
    "usage": "The header and footer bars. They stay dark in both themes: the light theme's black bar is the Bitcoin/Stacks signature (Zesty header)."
   },
   {
    "name": "on-chrome",
    "value": {
     "dark": "#f3eded",
     "light": "#ffffff"
    },
    "usage": "Text and the wordmark on chrome (≥17:1)."
   },
   {
    "name": "on-chrome-muted",
    "value": {
     "dark": "#a89c9d",
     "light": "#b3b3b3"
    },
    "usage": "Nav links and secondary text on chrome (≥7.6:1)."
   },
   {
    "name": "chrome-accent",
    "value": {
     "dark": "#ff4d6d",
     "light": "#fc6432"
    },
    "usage": "The app name in the header lockup and the active nav link, on chrome (≥6.3:1)."
   },
   {
    "name": "blaze",
    "value": {
     "dark": "#2dd4bf",
     "light": "#0f766e"
    },
    "usage": "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)."
   },
   {
    "name": "blaze-soft",
    "value": {
     "dark": "#2dd4bf1f",
     "light": "#e6f6f4"
    },
    "usage": "Fill behind blaze text in a subnet pill (blaze on it: dark 9.2:1, light 4.9:1)."
   },
   {
    "name": "blaze-v2",
    "value": {
     "dark": "#f87171",
     "light": "#b91c1c"
    },
    "usage": "Blaze v2 subnets: red where Blaze v1 is teal (blaze). The flame on a v2 subnet token, v2 subnet text and marks. On bg and every surface (dark ≥7:1, light ≥6:1)."
   },
   {
    "name": "blaze-v2-soft",
    "value": {
     "dark": "#f871711f",
     "light": "#fdecea"
    },
    "usage": "Fill behind blaze-v2 text."
   },
   {
    "name": "success",
    "value": {
     "dark": "#4ade80",
     "light": "#1b7a3a"
    },
    "usage": "Filled orders, price up, 'Minimum guaranteed', positive change. Always paired with a word or icon. Light is Zesty's green #1B7A3A."
   },
   {
    "name": "success-soft",
    "value": {
     "dark": "#22c55e26",
     "light": "#e8f5ec"
    },
    "usage": "Fill behind success text, and the 'recently updated' ring on an order card."
   },
   {
    "name": "danger",
    "value": {
     "dark": "#f87171",
     "light": "#b42318"
    },
    "usage": "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."
   },
   {
    "name": "danger-soft",
    "value": {
     "dark": "#ef444426",
     "light": "#fdecea"
    },
    "usage": "Fill behind danger text in an error note or toast."
   },
   {
    "name": "warning",
    "value": {
     "dark": "#fbbf24",
     "light": "#8a5a00"
    },
    "usage": "Paused bots, medium price impact, 'check your balance'. Paired with a word or icon."
   },
   {
    "name": "warning-soft",
    "value": {
     "dark": "#f59e0b26",
     "light": "#fdf3e1"
    },
    "usage": "Fill behind warning text."
   },
   {
    "name": "blaze-fill",
    "value": {
     "dark": "#0f766e",
     "light": "#0f766e"
    },
    "usage": "Solid Blaze fills that carry text or an icon: the subnet swap button, the flame badge on a token. White (on-fill) on it is 5.5:1. Use blaze for teal text and marks."
   },
   {
    "name": "blaze-v2-fill",
    "value": {
     "dark": "#dc2626",
     "light": "#b91c1c"
    },
    "usage": "Solid Blaze v2 fills that carry an icon: the flame badge on a v2 subnet token. White (on-fill) on it is ≥4.8:1."
   },
   {
    "name": "success-fill",
    "value": {
     "dark": "#15803d",
     "light": "#15803d"
    },
    "usage": "Solid success fills that carry text or an icon (a filled check, an Execute button). White on it is 5.0:1."
   },
   {
    "name": "danger-fill",
    "value": {
     "dark": "#dc2626",
     "light": "#b42318"
    },
    "usage": "Solid danger fills that carry text or an icon (Withdraw, Cancel all). White on it is 4.8:1 dark, 6.6:1 light."
   },
   {
    "name": "on-fill",
    "value": {
     "dark": "#ffffff",
     "light": "#ffffff"
    },
    "usage": "Text and icons on blaze-fill, success-fill and danger-fill: always white."
   },
   {
    "name": "gold",
    "value": {
     "dark": "#e8b04b",
     "light": "#946200"
    },
    "usage": "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)."
   },
   {
    "name": "focus",
    "value": {
     "dark": "#ff4d6d",
     "light": "#b8410f"
    },
    "usage": "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."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Ysabeau Infant",
    "file": "fonts/YsabeauInfant.ttf",
    "weight": "1 1000",
    "style": "normal"
   },
   {
    "family": "Ysabeau Infant",
    "file": "fonts/YsabeauInfant-Italic.ttf",
    "weight": "1 1000",
    "style": "italic"
   },
   {
    "family": "DM Mono",
    "file": "fonts/DMMono-Regular.ttf",
    "weight": "400",
    "style": "normal"
   },
   {
    "family": "DM Mono",
    "file": "fonts/DMMono-Medium.ttf",
    "weight": "500",
    "style": "normal"
   },
   {
    "family": "Matter",
    "file": "fonts/Matter-Regular.woff2",
    "weight": "400",
    "style": "normal"
   },
   {
    "family": "Matter",
    "file": "fonts/Matter-Medium.woff2",
    "weight": "500",
    "style": "normal"
   }
  ],
  "families": {
   "sans": {
    "dark": "\"Ysabeau Infant\", ui-sans-serif, system-ui, sans-serif",
    "light": "\"Matter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
   },
   "mono": "\"DM Mono\", ui-monospace, SFMono-Regular, Menlo, monospace"
  },
  "groups": [
   {
    "name": "Display",
    "family": "sans",
    "styles": [
     {
      "name": "display-xl",
      "fontSize": "72px",
      "lineHeight": "72px",
      "fontWeight": 900,
      "letterSpacing": "-0.02em",
      "sample": "The open exchange for Stacks",
      "usage": "One hero headline per page."
     },
     {
      "name": "display",
      "fontSize": "52px",
      "lineHeight": "56px",
      "fontWeight": 800,
      "letterSpacing": "-0.015em",
      "sample": "Charisma, by the numbers",
      "usage": "Section heroes and marketing headlines."
     }
    ]
   },
   {
    "name": "Headings",
    "family": "sans",
    "styles": [
     {
      "name": "h1",
      "fontSize": "36px",
      "lineHeight": "42px",
      "fontWeight": 700,
      "sample": "Put your money to work",
      "usage": "Page titles inside apps."
     },
     {
      "name": "h2",
      "fontSize": "26px",
      "lineHeight": "32px",
      "fontWeight": 700,
      "sample": "Top tokens",
      "usage": "Section and card-group titles."
     },
     {
      "name": "h3",
      "fontSize": "19px",
      "lineHeight": "24px",
      "fontWeight": 700,
      "sample": "Best price, every swap",
      "usage": "Card titles, dialog titles."
     }
    ]
   },
   {
    "name": "Text",
    "family": "sans",
    "styles": [
     {
      "name": "body-lg",
      "fontSize": "19px",
      "lineHeight": "30px",
      "fontWeight": 400,
      "sample": "Open-source pools and routing that belong to no one and work for everyone.",
      "usage": "Lead paragraphs under a hero."
     },
     {
      "name": "body",
      "fontSize": "16px",
      "lineHeight": "24px",
      "fontWeight": 400,
      "sample": "We sell your ZEST for you when it rises.",
      "usage": "Default UI and reading text."
     },
     {
      "name": "body-sm",
      "fontSize": "14px",
      "lineHeight": "20px",
      "fontWeight": 500,
      "sample": "Swap from your wallet, or off chain in an instant.",
      "usage": "Secondary text, list rows, buttons."
     },
     {
      "name": "caption",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 500,
      "sample": "Updated every 15 minutes",
      "usage": "Fine print, footnotes, chart axes."
     }
    ]
   },
   {
    "name": "Mono",
    "family": "mono",
    "styles": [
     {
      "name": "label",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 500,
      "letterSpacing": "0.12em",
      "sample": "ZEST / SBTC",
      "usage": "Uppercase eyebrows, table headers, stat labels. Always uppercase."
     },
     {
      "name": "num-xl",
      "fontSize": "32px",
      "lineHeight": "38px",
      "fontWeight": 400,
      "letterSpacing": "-0.02em",
      "sample": "22,709",
      "usage": "Stat-tile values and the swap amount input."
     },
     {
      "name": "num",
      "fontSize": "16px",
      "lineHeight": "24px",
      "fontWeight": 400,
      "sample": "1,000.00 STX",
      "usage": "Amounts, prices and balances in rows."
     },
     {
      "name": "num-sm",
      "fontSize": "13px",
      "lineHeight": "18px",
      "fontWeight": 400,
      "sample": "SP2ZN…55KS",
      "usage": "Addresses, tx ids, small figures."
     }
    ]
   }
  ],
  "weightSynthesis": {
   "dark": "auto",
   "light": "none"
  },
  "familiesUsage": "sans is per realm: Ysabeau Infant's storybook letterforms are the RPG voice by night; Matter (Zesty, Stacks Workshop) is the Bitcoin voice by day. Matter ships 400 and 500 only, so the light realm turns off weight synthesis: anything bolder renders as Medium, the Stacks look. mono (DM Mono) is the same in both."
 },
 "spacing": {
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Icon-to-label gaps, pill padding."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Chip gaps, tight stacks."
   },
   {
    "name": "space-3",
    "value": "12px",
    "usage": "Row padding, button icon gaps."
   },
   {
    "name": "space-4",
    "value": "16px",
    "usage": "Card inner padding (mobile), list gaps."
   },
   {
    "name": "space-5",
    "value": "20px",
    "usage": "Card inner padding (p-5, the source default)."
   },
   {
    "name": "space-6",
    "value": "24px",
    "usage": "Gaps between cards; swap pane spacing (mb-6)."
   },
   {
    "name": "space-8",
    "value": "32px",
    "usage": "Section padding inside apps."
   },
   {
    "name": "space-12",
    "value": "48px",
    "usage": "Between page sections."
   },
   {
    "name": "space-16",
    "value": "64px",
    "usage": "Hero padding, the header height (h-16)."
   }
  ]
 },
 "radius": {
  "tokens": [
   {
    "name": "radius-sm",
    "value": "8px",
    "usage": "Chips, tip-jar amounts, small inputs, mode-toggle items (rounded-lg)."
   },
   {
    "name": "radius-md",
    "value": "12px",
    "usage": "Buttons, inputs, list rows, toasts, stat tiles (rounded-xl)."
   },
   {
    "name": "radius-lg",
    "value": "16px",
    "usage": "Cards, panes, dialogs, the token picker search (rounded-2xl)."
   },
   {
    "name": "radius-pill",
    "value": "9999px",
    "usage": "Pills, status badges, avatars and token logos."
   }
  ]
 },
 "shadow": {
  "note": "Dark elevates with glass and a crimson bloom; light elevates with hairlines and almost no shadow.",
  "tokens": [
   {
    "name": "shadow-cta",
    "value": {
     "dark": "0 8px 32px #c1121f59",
     "light": "none"
    },
    "usage": "The one accent-filled CTA in a view."
   },
   {
    "name": "shadow-overlay",
    "value": {
     "dark": "0 24px 64px #000000b3",
     "light": "0 24px 64px #00000029"
    },
    "usage": "Dialogs, menus, toasts and the token picker sheet."
   },
   {
    "name": "shadow-card",
    "value": {
     "dark": "inset 0 1px 0 #ffffff0d",
     "light": "none"
    },
    "usage": "A 1px top highlight on dark glass cards; flat in light."
   }
  ]
 },
 "meta": {
  "source": "github",
  "repo": "local: charisma monorepo + charisma-web",
  "ref": "2026-10-01",
  "paths": {
   "tokens": [
    "charisma-web/styles/global.css",
    "apps/simple-swap/src/app/globals.css",
    "apps/simple-swap/src/app/zesty/zesty.css"
   ],
   "fonts": [
    "charisma-web/pages/_app.tsx",
    "apps/meme-roulette/src/styles/fonts.ts"
   ],
   "assets": [
    "charisma-web/public"
   ]
  },
  "synced": "2026-10-01"
 }
}