AniHeart Design System

Overview

AniHeart is a dark-themed anime streaming platform built around a near-black canvas (#0a0a0a) punctuated by an electric lime-green primary brand color (#5cdc34) and hot-pink accents (#ff2d55) for alerts and CTAs. The entire typographic system relies on the native system sans-serif stack—SF Pro Text on macOS, Segoe UI on Windows—rendered at heavier-than-average weights (500–800) to achieve a bold, modern, youth-oriented feel. Gold rating badges (#facc15) provide warm contrast against the cool-dark environment. This is a content-first interface where imagery dominates, UI chrome stays minimal, and micro-interactions (bell shakes, shimmer loading states, springy transitions) create a responsive, app-like experience in the browser.

Color Palette

Core Colors

| Token | Hex | Usage | |---|---|---| | --color-primary | #5cdc34 | Brand green — active nav pills, CTAs, progress indicators, status highlights | | --color-secondary | #ff2d55 | Hot pink — NEW badges, destructive actions, modal confirm buttons | | --color-accent | #facc15 | Gold/yellow — anime rating score badges, warning states | | --color-bg | #0a0a0a | Page background — deep black base | | --color-surface | #5cdc34 | Elevated surface tint (brand-tinted overlays) | | --color-surface-card | #212121 | Card / panel background — raised containers | | --color-text-primary | #ffffff | Headlines, body copy, primary UI text | | --color-text-secondary | #888888 | Muted descriptions, placeholder text, timestamps | | --color-text-tertiary | #666666 | Disabled text, very subtle labels | | --color-text-muted | #bbbbbb | Secondary body text, less prominent descriptions | | --color-border | rgba(255, 255, 255, 0.06) | Subtle dividers, input borders | | --color-overlay | rgba(26, 26, 26, 0.8) | Modal backdrop / overlay |

Semantic

• Page background: #0a0a0a
• Primary CTA: bg #5cdc34, text #000000 (black-on-green for max contrast)
• Secondary CTA / Nav buttons: transparent bg with white text; active state gets #5cdc34 background pill
• Modal CTA: bg #ff2d55, text #ffffff (the "Понятно" / Got it button)
• Hover states: opacity shift to ~0.7–0.8; buttons brighten; cards lift with shadow increase; transition timing ~200–300ms
• Rating badges: bg #facc15 (gold), text #000000, positioned top-left on anime cards
• NEW badge: bg #ff2d55, text #ffffff, uppercase, bold, inline with heading text

Typography

Font Families

--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", sans-serif;
--font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", sans-serif;

AniHeart uses a single font family—the native system sans-serif stack—for every element from hero headlines down to UI labels. There is no serif display face and no monospace code font. The differentiation between hierarchy levels comes entirely from size and weight rather than font switching. This choice ensures instant rendering, zero layout shift from web-font loading, and a crisp, OS-native feel that matches streaming apps like Crunchyroll's local clients. The heavy weight range (500–800) compensates for the lack of decorative qualities in system fonts, giving the interface punch and presence against the dark background.

Type Scale

| Role | Family | Size | Weight | Line-height | Color | |---|---|---|---|---|---| | Display / H1 | System Sans | 40px | 800 | 46px | #ffffff | | H2 / Section heading | System Sans | 18px | 700 | normal | #ffffff | | H3 / Article title | System Sans | 16px | 600 | normal | #ffffff | | Body | System Sans | 16px | 500 | normal | #666666 | | UI Label | System Sans | 14px | 600 | normal | #ffffff / #888888 | | Small / Caption | System Sans | ~13px | 400 | normal | #888888 |

Typography Notes

• Headlines are set at weight 800—extra-bold—to command attention in the dark environment; this is heavier than typical web typography
• Body text sits at weight 500 (medium), darker than standard 400, ensuring readability without feeling delicate
• No letter-spacing adjustments detected—all spacing is normal
• The H1 line-height of 46px on 40px type gives tight, impactful headline blocks
• Rating numbers on badges appear to be rendered at small sizes (~12–13px) in bold weight
• Uppercase is reserved for the "NEW" badge only; all other text is sentence/title case
• Modal title ("Обновление сайта") uses heading weight (700) at what appears to be 18–20px
• Timestamp text ("1 мая 2026 г.") uses muted gray (#bbbbbb or similar) at reduced size

Spacing Scale

2px   — hairline borders, tight internal gaps
3px   — micro-adjustments (very frequent — icon padding)
6px   — compact component gaps, icon-button hit areas
8px   — default gap between sibling elements
10px  — most common spacing value overall (padding inside many components)
12px  — medium internal padding
14px  — occasional intermediate value
16px  — standard section padding / gutter
20px  — larger internal padding
24px  — section-level vertical rhythm
25px  — bottom margin for main content area
32px  — larger section gaps
40px  — major section separation, header height zone

Container widths:

• Max content width: 1440px (main, sections, header all report this)
• Full-bleed sections: 100vw for background layers
• Side padding: 24px on desktop header
• Section vertical padding: 0px default (sections are flush); content areas have 0 0 25px bottom padding

Border Radius Vocabulary

--radius-xs:   1.5px       — hairline rounding (minimal, rarely used)
--radius-sm:   6px         — small buttons, tag-like elements
--radius-md:   14px        — dominant radius — cards, modals, inputs, most containers
--radius-lg:   16px        — slightly larger cards or panels
--radius-full: 9999px      — circular elements — avatars, icon buttons, notification badge
--radius-pill: 50%         — same as full, used for circular avatars and icon buttons

The 14px radius is the workhorse of this design system—it appears 160 times in the extracted DOM and defines the characteristic soft-rectangle shape of anime cards, the modal dialog, and input fields. This is notably rounder than typical Material Design (which favors 4–8px) giving AniHeart a friendlier, more contemporary app-store aesthetic.

Shadow Vocabulary

--shadow-sm: rgba(0, 0, 0, 0.11) 0px 0px 5px 5px;     — card hover/elevation, subtle depth
--shadow-md: rgba(0, 0, 0, 0.11) 0px 0px 5px 5px;     — default elevated state
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 20px 60px 0px;    — modal backdrop shadow, dramatic elevation

Shadows are used sparingly but deliberately. The dominant shadow (sm/md) is a soft ambient glow rather than a directional drop shadow—notice how both x and y offsets are zero, with equal spread and blur. This creates a halo effect around elevated elements, appropriate for the dark theme where traditional shadows would be invisible. The large shadow (lg) is reserved for modal presentations, creating deep visual separation from underlying content.

Component Recipes

Primary CTA Button (Green Brand)

background-color: #5cdc34;
color: #000000;
border: none;
border-radius: 14px;
padding: 10px 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", sans-serif;
font-size: 15px;
font-weight: 600;
transition: opacity 0.25s, transform 0.25s;
cursor: pointer;
}
/* Hover */
.primary-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

Secondary / Ghost Button

background-color: transparent;
color: #ffffff;
border: none;
border-radius: 50%; /* circular for icon buttons, 14px for text buttons */
padding: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", sans-serif;
font-size: 16px;
font-weight: 400;
transition: background-color 0.2s;
cursor: pointer;
}
/* Hover */
.ghost-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

Outlined / Pill Button (Nav Links)

background-color: transparent;
color: #bbbbbb;
border: none;
border-radius: 9999px;
padding: 6px 14px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
/* Active state */
.nav-pill.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

Input / Search Field

background-color: transparent; /* or #212121 for textarea */
color: #ffffff;
border: none; /* or 1px solid #212121 for textarea */
border-radius: 12px; /* textarea */ or 0 (search input);
padding: 8px; /* textarea: 16px */
font-size: 16px;
font-family: inherit;
outline: none;
}
textarea {
  background-color: #212121;
  border: 1px solid #212121;
  border-radius: 12px;
  padding: 16px;
  resize: vertical;
}

Anime Card

- Background image fills container (aspect ratio ~16:9 for landscape posters)
- Border-radius: 14px (dominant radius)
- Overflow: hidden
- Position: relative (for absolute-positioned badge)
- Rating badge: positioned top-left, bg #facc15, text #000000, font-size ~12px, font-weight: 700, padding ~3px 6px, border-radius: 6px
- Hover: slight scale-up (transform + shadow transition per extracted data)
- Layout: horizontal scroll row (CSS scroll-snap likely), gap ~8-10px between cards

Modal Dialog (Update Notification)

- Position: centered viewport overlay
- Background: #ffffff (white — unique light-surface element in otherwise dark UI)
- Border-radius: 14px
- Box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px 0px (large dramatic shadow)
- Padding: ~24px internally
- Close button (×): top-right corner, subtle gray
- Header: flex row with "NEW" pink badge + black title text
- Body: bullet list item(s) in black/dark-gray
- Footer: timestamp left-aligned, CTA button right-aligned
- CTA button: bg #ff2d55 (pink), text white, rounded ~8-10px, "Понятно" label
- Width: constrained (~480px max)
- Backdrop: rgba(26, 26, 26, 0.8) semi-transparent dark overlay

Navigation Header

- Position: fixed or sticky at top
- Height: ~60-70px
- Background: transparent (blends into page bg #0a0a0a)
- Layout: flex row, space-between, items-center
- Left side:
  - Logo area (icon/text combo)
  - Horizontal nav links: ["Для вас", "Каталог", "Библиотека", "Расписание"]
  - Active link gets pill treatment (rounded bg, possibly green-tinted)
- Right side (icon buttons, all circular/bordered):
  - Notification bell (notif-bell class)
  - Random anime dice/button (random-anime-btn)
  - Search trigger (search-btn)
  - Admin shield icon (admin-btn)
  - User avatar circle (avatar class): bg rgba(255,255,255,0.1), 2px border, 50% radius
- Padding horizontal: 24px
- Mobile: collapses to hamburger + search bar (mobile-search-bar class visible in DOM)

Rating Badge (on Anime Cards)

- Position: absolute, top-left of card
- Background: #facc15 (gold)
- Color: #000000 (black text)
- Font-size: ~11-13px
- Font-weight: 700
- Padding: ~3px 6px
- Border-radius: 6px
- Content: numeric score e.g., "9.57", "8.62", "9.11", "8.48", "8.41"
- Z-index above card image

NEW Badge (inline)

- Background: #ff2d55 (hot pink)
- Color: #ffffff
- Font-size: ~12px
- Font-weight: 700
- Padding: ~4px 8px
- Border-radius: 6px (or slightly more pill-shaped)
- Text-transform: likely uppercase
- Appears adjacent to headings ("NEW Обновление сайта")

Motion & Animation

Transition Tokens

--transition-fast:   200ms ease;              /* basic hover states */
--transition-base:   300ms ease;              /* panel open/close, general */
--transition-smooth: 250ms cubic-bezier(0.16, 1, 0.3, 1);  /* transform, bouncy/spring feel */
--transition-bounce: 400ms cubic-bezier(0.16, 1, 0.3, 1);  /* more pronounced spring */

The cubic-bezier cubic-bezier(0.16, 1, 0.3, 1) is a custom spring-out curve that produces a snappy, overshooting deceleration—common in mobile-app-style interfaces. It appears on transform transitions (card hovers, panel slides).

Keyframe Animations

• heartFade — heartbeat/favorite animation for like interactions
• searchWobble — playful wobble effect when search opens or receives focus
• adminShieldPulse — pulsing glow on admin badge to indicate special role
• avatarLevelPulse — subtle pulse on user avatar for level-up or achievement
• reconnSpin / spin — continuous rotation for loading indicators
• shimmer — gradient sweep loading skeleton for content placeholders
• bellShake — shake/ring motion on notification bell for new alert
• notifSpin / notifFlash — notification panel entrance animations
• btn-spin — spinner inside button during async action
• page-in — page entrance fade or slide transition
• beam-spin — rotating beam/decoration (possibly logo ornament)
• clFadeIn / clSlideUp — comment/list item entrance animations (fade + slide up)
• bannerVideoIn — hero banner video/image reveal
• skelShimmer — skeleton loading shimmer variant
• page_loading_start — initial page load state
• dtabFadeIn — tab content crossfade
• bookmarkPop — bookmark/save action pop feedback

Interaction Patterns

• Cards elevate on hover with subtle y-translate and shadow increase (spring easing)
• Icon buttons show background-color reveal on hover (transparent → low-opacity white)
• Notification bell triggers shake animation when new notifications arrive
• Search bar expands with wobble animation
• Modals fade + scale in from center (likely using clFadeIn pattern)
• Tab content cross-fades on switch (dtabFadeIn)
• Scroll-triggered lazy loading with skeleton shimmer placeholders
• Bookmark/save actions get a "pop" bounce feedback
• Page transitions use fade+slide for SPA navigation

Layout System

Grid

• Mobile (<768px): Single column, full-width cards in horizontal scroll rows
• Tablet (768px–1024px): 2-column grid for card rows, maintained horizontal scroll for carousels
• Desktop (>1024px): Up to 4–5 columns for anime card grids, 1440px max-width content area

Header Architecture

[LOGO] [Для вас] [Каталог] [Библиотека] [Расписание]          [🔔] [🎲] [🔍] [🛡️] [Avatar]
←————————————————————————————————————————————————————————————————————————————————————————————→
                                        (transparent, blends into #0a0a0a bg)

Hero Section

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│   [Large anime poster/video background — blurred or dimmed]   │
│                                                              │
│   Провожающая в последний путь Фрирен                        │
│   ─────────────────────────────────────────                  │
│   Одержав победу над Королём демонов, отряд героя Химмела... │
│                                                              │
│   [▶ Смотреть]   [Подробнее]                                 │
│                                                              │
│   ○ ● ● ●                                                    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Content Rows (Carousel Sections)

Смотрят сейчас                                           [Все →]
Самые популярные аниме за 2 недели

┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐
│ 9.57 │  │ 8.62 │  │ 9.11 │  │ 8.48 │  │ 8.41 │
│ IMG  │  │ IMG  │  │ IMG  │  │ IMG  │  │ IMG  │
│Title │  │Title │  │Title │  │Title │  │Title │
└──────┘  └──────┘  └──────┘  └──────┘  └──────┘
  ↑ horizontal scroll (overflow-x: auto, snap points likely)

Imagery Style

• Anime key art / promotional posters: High-quality illustration artwork, typically 16:9 or 2:3 aspect ratio, vibrant saturated colors that pop against the dark background
• Hero banners: Large format poster art, often with gradient overlay (bottom-fade) for text legibility
• Character-focused framing: Close-ups, dramatic poses, typical anime marketing art style
• Rating badges overlaid: Gold corner badges on every content card showing community scores
• No photography: Purely illustrative/anime artwork throughout
• Color grading: Images appear unmodified from source material—the dark UI does the contrast work
• Image dominance: Visual content occupies 70%+ of viewport in hero; cards are image-first with minimal text below

Icon System

• Library: Custom SVG (no external icon library detected in framework analysis)
• Specific icons observed:
  • Notification bell (with dot indicator for unread count)
  • Search magnifying glass
  • Random/dice button (for random anime feature)
  • Admin shield/badge
  • User avatar placeholder (circle)
  • Close/cross (×) for modal dismiss
  • Play triangle (▶) for watch CTA
  • Chevron/right-arrow (→) for "Все" / "See all" links
  • Exclamation mark in circle (!) for bot-protection notice
  • Hamburger menu (inferred from mobile layout)
• Treatment: Stroke-based icons, monochrome white/light-gray, 20–24px typical size, aligned within circular touch targets (40–44px hit areas)

Recommended Frontend Stack

- Framework:      Next.js 15 (App Router) or Astro for static-heavy content
- Styling:        Vanilla CSS with CSS Custom Properties (matches current implementation)
                   OR Tailwind CSS v4 with extended theme tokens
- Fonts:          System font stack (no external fonts needed — native rendering is intentional)
                   Optional: Google Fonts fallback (Rubik, Golos Text detected in fontLinks)
- Animation:      CSS animations + transitions (all keyframes defined in stylesheet)
                   Framer Motion optional for complex page transitions
- Icons:          Custom SVG components (Lucide icons can approximate the shapes if needed)
- Component lib:  None (fully custom components — this is not a shadcn/Radix project)

Design Principles

1. Content Immersion — The near-black background eliminates visual noise, letting colorful anime artwork dominate the user's attention. UI chrome fades to secondary importance.
2. System-Native Performance — Using the OS font stack means zero layout shift, instant rendering, and a familiar tactile quality that feels like a native application.
3. Neon Signage Contrast — The electric green (#5cdc34) and hot pink (#ff2d55) act like neon signage against the dark environment—they're impossible to miss and guide the eye to actionable elements.
4. Springy Physicality — Transitions use custom cubic-bezier curves with overshoot (bounce), making digital interactions feel mechanical and satisfying, like pressing physical buttons.
5. Soft Geometry — Consistently rounded corners (14px default) soften the interface, counterbalancing the aggressive darkness and bold typography to create an inviting, non-intimidating atmosphere.
6. Progressive Disclosure — Information is layered: hero headlines first, then description text, then action buttons. Modals interrupt gracefully with clear dismissal. Nothing overwhelms.
7. Gamified Micro-feedback — Every interaction returns visual confirmation: bells shake, bookmarks pop, shields pulse, hearts fade. This transforms utilitarian actions into moments of delight.