Live-derived final system

Smart Tech,
Dumb Jokes,
Useful Bits.

Practical guides, tool recommendations, coding notes, gaming thoughts, and digital life fixes — served in useful Bits with kalokohan.

Explore the Bits Work with Me

Production tokens

Solid orange UI, focused gradient hero.

These swatches are populated from the synchronized JSON export captured from the live CEBKUN stylesheet.

Typography

Anton carries display impact. Poppins handles headings. Nunito Sans keeps body and UI copy approachable.

Useful Bits

Display — Anton

var(--font-display)

Smart but friendly.

Heading — Poppins

var(--font-heading)

Practical copy should be easy to scan, useful before fancy, and Taglish-first where it helps.

Body/UI — Nunito Sans

var(--font-sans)

Component recipes

Interactive cards and controls use a bright orange outline on hover and focus-within; disabled controls are excluded.

Card / interactive

Border, radius, soft shadow, then a clear orange interaction state. No glassmorphism overload.

Button / primary

Button / secondary

Implementation rules

Use solid orange UI: #FF7A00 is the main accent for controls, borders, and emphasis.
Reserve the gradient: #FF8A1A → #F65D18 is the static hero/display treatment, not a blanket interface effect.
Protect light mode: use #414140 as the light-theme text color; never fall back to pure black as the brand neutral.
Respect motion: the live brand elements compute to animation-name: none; keep reduced-motion overrides in place.
Keep interactions visible: use a 2px orange outline with 3px offset and support :focus-within.
Stay useful first: preserve the existing homepage structure, Bit taxonomy, approved copy, and CEB/KUN panel.