# 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`*