achmad
264 lines
6.5 KiB
Markdown
264 lines
6.5 KiB
Markdown
# 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`*
|