# Avenged Sevenfold — Design System
> Official band website featuring dual-experience navigation between legacy and Web3 portals.
- **Canonical:** https://uiuxskills.com/library/avenged-sevenfold
- **Source:** https://www.avengedsevenfold.com/
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-06-14T04:18:46.660Z

---

---
version: alpha
name: Avenged Sevenfold
tagline: Web 2.0 Experience vs Web 3.0 Experience
description: >-
  Official website of the heavy metal band Avenged Sevenfold, featuring a stark contrast between
  classic gothic Web 2.0 and psychedelic Web 3.0 experiences.
tone: rebellious, dark, energetic, gothic
color-scheme: dark
colors:
  primary: "#D4C2AA"
  secondary: "#BD0000"
  background: "#1D1915"
  surface: "#D4C2AA"
  surface-dim: "#12100E"
  on-primary: "#1D1915"
  on-surface: "#EEDEC9"
  outline: "#BD0000"
  error: "#BD0000"
  accent: "#EEDEC9"
  divider: "#1D1915"
typography:
  display-lg:
    fontFamily: Underwood Champion
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Underwood Champion
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Underwood Champion
    fontSize: 28px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0.0em
  headline-md:
    fontFamily: Underwood Champion
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0.0em
  headline-sm:
    fontFamily: Underwood Champion
    fontSize: 20px
    fontWeight: 700
    lineHeight: "1.4"
    letterSpacing: 0.01em
  body-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0.0em
  body-sm:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0.01em
  label-md:
    fontFamily: Underwood Champion
    fontSize: 14px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Underwood Champion
    fontSize: 12px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: auto
    borderColor: "{colors.background}"
    outlineOffset: 0px
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: auto
    borderColor: "{colors.secondary}"
    outlineOffset: 0px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: auto
    borderColor: "{colors.primary}"
    outlineOffset: 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.divider}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.divider}"
  input-field:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.accent}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.accent}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.accent}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 2px 4px rgba(0,0,0,0.30)
  md: 0 6px 12px rgba(0,0,0,0.35)
  lg: 0 12px 24px rgba(0,0,0,0.40)
---

## Overview

The visual identity of Avenged Sevenfold is rooted in heavy metal culture, delivering a high-contrast, dark, and gritty aesthetic. It juxtaposes a classic, hand-drawn gothic Web 2.0 style against a vibrant, psychedelic Web 3.0 digital landscape. The resulting atmosphere is rebellious, dark, and highly energetic, designed to provoke an immediate, visceral response.

## Colors

The color strategy leverages a stark, high-contrast palette that emphasizes the tension between gothic grit and dark digital spaces. It pairs textured parchment tones with deep charcoal blacks and high-impact blood red accents to establish an aggressive, raw hierarchy.

* `{colors.primary}` (#D4C2AA): Classic parchment tan used as the primary background for classic gothic layouts and light-themed containers.
* `{colors.secondary}` (#BD0000): Deep blood red used exclusively for high-impact accents, hover states, and error indicators.
* `{colors.background}` (#1D1915): Dark charcoal black used as the main background for the overall page and dark mode containers.
* `{colors.surface}` (#D4C2AA): Parchment surface color used for cards and content containers in the light/classic theme.
* `{colors.surface-dim}` (inferred) (#12100E): Ultra-dark charcoal used for input fields and dark container surfaces.
* `{colors.on-primary}` (#1D1915): Dark charcoal text color used on top of the primary parchment background for maximum readability.
* `{colors.on-surface}` (#EEDEC9): Light cream/parchment text color used on top of dark surfaces.
* `{colors.outline}` (inferred) (#BD0000): Blood red outline color used for borders and interactive focus states.
* `{colors.error}` (#BD0000): Blood red used to denote errors or destructive actions, matching the band's aggressive aesthetic.
* `{colors.accent}` (#EEDEC9): A lighter cream/parchment color used for subtle highlights and secondary text links.
* `{colors.divider}` (inferred) (#1D1915): Dark charcoal divider color used to separate content blocks on parchment surfaces.

## Typography

Typography is split between the gritty, typewriter-style "Underwood Champion" for display and label elements, and the highly readable "Roboto" sans-serif for body copy. This pairing reinforces the industrial, analog-grunge aesthetic while maintaining legibility.

* `{typography.display-lg}` (inferred): Large typewriter-style heading in Underwood Champion for massive, high-impact titles.
* `{typography.display-md}` (inferred): Medium typewriter-style heading in Underwood Champion for secondary section headers.
* `{typography.headline-lg}` (inferred): Large headline in Underwood Champion used for prominent content titles.
* `{typography.headline-md}` (inferred): Standard headline in Underwood Champion for content block titles.
* `{typography.headline-sm}` (inferred): Small headline in Underwood Champion for minor card titles and subheadings.
* `{typography.body-md}`: Standard body copy in Roboto for paragraphs and general readable text.
* `{typography.body-sm}` (inferred): Small body copy in Roboto for secondary descriptions and metadata.
* `{typography.label-md}` (inferred): Typewriter-style label in Underwood Champion for primary buttons and navigation links.
* `{typography.label-sm}` (inferred): Small typewriter-style label in Underwood Champion for badges and tags.

## Layout

* The layout is built around a dramatic split-screen hero section that forces a choice between two distinct digital experiences, following a top-to-bottom section order of `hero` to `footer`.
* It utilizes a raw, unconstrained grid with heavy black borders and organic, torn-edge masking to separate content blocks.
* Spacing is tight and aggressive, prioritizing content density and visual impact over clean whitespace, utilizing a scale ranging from `{spacing.xs}` to `{spacing.2xl}`.
* On mobile viewports, the split-screen layout collapses and stacks vertically, turning the side-by-side experience into a sequential scroll with touch-friendly, full-width tap targets.

## Elevation & Depth

Depth is conveyed through high-contrast color layering and heavy, dark drop shadows rather than soft modern gradients. All elevation levels are inferred, prioritizing a flat, textured appearance where elevation is used sparingly to make elements pop against the solid black background.

* `elevation.sm` (inferred): Used for subtle card lift and small interactive elements.
* `elevation.md` (inferred): Applied to dropdowns, popovers, and mid-level interactive containers.
* `elevation.lg` (inferred): Reserved for high-impact floating cards, modals, and drawer overlays to stand out against `{colors.background}`.

## Shapes

The brand rejects modern, highly rounded corners in favor of sharp, industrial lines. Primary interactive components and container elements utilize `{rounded.sm}` (0px) to maintain a raw, heavy metal aesthetic.

Subtle rounding is reserved for specific utility elements, scaling up to `{rounded.md}` (2px), `{rounded.lg}` (4px), and `{rounded.xl}` (8px) only when absolutely necessary for structural definition. Badges and tags use `{rounded.full}` to create pill-shaped elements that contrast sharply against the otherwise rigid, square-edged layout.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary

The primary button is a sharp-edged, solid block utilizing `{colors.background}` for its background and `{colors.accent}` for its typewriter-style text. It features a border-radius of `{rounded.sm}` (0px) and padding of 12px 24px. Use this component for the main call-to-action paths, such as selecting a primary digital experience.

### button-primary-hover

The hover state of the primary button transitions the background and border color to `{colors.secondary}` while maintaining `{colors.accent}` text. This high-impact color shift provides immediate visual feedback. Use this state transition to indicate active user engagement on primary buttons.

### button-secondary

The secondary button features a transparent background with a border and text color set to `{colors.primary}`. It maintains the sharp `{rounded.sm}` (0px) corners and typewriter-style label. Use this for secondary actions or alternative choices that should not compete with the primary call-to-action.

### card

The standard card container uses a solid `{colors.surface}` background with `{colors.on-primary}` text and a border defined by `{colors.divider}`. It features sharp `{rounded.sm}` (0px) corners and `{spacing.lg}` (24px) padding. Use this to group related content blocks in classic, parchment-themed layouts.

### card-elevated

The elevated card shares the same visual anatomy as the standard card, utilizing `{colors.surface}` and `{rounded.sm}` corners, but incorporates a heavy drop shadow. Use this component when a content block needs to visually float above the background to draw user attention.

### input-field

The input field is built with a dark `{colors.surface-dim}` background, `{colors.on-surface}` text, and a `{colors.outline}` border. It features sharp `{rounded.sm}` (0px) corners and `{spacing.md}` (16px) horizontal padding. Use this for all text inputs, search bars, and form fields.

### input-field-focus

Upon receiving focus, the input field's border transitions to `{colors.secondary}` to provide a strong, aggressive visual indicator. The background and text remain unchanged to maintain readability. Use this state to guide the user's active input.

### link

The text link uses `{colors.accent}` color paired with `{typography.body-md}`. It is designed to blend seamlessly into paragraph text while remaining distinguishable. Use this for inline navigation and secondary text redirects.

### link-hover

When hovered, the link transitions to `{colors.secondary}` to signal interactivity. This transition should occur rapidly to match the energetic tone of the brand. Use this state to provide hover feedback for all inline text links.

### badge

The standard badge is a small, pill-shaped indicator utilizing `{colors.secondary}` for the background and `{colors.accent}` for the text. It uses `{rounded.full}` and `{typography.label-sm}` to stand out. Use this to highlight new content, tags, or status updates.

### badge-error

The error badge uses `{colors.error}` for its background and `{colors.accent}` for its text, maintaining a pill-shaped `{rounded.full}` geometry. Use this to denote system errors, destructive actions, or critical alerts.

### divider

The divider is a thin, 1px horizontal line utilizing `{colors.divider}`. It is used to separate content blocks on light parchment surfaces. Use this to establish visual hierarchy without adding unnecessary whitespace.

### swatch-outline

The swatch outline is a small, square utility element measuring 32px by 32px with `{rounded.sm}` corners and a `{colors.outline}` background. Use this for color swatches, status indicators, or small decorative accents.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` as the primary background for classic gothic layouts to maintain the parchment aesthetic. | Avoid using soft, subtle pastel colors instead of the high-contrast `{colors.primary}` and `{colors.background}` palette. |
| Apply `{colors.secondary}` exclusively for high-impact accents, hover states, and error indicators. | Do not use `{colors.secondary}` as a dominant background color for large sections or containers. |
| Keep button corners sharp using `{rounded.sm}` to maintain the industrial, raw metal aesthetic. | Never use modern, highly rounded corners like `{rounded.xl}` on primary interactive components like `{components.button-primary}`. |
| Use `{typography.display-lg}` with the typewriter-style font for main headings to establish a rebellious tone. | Do not use clean, geometric sans-serif fonts for display headings; always default to the typewriter style of `{typography.display-lg}`. |
| Ensure high contrast by pairing `{colors.on-primary}` text with `{colors.primary}` backgrounds. | Never pair `{colors.accent}` text with light backgrounds without sufficient contrast. |
| Apply heavy, high-opacity shadows like `{elevation.lg}` to match the dark, high-contrast aesthetic. | Do not apply light, subtle drop shadows like `{elevation.sm}` to primary floating containers. |
| Use `{colors.surface-dim}` for input fields to keep them visually integrated with dark containers. | Do not use `{colors.surface}` for input fields in dark-themed layouts. |
| Use `{rounded.full}` exclusively on `{components.badge}` and `{components.badge-error}` to contrast with the rigid grid. | Do not apply `{rounded.full}` to structural containers or `{components.card}` elements. |

## Content Style

* **CTA Style**: Call-to-action labels are direct, experiential, and simple. They use short, declarative phrases such as "Web 2.0 Experience" or "Web 3.0 Experience" to force a clear choice, avoiding verbose or generic action verbs.
* **Heading Tone**: Headlines are mysterious, direct, and rebellious. They focus on the choice of digital medium and the contrast between eras, establishing a bold, uncompromising presence.
* **Copy Density**: Text layout is extremely sparse on landing pages, relying almost entirely on visual storytelling and direct action-oriented links. Paragraphs are kept to a minimum, allowing the raw imagery and stark typography to dominate the screen.

## Imagery & Icons

The imagery style is defined by a stark, high-contrast split treatment. One side features hand-drawn, high-contrast black ink illustrations of the iconic "Deathbat" skull on a textured parchment background. The opposing side features a highly detailed, colorful, psychedelic isometric illustration of a surreal landscape filled with cartoonish skulls, mushrooms, and rainbows. Icons and logos must use a raw, hand-drawn, or distressed stroke style to align with the tactile, analog-grunge aesthetic, avoiding clean vector lines or modern glossy finishes.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Avenged Sevenfold, a rebellious, dark, gothic heavy metal brand with high-contrast, industrial energy. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.sm}` — never hardcode hex values, font names, or pixel sizes.
2. Render only the components listed under `components:` (`button-primary`, `card`, `input-field`, etc.). Do not invent variants the spec doesn't define.
3. Follow the Layout notes (dense split-screen grid, heavy black borders, torn-edge masks) and Shapes notes (sharp 0px radii on primary components) for every structural decision.
4. Treat the Do's and Don'ts as authoritative. If a user request conflicts — e.g. asking for rounded primary buttons or pastel tones — surface the conflict before proceeding.
5. When the spec defines component states (hover, focus, disabled), always include them. `{colors.secondary}` drives hover and focus; `{colors.outline}` defines focus rings.

## Output contract

**Must:**
- Use tokens by name for every color, type, spacing, and radius decision.
- Cover hover, focus, and disabled states for all interactive components per the spec.
- Apply `{rounded.sm}` (0px) to `button-primary` and all primary containers; never soften them.
- Set all display headings in `{typography.display-lg}` or `{typography.display-md}`; body copy in `{typography.body-md}`.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values — keep density tight and aggressive.
- Maintain contrast by pairing `{colors.on-primary}` on `{colors.primary}` and `{colors.on-surface}` on dark surfaces.

**Must NOT:**
- Invent colors, font scales, or radius values absent from the spec.
- Apply `{rounded.xl}` or `{rounded.full}` to buttons or primary containers.
- Use generic default utilities when a brand token exists.
- Add emoji, filler copy, or marketing language.
- Rewrite button labels, headings, navigation items, or any existing page copy.
- Alter page sections, routes, or navigation structure as a side effect of styling.

## When in doubt
- If the spec doesn't define a value, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.background}`; for text on dark surfaces use `{colors.on-surface}`; for the headline action use `{colors.secondary}`.
- Tokens marked "(inferred)" are visual approximations; defer to any authoritative theme file if one exists.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.