Token Group

Steins;Gate

Midnight navy backgrounds, electric blue IBN 5100 glow, divergence meter red, and warm ivory text — drawn directly from the visual novel palette.

Lab Night

Midnight Navy

Surface Navy

IBM Blue

Divergence Red

Lab Teal

Ivory Text

"El Psy Kongroo."

Usage

import { steinsGate } from '@stareezy-ui/tokens'

// Access token values
steinsGate.ibmBlue.value       // "#4a9eff"
steinsGate.labNight.value      // "#080c18"
steinsGate.divergenceRed.value // "#e63030"
steinsGate.ivoryText.value     // "#e8dcc8"

// Use in createUi themes
const ui = createUi({
  themes: { 'steins-gate': themes['steins-gate'] }
})

Token Reference

#080c18

sg-labNight

Deepest background — midnight Akihabara

#0d1224

sg-midnightNavy

Primary surface — deep navy

#131929

sg-surfaceNavy

Secondary surface — slightly lifted navy

#4a9eff

sg-ibmBlue

Electric blue — IBN 5100 / D-mail glow, primary brand

#2d6db5

sg-ibmBlueDim

Dim electric blue — secondary accents

#e63030

sg-divergenceRed

Divergence meter red — danger states

#ff4444

sg-steinerRed

Reading Steiner flash — critical alerts

#2a9d8f

sg-labTeal

Muted teal — success / secondary accent

#e8dcc8

sg-ivoryText

Warm ivory — VN text box, primary text

#a89880

sg-ivoryDim

Dim ivory — secondary body text

#1e2a42

sg-borderNavy

Subtle border — barely visible navy line

#5a6a85

sg-textMuted

Muted text — placeholder / disabled

Dark / Light Variants

The steinsGateVariants export provides both dark (midnight lab) and light (daytime parchment) variants via getVariant.

import { steinsGateVariants, getVariant } from '@stareezy-ui/tokens'

const darkTokens  = getVariant(steinsGateVariants, 'dark')
const lightTokens = getVariant(steinsGateVariants, 'light')

darkTokens.labNight.value   // "#080c18"
lightTokens.labNight.value  // "#f5f0e8"

Semantic mapping

When you use themes['steins-gate'] in createUi, the semantic slots map as follows:

Semantic slot	Token	Value
`text.primary`	`steinsGate.ivoryText`	`#e8dcc8`
`text.importantBrand`	`steinsGate.ibmBlue`	`#4a9eff`
`text.danger`	`steinsGate.divergenceRed`	`#e63030`
`text.success`	`steinsGate.labTeal`	`#2a9d8f`
`backgrounds.primary`	`steinsGate.ibmBlue`	`#4a9eff`
`backgrounds.primaryBlack`	`steinsGate.labNight`	`#080c18`
`border.primaryBrand`	`steinsGate.ibmBlue`	`#4a9eff`
`border.danger`	`steinsGate.divergenceRed`	`#e63030`