59B Component Contract

Shared Card, Button, Tab, and Tile Contract

Dark mode should use the TheoB Arena Shell as the visual reference. Light mode should use Vault / Universal Search as the lightweight readability reference. These helpers make cards, buttons, tabs, and game tiles consistent across the site.

Reference bases

{
  "darkDefault": {
    "source": "TheoB Arena Shell",
    "reason": "Best dark framework: cockpit/instrument feel, high contrast, lightweight, clear frame, strong text separation.",
    "skinId": "instrument-dark"
  },
  "lightDefault": {
    "source": "Vault / Universal Search",
    "reason": "Best light framework: clean, readable, lightweight, shows text variations clearly.",
    "skinId": "gallery-light-controlled"
  },
  "expansionRule": "Start from these two bases, then layer cacao, academy, moral learning, games, and founder skins as controlled variations."
}
Primary ButtonDefault ButtonQuiet ButtonBlocked State
Active TabElement MatchMission Pack
H
O
C
Na
Cl

card

getTheoBCardStyle58Y

Shared card surface for Academy, games, registries, and Founder Command.

button

getTheoBButtonStyle58Y

Shared button/action surface with default, primary, quiet, and blocked variants.

tab

getTheoBTabStyle58Y

Shared tab surface for Arena-style route controls.

game-tile

getTheoBGameTileStyle58Y

Shared tile surface for Element Match and future learning games.

section-title

getTheoBSectionTitleStyle58Y

Shared title contrast and shadow rule.

body-text

getTheoBBodyTextStyle58Y

Shared readable paragraph rule.