Brand Systems
CEBKUN TECH Brand System
Clean Signal: the CEBKUN brand bible. Solid orange UI, a focused gradient hero, and friendly-loud type, captured from the live site into one system.
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.
Opens the standalone brand bible file in a new tab.
Overview
One source of truth for the CEBKUN look.
Problem
The CEBKUN look lived only in production CSS. Every new page, showcase, or agent had to guess the colors, type, and interaction rules, and the site drifted a little each time.
Solution
Captured the live stylesheet into one visual brand bible: dark and light token sets, an Anton/Poppins/Nunito Sans type system, component recipes, and six implementation rules. The same values now drive the site's CSS variables.
Brand voice
Smart, friendly, and a little makulit.
CEBKUN is a tech blog for practical fixes and honest recommendations. The voice keeps it useful first, with the joke second.
Useful before fancy
Lead with the fix or the recommendation, then the joke.
Taglish-first where it helps
Write the way the reader talks. A little kalokohan is on-brand; filler is not.
Content comes in Bits
Tool Bits, Code Bits, Fix Bits. Keep the Bit taxonomy and approved copy intact.
Short, action-first calls to action
First person singular for the author: "Explore the Bits", "Work with Me".
Production tokens
Solid orange UI, focused gradient hero.
Dark is the default theme and light is the alternate. Both share one solid orange accent; surfaces and text shift per theme.
Dark theme
#050507
#0D0D12
#151520
#FF7A00
#CC6200
#3D230A
#FFAA5C
#FFAA5C
Light theme
#F8FAFC
#FFFFFF
#F1F5F9
#FF7A00
#863000
#FCF3ED
#863000
#B94200
Hero gradient
#FF8A1A → #F65D18, held at 74.93%. A static fill for one phrase of a display headline, never a blanket interface effect.
Typography
Friendly, loud, readable.
Anton carries display impact. Poppins handles headings. Nunito Sans keeps body and UI copy approachable.
Useful Bits
Display — Anton
Hero headlines, feature words, and the CK monogram. Weight 400, tight leading.
Smart but friendly.
Heading — Poppins
Section titles, card titles, the wordmark, and eyebrows.
Easy to scan.
Body/UI — Nunito Sans
Practical copy should be easy to scan, useful before fancy, and Taglish-first where it helps.
Component recipes
Simple surfaces, obvious interactions.
Interactive cards and controls use a bright orange outline on hover and focus-within; disabled controls are excluded.
Card / interactive
Tool Bits
Border, radius, soft shadow, then a clear orange interaction state. No glassmorphism overload.
Button / primary
Explore the Bits
Solid orange fill with an on-accent label. Lifts 2px on hover.
Button / secondary
Work with Me
Quiet surface fill and hairline border, same orange outline on hover.
Implementation rules
Keep the signal clean.
- 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: Brand elements don't animate, and reduced-motion overrides stay in place.
- Keep interactions visible: Use a 2px orange outline with 3px offset and support :focus-within.
- Stay useful first: Preserve the homepage structure, Bit taxonomy, approved copy, and the CEB/KUN panel.
Accessibility
What the audit found.
Dark theme passes contrast everywhere. Light theme has known gaps that are tracked so they get fixed on the site first, then in the tokens.
- Light-theme button labels on solid orange sit at 2.5:1, under the AA target.
- Orange outlines on the light background sit at 2.5:1, under the 3:1 floor for indicators.
- The hero gradient on light backgrounds is fine at display size only.
Tools Used
Client-safe Notes
Public CEBKUN brand artifact derived from production CSS. Contains no credentials or private provider data.