kotobane/docs/superpowers/specs/kotobane-brand-system.md

Kotobane — Brand & Design System

"Words carried on wings." — 言羽

Kotobane is a Japanese pop-culture news site covering VTubers, Anime, Manga, Games, Music, Japan, Culture, and Industry.

---

Brand Identity

What it should feel like:

• A modern Japanese digital newspaper
• A refined anime culture publication
• A calm but fast-moving stream of information

What it must never feel like:

• A loud clickbait anime blog
• A generic SaaS dashboard
• An overly playful otaku forum

Emotional keywords: intelligent · fast · atmospheric · minimal · editorial · futuristic · trustworthy

---

Color Palette

Brand Accent

Token	Hex	Usage
accent	#00B4D8	Buttons, links, active nav, "Read →", focus rings
accent-hover	#00D4FF	Hover state

Status Colors

Token	Hex	Usage
violet	#7C3AED	Featured / hero badges, secondary actions
coral	#D64545	Trending, breaking news, errors
amber	#FFB300	New indicator, alerts, warnings
green	#00D166	Published status, success

Backgrounds

Token	Hex	Usage
bg	#0D0D14	Main page background
bg-elevated	#171A21	Navbar, elevated surfaces
bg-card	#1D212B	Cards, inputs
border	#2A3140	All borders and dividers

Text

Token	Hex	Usage
text-primary	#F3F5F7	Headlines, body
text-secondary	#B8C0CC	Excerpts, captions
text-muted	#7D8795	Timestamps, category labels, metadata
text-disabled	#5C6470	Disabled / placeholder

Rules:

• Category names are always text-muted — never color-coded
• No gradients on UI elements — flat colors only
• Secondary accent colors are used sparingly, only for semantic meaning (trending, featured, etc.)

---

Typography

Font stack:

• English: Inter
• Japanese: Noto Sans JP

Load both via next/font. Use Noto Sans JP as a fallback for any Japanese text in article titles or tags.

Scale

Role	Size	Weight
Hero headline	48–56px	700
Article title	34–40px	700
Section title	22–24px	700
Card title	13–15px	600
Primary body	16px	400
Compact body (excerpts)	13px	400
Metadata / labels	10–12px	500–600

---

Spacing

Base unit: 8px. Only use these values — no arbitrary spacing.

4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96

---

Layout

Breakpoint	Grid	Max content width
Desktop	12-column	1200px
Tablet	8-column	—
Mobile	Single column, content-first	—

Article body width: 760–780px (centered).

---

Border Radius

Token	Value	Usage
radius-sm	8px	Inputs, small chips
radius-md	12px	Cards
radius-lg	16px	Large cards, hero panels
radius-xl	20px	Modals
radius-2xl	28px	Full-page panels

---

Shadows

Shadows must be soft and diffused. No hard black shadows.

Token	Usage
shadow-sm	Subtle card lift
shadow-md	Hover elevation
shadow-lg	Modals, overlays

---

Motion

Property	Value
Duration	150ms – 250ms
Easing	cubic-bezier(0.22, 1, 0.36, 1)

Rules:

• Motion communicates hierarchy and guides focus — never decorates
• No bouncing, no exaggerated scaling, no neon pulse effects
• Always respect prefers-reduced-motion

---

Components

Buttons

• Primary: solid #00B4D8 background, black text
• Secondary: transparent background, #00B4D8 border and text
• Never: pill buttons, excessive gradients, loud CTA colors

Cards

• Background: bg-card
• Border: 1px solid border
• Radius: radius-md (12px)
• Hover: border lightens slightly (#3a4560), no scale transform

Badges

• Use flat solid backgrounds, bold uppercase text, tight padding
• Text on dark badges: white. Text on light badges (amber, green): black

---

Icons

Style: outline, geometric, lightweight

Recommended library: Lucide React

---

Article Pages

Article pages are the most important pages. They must feel:

• Quiet and focused
• Distraction-free
• Premium and readable

Avoid: intrusive widgets, autoplay media, excessive sidebar clutter.

---

Editorial Tone

Articles should be:

• Concise and informative
• Culturally aware and contextual
• Written in a calm, analytical voice — modern magazine journalism

Good headlines: direct, informative, contextual
Bad headlines: "YOU WON'T BELIEVE", "THIS CHANGES EVERYTHING", fake urgency

Never: clickbait, ragebait, excessive hype.

---

Accessibility

Mandatory requirements:

• WCAG AA contrast minimum on all text
• Keyboard navigation throughout
• Visible focus states (use ring-accent / #00B4D8)
• Semantic HTML with proper heading hierarchy (one <h1> per page)
• alt text on all images
• prefers-reduced-motion support

---

Performance

• SSR / ISR — no client-heavy rendering for core content
• Lazy-load all images below the fold
• next/image for all images (automatic WebP + sizing)
• Minimal layout shift (CLS < 0.1)
• Fonts loaded via next/font (no FOUT)

---

SEO

Priority order: readers → archives → search engines

SEO must never dictate editorial tone. Every article and category page gets:

• <title> — seo_title if set, otherwise article title + " — Kotobane"
• <meta description> — seo_description if set, otherwise excerpt
• <link rel="canonical">
• Open Graph tags for social sharing

---

AI Agent Rules

When modifying any UI in this project:

Must:

• Maintain spacing system (8px grid, no arbitrary values)
• Preserve typography hierarchy
• Use flat colors only — no gradients on UI elements
• Use accent colors sparingly and only for their defined semantic purpose
• Keep category labels in text-muted — never color-code them

Must not:

• Inject gradients onto UI elements
• Overcrowd layouts
• Add clickbait-style visual treatments
• Break the spacing system
• Add unnecessary UI chrome or decorations
• Add per-category color coding

---

Logo

The 言羽 kanji mark serves as the primary logo in all contexts.

Characteristics:

• Rendered in accent color (#00B4D8) on dark backgrounds
• High letter-spacing in the wordmark (tracking: 3px+)
• Works at small sizes — suitable as favicon treatment
• No gradients on the logo

---

Design reference with visual mockups: docs/design-reference/kotobane-reference.html
Implementation spec: docs/superpowers/specs/2026-05-28-kotobane-cms-website-design.md