Internal Reference

Brand Identity

Visual and verbal guidelines for Bibue. This page is not public.

01 · Logo & Wordmark

The Bibue Mark

Bibue

On dark

Bibue

On light

The Bibue wordmark is set in Cinzel Bold (700). It is always title case: "Bibue" · never all-caps, never lowercase.

The tower icon accompanies the wordmark in navigation but is never used as a standalone brand mark without the name nearby.

Clear space:Maintain at least 1× the height of the "B" as padding around all sides of the logo.

Minimum size: 16px wordmark height on screen. Below this, use the tower icon alone with the wordmark in adjacent text.

02 · Color Palette

Four Flavors

Bibue ships four theme flavors. Each is manually tuned for WCAG AA contrast. All colors are defined as HSL design tokens in CSS custom properties.

Sunlight (Light Mode)

Background

--background

#F5F0E6

Foreground

--foreground

#161412

Primary (Gold)

--primary

#FFBF00

Muted

--muted

#EBE5DB

Border

--border

#DDD7CC

Moonlight (Dark Mode)

Background

--background

#050505

Foreground

--foreground

#F2F2F2

Primary (Blue)

--primary

#3B82F6

Muted

--muted

#1A1A1A

Border

--border

#1F1F1F

Monochrome

Background

--background

#000000

Foreground

--foreground

#E6E6E6

Primary

--primary

#E6E6E6

Muted

--muted

#141414

Contrast

Background

--background

#FFFFFF

Foreground

--foreground

#000000

Primary

--primary

#000000

Border

--border

#D9D9D9

Electric Blue (#1DA1F2) is reserved for interactive links and primary CTAs in dark mode contexts.

Rule: Never use raw hex values in components. Always reference semantic tokens: bg-primary, text-foreground, etc.

03 · Typography

Type System

Display & Editorial

Cinzel

Weights: 400–900. Used for the wordmark, page titles, section headings, and editorial labels. Always set with font-sacred.

Heading 1 · 30–48px Bold

Heading 2 · 20–30px Semibold

Label · 10–12px Medium, Uppercase

Body & UI

Inter

Weights: 300–900. Used for body copy, buttons, navigation links, metadata, and all UI elements. The default font-family.

Body · 14–16px Regular

UI Label · 13–14px Medium

Caption · 11–12px Regular, Muted

Rule: Never use Cinzel for body text. Never use Inter for the wordmark or page titles.

Hierarchy:Uppercase high-tracking labels (Cinzel) introduce sections. Body copy (Inter) provides detail. This pairing creates the editorial-meets-digital tension that defines Bibue's character.

04 · Voice & Tone

How We Speak

Understated confidence

We don't shout. We don't oversell. We state things plainly and let the product speak. No exclamation marks in UI copy.

Reader-first

Every word serves the reader's experience. If copy doesn't help someone find, read, or share a story · cut it.

No gamification language

We say 'vote' not 'spend credits.' We say 'added' not 'earned.' The platform feels intentional, never like a slot machine.

Culturally respectful

We use the original titles alongside translations. We never exoticize. Manga, manhwa, and manhua are treated with equal weight.

Tagline:"Discover, Track & Share Your Favorite Manga, Manhwa & Manhua". Used in meta descriptions and SEO. Never in the UI header.

Subscription copy (verbatim): "$9.99 per month. Unlimited access to all licensed and bridged titles. 15 Bridge Credits every month to vote on new stories. Cancel anytime. No hidden fees. No tiers."

05 · Don'ts

Things We Never Do

✕Never use the tower icon as a standalone brand mark without the wordmark nearby
✕Never set the wordmark in anything other than Cinzel Bold (700)
✕Never add gradients, shadows, or effects to the logo
✕Never use 'Bibu', 'BIBUE', or any other spelling variation
✕Never pair the logo with a tagline · let it stand alone
✕Never use exclamation marks in product UI copy
✕Never use purple gradients, Inter for headings, or rounded-full buttons as primary CTAs

06 · Motion

Animation Principles

200 to 400ms transitions. Ease-out-quart for most, ease-out-quint for hero. 700ms reserved for hero-figure parallax.

Animate opacity and transform only. Never width, height, top, or left.

Cards lift on hover with a subtle vertical translate. No overshoot. No return-back. No bounce.

Rule. No particle effects, no sparkle, no coin-drop. No spring or elastic easing. Motion should feel physical and intentional, never decorative or gamified.