Aniview Brand Design System Deep Dive

1. Brand Overview

Aniview’s visual language feels like a tech-forward media brand that sits comfortably between corporate professionalism and bold, action-driven digital advertising. This isn’t a “flat minimal” vibe—it has personality. You see it immediately in the palette: deep greys, high-contrast white, a hot red (#d9261b) that screams urgency, and a sharp yellow accent (#ffcb00) that feels like a call-to-action highlight.

There’s a tech backbone here. The site is built with Vuetify components, meaning there’s a modular approach to UI that’s consistent across breakpoints. Typography mixes Poppins for headings with Roboto everywhere else. That’s a deliberate hierarchy—Poppins brings modern geometric clarity, while Roboto handles dense UI copy and small labels without losing legibility.

Navigation, buttons, and calls to action are confident. Buttons don’t just change color—they transform, rotate, and scale on hover. This is unusual for a brand that otherwise feels corporate. It’s a deliberate choice: they want motion to signal interactivity. The hover states aren’t subtle—they’ll rotate a button -135°, drop opacity to zero, or flip a color completely.

Spacing is tight in some areas (10px padding shows up everywhere), but they also allow big 80px gaps for breathing space in hero sections. Border radii are extremely varied—4px for cookie consent buttons, 30–60px for big pill CTAs, and full 50% for dots and avatars. This is not a “one-radius-for-all” system. Corners are used to signal function: sharp for utility, round for engagement.

If you’re building for Aniview, know this: they want impact. Motion is part of the brand. Colors are strong, typography is clear, and spacing keeps the UI feeling dense in product areas but airy in marketing sections. The design system is complex, but not messy—it’s intentional.

2. Color System

2.1 Primary Colors

The closest thing to a “primary” brand color here is #d9261b – a deep, urgent red used for primary CTAs and some link states. It’s emotional, attention-grabbing, and contrasts sharply against white backgrounds. This isn’t a “safe” blue or green—it’s aggressive, which works well in the ad-tech space where “click now” is the name of the game.

Interestingly, there’s also #ffcb00 (bright yellow) that plays a secondary accent role—likely for highlights or secondary CTAs. Between red and yellow, the brand leans hard into warm, high-energy tones, balanced by neutral greys and blacks.

2.2 Complete Palette

2.3 Color Relationships

There’s a clear split: high-energy warm tones (red, yellow) for actions, cool blues for states and focus, and a stable grey/white/black set for structure. The red (#d9261b) and yellow (#ffcb00) are high-contrast against all neutrals, meeting WCAG AAA for large text on white and AA for normal text.

Blue accents (#5b7bfb, #1863dc) are used for links and focus outlines. They contrast well against white, but on grey backgrounds (#f4f4f4) they lose some punch—something to watch for in accessibility.

2.4 Usage Guide

• Do: Use #d9261b for primary CTAs and urgent actions. Pair with white for maximum legibility.
• Do: Use #5b7bfb for links; underline on hover to reinforce affordance.
• Avoid: Using #ffcb00 on large areas—it works best as an accent, not a background.
• Avoid: Overusing dark blues (#344487, #354488) outside of hover/focus—they’re functional colors, not brand colors.
• Tip: Keep text on #333333 or #444444 for body copy; use #aaaaaa for disabled states.

3. Typography

3.1 Font Families

• Poppins — Google Fonts, geometric sans-serif, used for headings. No fallbacks listed.
• Roboto — Google Fonts, neo-grotesque sans-serif, used for body, links, UI labels.
• dashicons — Icon font, small usage.
• verdana — Default system font, only in captions.

They’re mixing fonts for hierarchy: Poppins signals big statements, Roboto handles the legibility work.

3.2 Type Scale

3.3 Hierarchy

This is a dense scale with overlapping sizes—there’s no “H1/H2/H3” in the strict sense. Instead, heading size is contextual. Large hero headings hit 62px in Poppins, while UI headings drop to 24px Roboto. This flexibility means designers must choose size based on page context, not fixed levels.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints range from 320px mobile up to 1800px desktop. There’s a lot of fine-grain breakpoints (320, 352, 360, 414, 425, etc.), which suggests they’re micro-adjusting layout for device widths instead of a strict mobile/tablet/desktop model.

5. Visual Elements

Border Radius

Corners are functional here—small radii for utility, large for engagement.

Shadows

Mostly flat. Only one common shadow: rgba(0,0,0,0.15) 0px 2px 5px used 14 times. Others are rare.

Borders

Low use of borders. Common patterns:

• 1px solid #d6d6d6 for dividers
• 0px 0px 1px solid #f4f4f4 for separators
• Accent borders (e.g., 2px solid #1863dc) for focus states.

6. Components

6.1 Buttons

Cookie Reject Button (cky-btn cky-btn-reject):

• Default: transparent background, #1863dc text, 8px padding, 4px radius, 2px solid #1863dc.
• Hover: background #5e35b1, transform translateY(-6px) rotate(-135deg), opacity 0.
• Focus: outline 2px solid #1863dc.

Cookie Accept Button (cky-btn cky-btn-accept):

• Default: #ff003b background, white text, 8px padding, 4px radius, 2px solid #ff003b.
• Hover: same transform/opacity behavior as reject.

Primary CTA (elementor-button red):

• Default: #d9261b background, white text, 10px 20px padding, 30px radius.
• Hover: background #5e35b1, dashed border, complex box-shadow grid, transform rotate/translate.
• Focus: outline 2px solid #1863dc, background #3f444b.

Secondary CTA (elementor-button white):

• Default: white background, red text, 18px 24px padding, 40px radius.
• Hover: same as primary but colors inverted.

Owl Dots:

• Default: grey or black background, 50% radius.
• Hover: #5e35b1 background, white text, transform.

6.2 Links

Four styles:

• Blue (#5b7bfb), underline on hover.
• White (#ffffff), underline on hover.
• Red (#d9261b), underline on hover.
• Black (#000000), underline on hover.

6.3 Forms

No text input styles extracted—likely handled by Vuetify defaults.

6.4 Cards

No explicit card data, but spacing and shadows suggest flat white surfaces with small radii.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-grey-1: #808291;
  --color-grey-2: #333333;
  --color-yellow-accent: #ffcb00;
  --color-white: #ffffff;
  --color-grey-3: #444444;
  --color-grey-4: #aaaaaa;
  --color-red-primary: #d9261b;
  --color-black: #000000;
  --color-blue-link: #5b7bfb;
  --color-grey-light: #f4f4f4;
  --color-grey-5: #9daab2;
  --color-blue-dark-1: #344487;
  --color-blue-dark-2: #354488;
  --color-blue-bright: #1863dc;

  /* Typography */
  --font-poppins: 'Poppins', sans-serif;
  --font-roboto: 'Roboto', sans-serif;
  --font-dashicons: 'dashicons';
  --font-verdana: 'Verdana', sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-46: 46px;
  --space-80: 80px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-30: 30px;
  --radius-40: 40px;
  --radius-50: 50px;
  --radius-60: 60px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.15) 0px 2px 5px 0px;
}

8. AI Coding Assistant Prompt

# Aniview Design System Specification

You are an Aniview design expert. Build UIs matching their visual language exactly.

## Brand Context
Aniview’s design is bold, high-energy, and motion-driven. Colors are strong, typography is modern and clear, spacing is tight in product UI but airy in marketing. Hover states use rotation and opacity changes to signal interactivity.

## Color Palette
- Neutral Grey 1: #808291 — icons, header text
- Neutral Grey 2: #333333 — body text
- Accent Yellow: #ffcb00 — highlights, CTA accents
- White: #ffffff — backgrounds
- Neutral Grey 3: #444444 — secondary text
- Neutral Grey 4: #aaaaaa — disabled states
- Primary Red: #d9261b — primary CTAs
- Black: #000000 — text, icons
- Accent Blue: #5b7bfb — links
- Light Grey: #f4f4f4 — dividers
- Neutral Grey 5: #9daab2 — secondary UI text
- Dark Blue 1: #344487 — hover/focus accents
- Dark Blue 2: #354488 — hover/focus accents
- Bright Blue: #1863dc — focus outlines, borders

## Typography
Fonts:
- Headings: 'Poppins', sans-serif
- Body/UI: 'Roboto', sans-serif
- Icons: 'dashicons'
- Captions: 'Verdana'

Type Scale:
| Element | Font | Size | Weight | Line Height | Use |
|---------|------|------|--------|-------------|-----|
| H1 Hero | Poppins | 62px | 700 | 1.03 | Hero titles |
| H1 UI   | Roboto | 48px | 700 | 1.00 | Section titles |
| CTA     | Poppins | 24px | 700 | 1.00 | Button text |
| Body    | Roboto | 16px | 400 | 1.70 | Paragraphs |
| Caption | Roboto | 14px | 400 | 1.71 | Meta info |

## Spacing & Grid
Base: 8px grid.
Scale: 4px, 8px, 10px, 12px, 15px, 20px, 30px, 46px, 80px.
Map:
- Buttons: 8px–20px padding
- Cards: 15px padding
- Sections: 20px–80px gaps

## Border Radius
- sm: 4px — small buttons
- md: 5px — cards
- lg: 30px–40px — pill CTAs
- xl: 60px — images
- full: 50% — dots, avatars

## Shadows & Depth
- Soft shadow: rgba(0,0,0,0.15) 0px 2px 5px
- Limited use; mostly flat surfaces.

## Component Specifications

### Primary Button (Red CTA)
Default:
- background: #d9261b
- color: #ffffff
- padding: 10px 20px
- border-radius: 30px
- border: none
Hover:
- background: #5e35b1
- border: 1px dashed #c0392b
- transform: translateY(-6px) rotate(-135deg)
Focus:
- outline: 2px solid #1863dc
Active:
- background: transparent
- color: #1863dc

### Secondary Button (White CTA)
Default:
- background: #ffffff
- color: #d9261b
- padding: 18px 24px
- border-radius: 40px
Hover/Focus same as primary.

### Cookie Consent Buttons
Reject:
- transparent bg, #1863dc text, 4px radius, 2px solid #1863dc
Accept:
- #ff003b bg, white text, 4px radius, 2px solid #ff003b

### Navigation Links
Default:
- color: #5b7bfb (primary style), no underline
Hover:
- underline, color: #eeeeee

## Layout & Responsive Rules
Breakpoints: 320px, 360px, 414px, 480px, 768px, 1024px, 1200px, 1366px, 1600px.
Container widths adjust fluidly; no fixed max in data.

## Interaction Rules
- Hover transforms: translateY(-6px) rotate(-135deg)
- Focus outline: 2px solid #1863dc
- Transition: 150ms ease on state changes

## DO List
- Use only palette colors
- Maintain 8px grid
- Poppins for headings, Roboto for body
- Use large radii for CTAs, small for utility
- Apply hover transforms to interactive elements

## DON'T List
- Don’t introduce new colors
- Don’t mix sharp and rounded corners within same component
- Avoid heavy shadows—use borders or light shadows
- Don’t skip hover/focus states on interactive elements

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #d9261b;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #5e35b1;
  transform: translateY(-6px) rotate(-135deg);
}
.btn-primary:focus {
  outline: 2px solid #1863dc;
}

Secondary Button

.btn-secondary {
  background: #ffffff;
  color: #d9261b;
  padding: 18px 24px;
  border-radius: 40px;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
}

Link

a {
  color: #5b7bfb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #eeeeee;
}

---

## 9. Summary

**TL;DR** — Aniview’s design is bold, motion-heavy, and built on a clear separation of functional blues and high-energy reds/yellows. Typography mixes geometric Poppins for impact with legible Roboto for UI. Spacing follows an 8px grid, but radius values vary wildly to signal function. Hover states are aggressive—they want you to notice interaction.

**Brand Keywords**:
- motion-driven
- bold-tech
- high-energy
- modular-responsive
- color-confident