Theming
Tokens, presets, and per-instance overrides.
Every template ships with a Tailwind preset for build-time theming and
forwards style + className to its root element so you can tweak animation timing and tunable CSS
variables without forking any CSS.
Tailwind preset
The package re-exports its design tokens on the ./theme subpath. Use the bundled preset, or import individual groups to compose
your own.
// tailwind.config.ts
import { fourZeroFourPreset } from "@kripa006/404-ui/theme";
export default {
presets: [fourZeroFourPreset],
content: ["./src/**/*.{js,ts,jsx,tsx,vue,astro}"],
};
// Or import the raw groups:
import {
spaceColors,
animationKeyframes,
animationUtilities,
spaceFontFamily,
} from "@kripa006/404-ui/theme"; Exported tokens
The table below summarises what's available from @kripa006/404-ui/theme. See the source for the canonical list.
| Group | Tokens | Notes |
|---|---|---|
| spaceColors.space | hull, panel, panel-lite, phosphor, phosphor-dim, amber, warn, accent, glow | Apollo-era mission-control palette consumed by Space404. |
| spaceColors.ocean | 900, 800, 700, 600, accent, glow, pearl | Bioluminescent deep-sea palette consumed by Ocean404. |
| spaceColors.forest | 900 / 800 / 700 / 600 / 500, moss, moss-soft, bark, bark-light, parchment, mist, ember, firefly, rust | Old-growth temperate-rainforest palette consumed by Forest404. |
| animationKeyframes / animationUtilities | scan, crt-glitch, orbit-spin, rise, caustic, sonar, jelly-bell, canopy-sway, fog-drift, firefly-pulse, leaf-fall, ember-breathe | Compose with Tailwind: animate-scan, animate-rise, animate-firefly-pulse, etc. |
| spaceFontFamily | space (sans), telemetry (mono), grove (serif) | Maps to Tailwind font-space, font-telemetry, font-grove. |
Per-instance CSS variables
Every template forwards style to its
root container, so you can override these custom properties per
instance without touching global CSS.
| Template | CSS variables |
|---|---|
| Space404 | --orbit-duration, --rocket-x |
| Ocean404 | --bubble-x, --bubble-size, --bubble-duration, --bubble-delay, --bubble-drift, --jelly-x, --jelly-y, --jelly-size, --jelly-duration, --jelly-delay |
| Forest404 | --ff-x, --ff-y, --ff-size, --ff-duration, --ff-delay, --ff-drift-x, --ff-drift-y, --leaf-x, --leaf-size, --leaf-tint, --leaf-duration, --leaf-drift, --leaf-spin |
| Glitch404 | (no per-instance variables — theme via Tailwind preset) |
// Speed up the orbital ring per instance.
<Space404 style={{ "--orbit-duration": "6s" } as React.CSSProperties} />
// Recolor falling birch leaves.
<Forest404 style={{ "--leaf-tint": "#b85a2c" } as React.CSSProperties} /> Live example
The default Space404 sits beside an instance with --orbit-duration: 6s. The ring on the right rotates noticeably faster — same component,
inline CSS variable.