CIRCUIT CHIPS
Circuit rings render loading transitions across the site.
PIXEL ICONS
Small decorative icons. Use in section headers, card labels, and inline accents. Supports floating animation.
BUTTONS
PixelButton with solid and hollow color variants across all accent colors. Use the btn and glow preset objects for consistent styling.
Sizes
Solid
Hollow
Disabled
CARDS
Theme-split card primitives. Magic: GlowCard and GlowingCard. Cyber: HudCard and CyberCard. Use ThemeCard in production to auto-switch with the theme.
Magic
GlowCard
CARD TITLE
Pixel border glow on hover. Magic-only.
GlowingCard
CARD TITLE
Elevated bg, card-hover glow, opacity-85 idle. Used for SkillCard magic.
Cyber
HudCard
HUD TITLE
L-corner bracket card. Accent-primary border, corners animate on hover. Used for SkillCard cyber.
CyberCard
FRAME TITLE
Chamfered 45deg cuts, 3-layer clip-path, bottom accent tab. Hover intensifies glow.
DIVIDER
RuneDivider for section separators and card borders. Three alignment variants: left, center, right.
align="left"
align="center" (default)
align="right"
SECTION HEADER
Section title with a built-in rune divider. Optionally pass a pixel or spell icon to display beside the title.
Without icon
EXAMPLE SECTION
With icon (PixelStar)
EXAMPLE SECTION
TYPOGRAPHY
Semantic text scale, section description paragraph, and tech badge. Use the token scale, never arbitrary sizes. Heading font for titles, body font for everything else.
Text scale
text-micro (9px), decorative label
text-tiny (10px), table header
text-xs (12px), meta / date / caption
text-sm (14px), body mobile
text-base (16px), standard body desktop
text-lg (18px), large body / blog
text-xl (20px), section heading mobile
text-3xl, section heading desktop
SectionDescription
This is a section description paragraph. Used for intro text under section headers. Max-width 2xl, text-secondary, font-body.
TechBadge
STATS HIGHLIGHT
Animated count-up metric rows. Each row has a value, label, description, and optional detail line. Labels must be unique across rows.
Highlights a key metric with a label and supporting copy. Animated count-up triggers on scroll into view.
Optional detail line appears below the description in a smaller muted font.
detail · sub-detail · extra
FEATURE CARDS
Feature highlight cards for blog posts. Variants: hero (large lead), compact pair, wide with a call-to-action, and wide with a custom visual panel.
Hero + wide
HEADING
Hero feature card. Use as the lead item in a feature grid when one entry deserves more visual weight than the rest. Larger heading, larger metric, full-width on desktop.
Compact pair
HEADING
Compact feature card. Use in a 2-column grid to list secondary features side by side with a short metric and a one-line summary.
HEADING
Compact feature card. Use in a 2-column grid to list secondary features side by side with a short metric and a one-line summary.
Wide with CTA
HEADING
Wide feature card with a call-to-action button instead of a metric. Use when the feature should link out to a live demo, external page, or sub-route.
Wide with visual slot
HEADING
Wide feature card with an optional visual slot. Pass any React component to the visual prop to render in the card's right panel.
DECISION CARD
Documents an architectural decision: options considered, the pick, why, and tradeoff. Render in a 2-column masonry layout.
LEARNING CARD
Captures build lessons. WORKED prefix for validated techniques, GOTCHA for pitfalls. Optional next field for the follow-up rule.
Captures a technique or pattern that worked during the build. Use to record validated approaches so the lesson survives past the commit.
Captures a pitfall, bug, or surprise hit during the build. Use to record traps so the same hour is not lost twice.
STACK VISUALIZATION
Layered tech stack display. Each group shows a category label, layer name, icon, accent color, and a list of items with optional version notes.
LAYER LABEL
LAYER SUBLABEL
SEPARATOR TICKER
Full-width scrolling ticker used as a section separator. Renders rune symbols in magic mode and circuit tokens in cyber mode.
Magic
Cyber