6 7

Generated Nov 5, 2026

DESIGN.md for gta6vicecityphonk.netlify.app

gta6vicecityphonk.netlify.app15 colors5 componentsBebas Neue + Barlow Condensed

Remix

2 screenshots captured· gta6vicecityphonk.netlify.app

1 / 2 · Vice City · GTA VI · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Gta6vicecityphonk
description: |
  The Vice City design system embraces a neon-soaked, high-contrast aesthetic
  rooted in 1980s Miami noir and contemporary gaming cinematic language. The
  visual personality is bold, immersive, and cinematic, with deep shadows,
  vibrant accent planes, and typography that commands attention. The system
  leverages layered gradients and transparent overlays to create depth without
  relying on traditional material shadows, establishing a moody, after-hours
  atmosphere punctuated by hot accent colors (magenta, cyan, and warm peachy
  tones). Every element is designed to evoke the tension and style of an
  open-world crime narrative—urgent, sleek, and visually dramatic.
source:
  url: "https://gta6vicecityphonk.netlify.app/"
  pagesAnalyzed: 1
  extractedAt: 2026-11-05
  tokensMeasured: true
colors:
  primary: "#1B1624"
  link: "#C6A9CF"
  canvas: "#0C0C14"
  ink: "#FFFFFF"
  body: "#FFF0F7"
  muted: "#F1D3E0"
  faint: "#CFB6D4"
  hairline: "#B5ABBF"
  accent-1: "#FFE5D5"
  accent-2: "#0000EE"
  accent-3: "#E5B3CB"
  accent-4: "#BC8EAB"
  accent-5: "#A49BAE"
  accent-6: "#E4C7A1"
  neutral-1: "#AAA6B8"
typography:
  display-xxl:
    fontFamily: "Bebas Neue"
    fontSize: 120px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: 7.2px
  display-xl:
    fontFamily: "Barlow Condensed"
    fontSize: 104px
    fontWeight: 900
    lineHeight: 0.94
    letterSpacing: -3.64px
  display-lg:
    fontFamily: "Bebas Neue"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: 3.84px
    textTransform: uppercase
  display-md:
    fontFamily: "Bebas Neue"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: 3.2px
    textTransform: uppercase
  body-xl:
    fontFamily: "Bebas Neue"
    fontSize: 22px
    fontWeight: 400
    letterSpacing: 2.2px
  body-lg:
    fontFamily: Barlow
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0px
  body-md:
    fontFamily: Barlow
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: Barlow
    fontSize: 14px
    fontWeight: 600
    letterSpacing: 0px
  body-xs:
    fontFamily: "Barlow Condensed"
    fontSize: 13px
    fontWeight: 600
    letterSpacing: 3.9px
    textTransform: uppercase
  body-xs-2:
    fontFamily: Barlow
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  button-xl:
    fontFamily: "Barlow Condensed"
    fontSize: 30px
    fontWeight: 900
    letterSpacing: 0px
  button-lg:
    fontFamily: "Bebas Neue"
    fontSize: 25px
    fontWeight: 400
    letterSpacing: 2px
  button-md:
    fontFamily: "Barlow Condensed"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  button-sm:
    fontFamily: "Barlow Condensed"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 2.42px
    textTransform: uppercase
  button-xs:
    fontFamily: "Barlow Condensed"
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0.72px
  button-xs-uppercase:
    fontFamily: "Barlow Condensed"
    fontSize: 9px
    fontWeight: 700
    letterSpacing: 1.62px
    textTransform: uppercase
  caption-lg:
    fontFamily: "Barlow Condensed"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 2.64px
    textTransform: uppercase
  caption-lg-strong:
    fontFamily: "Barlow Condensed"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 1.8px
    textTransform: uppercase
  caption-md:
    fontFamily: "Barlow Condensed"
    fontSize: 11px
    fontWeight: 600
    letterSpacing: 1.65px
  caption-md-strong:
    fontFamily: "Barlow Condensed"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 5.5px
    textTransform: uppercase
  caption-sm:
    fontFamily: "Barlow Condensed"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 3px
  caption-xs:
    fontFamily: "Barlow Condensed"
    fontSize: 9px
    fontWeight: 600
    letterSpacing: 1.8px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 4px
  sm: 10px
  md: 12px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 36px
  section: 40px
  band: 48px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(5, 5, 11, 0.15) 0px 8px 25px 0px"
elevationStrategy: single-tier
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#121112"
    textMuted: "#747374"
    border: "#D8D8D8"
    accent: "#1B1624"
    accentFg: "#FFFFFF"
    focusRing: "#1B1624"
    elevation: shadow
  dark:
    bg: "#0C0C14"
    surface: "#0C0C13"
    surfaceRaised: "#1F1F26"
    text: "#FFFFFF"
    textMuted: "#FFF0F7"
    border: "#B5ABBF"
    accent: "#705C96"
    accentFg: "#FFFFFF"
    focusRing: "#1B1624"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(130deg, rgba(27, 26, 37, 0.55), rgba(16, 16, 23, 0.66))"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(100deg, rgb(255, 125, 154) 0%, rgb(238, 89, 168) 48%, rgb(179, 101, 230) 100%)"
    filter: "drop-shadow(rgba(211, 74, 158, 0.125) 0px 3px 18px)"
  - context: section
    kind: linear
    value: "linear-gradient(to top, rgba(13, 11, 9, 0.85) 0%, rgba(0, 0, 0, 0) 55%)"
  - context: section
    kind: radial
    value: "radial-gradient(at 50% 0%, rgb(25, 19, 33), rgb(12, 12, 20) 80%)"
components:
  button-outline:
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.17)"
    height: 78px
    padding: "12px 18px 12px 18px"
    fontSize: 13px
    boxShadow: "rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(5, 5, 11, 0.15) 0px 8px 25px 0px"
    fontFamily: Barlow
    fontWeight: 600
    rounded: "{rounded.sm}"
  card:
    textColor: "rgb(249, 243, 245)"
    border: "1px solid rgba(255, 255, 255, 0.13)"
    padding: "20px 20px 20px 20px"
    fontSize: 16px
    fontFamily: Barlow
    fontWeight: 400
    rounded: "{rounded.md}"
    backgroundColor: "rgb(21, 20, 31)"
  card-2:
    textColor: "rgb(249, 243, 245)"
    border: "1px solid rgba(182, 118, 163, 0.33)"
    padding: "20px 20px 20px 20px"
    fontSize: 16px
    fontFamily: Barlow
    fontWeight: 400
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  badge-text:
    typography: "{typography.button-xs-uppercase}"
    textColor: "{colors.ink}"
    height: 21px
    padding: "5px 8px 5px 8px"
    rounded: "{rounded.xs}"
  footer:
    textColor: "rgb(249, 243, 245)"
    border: "1px solid rgba(255, 255, 255, 0.05)"
    padding: "36px 60px 36px 60px"
    fontSize: 16px
    fontFamily: Barlow
    fontWeight: 400
    backgroundColor: "rgb(9, 9, 15)"
  link:
    textColor: "{colors.accent-2}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0.9) 0px 40px 120px 0px"
    fontFamily: Barlow
    fontWeight: 400
    rounded: "{rounded.md}"
  link-sm:
    typography: "{typography.body-sm}"
    textColor: "rgba(255, 255, 255, 0.55)"
    padding: "18px 2px 18px 2px"
states:
  nav-hover:
    target: nav
    state: hover
    textColor: "{colors.ink}"
  button-hover:
    target: button
    state: hover
    textColor: "{colors.ink}"
  link-hover:
    target: link
    state: hover
    textDecoration: underline
  other-hover:
    target: other
    state: hover
    transform: "scale(1.02)"
  card-hover:
    target: card
    state: hover
    transform: "scale(1.05)"
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "rgb(243, 191, 206) solid 2px"
    outlineColor: "rgb(243, 191, 206)"
    outlineWidth: 2px
  button-active:
    target: button
    state: active
    transform: "translateY(1px)"
  input-focus:
    target: input
    state: focus
    outline: "rgba(180, 140, 176, 0.17) solid 2px"
    borderColor: "rgb(224, 178, 207)"
    outlineColor: "rgba(180, 140, 176, 0.17)"
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    opacity: 0.75
  input-disabled:
    target: input
    state: disabled
    opacity: 0.7
  other-active:
    target: other
    state: active
    transform: "translateY(0px)"
breakpoints:
  - width: 375
    containerWidth: 331
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 20
  - width: 768
    containerWidth: 716
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 69
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 972
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 92
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1280
    containerWidth: 1228
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 115
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1440
    containerWidth: 1280
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 120
    bodyPx: 16
    sectionPaddingX: 24
coverage:
  statesFound: 36
  gradientsFound: 7
  rolesUnassigned: 7
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Grand Theft Auto VI

1. Visual Theme & Atmosphere

The Vice City design system embraces a neon-soaked, high-contrast aesthetic rooted in 1980s Miami noir and contemporary gaming cinematic language. The visual personality is bold, immersive, and cinematic, with deep shadows, vibrant accent planes, and typography that commands attention. The system leverages layered gradients and transparent overlays to create depth without relying on traditional material shadows, establishing a moody, after-hours atmosphere punctuated by hot accent colors (magenta, cyan, and warm peachy tones). Every element is designed to evoke the tension and style of an open-world crime narrative—urgent, sleek, and visually dramatic.

Key Characteristics

Deep, near-black canvas backgrounds with high-contrast luminous text
Neon-inspired accent palette drawn from retro-futuristic gaming aesthetics
Condensed, geometric sans-serif typefaces (Barlow Condensed, Bebas Neue) for maximum impact
Precise letter-spacing and weight hierarchy to control visual rhythm
Transparent borders and subtle color-blocking for depth; minimal use of box-shadows
Gradient overlays and vignettes to simulate cinematic framing
Rounded corners applied sparingly (buttons only); sharp edges dominate
Hover states emphasize lift (subtle translate) and glow effects over color inversion

2. Color Palette & Roles

Primary

Canvas ({colors.canvas} — #0C0C14): Default page background; deep near-black establishing the noir tone
Primary / Brand ({colors.primary} — #1B1624): Primary CTA fills, brand accent, and active states; slightly warmer than canvas for subtle depth
Ink ({colors.ink} — #FFFFFF): Headings, primary text, and critical callouts; maximum contrast

Neutral Scale

Body ({colors.body} — #FFF0F7): Body copy and extended text passages; warm white with subtle pink undertone
Muted ({colors.muted} — #F1D3E0): Captions, secondary text, and supplementary information
Faint ({colors.faint} — #CFB6D4): Tertiary text, placeholder copy, and de-emphasized content
Hairline ({colors.hairline} — #B5ABBF): 1px borders, dividers, and subtle structural lines
Neutral-1 ({colors.neutral-1} — #AAA6B8): Additional neutral tone for edge cases

Interactive & Links

Link ({colors.link} — #C6A9CF): Inline hyperlinks and interactive affordances; muted mauve

Accent Colors (Decorative)

Accent 1 ({colors.accent-1} — #FFE5D5): Decorative warm peach; used in gradient overlays and thematic accents
Accent 2 ({colors.accent-2} — #0000EE): Decorative pure blue; occasional accent plane or highlight
Accent 3 ({colors.accent-3} — #E5B3CB): Decorative mauve-pink; thematic gradient component
Accent 4 ({colors.accent-4} — #BC8EAB): Decorative dusty rose; gradient and overlay role
Accent 5 ({colors.accent-5} — #A49BAE): Decorative muted purple; subtle accent or background tint
Accent 6 ({colors.accent-6} — #E4C7A1): Decorative warm tan; gradient highlight or warm accent plane

3. Typography Rules

Font Family

Primary: Barlow Condensed Fallback stack: Barlow Condensed, Barlow, sans-serif Used for: Display headings, buttons, captions, and compressed UI text. Provides extreme visual compression and impact.

Secondary: Bebas Neue Fallback stack: Bebas Neue, sans-serif Used for: Extra-large display sizes, hero headings, and theatrical callouts. Maximum letter-spacing and presence.

Tertiary: Barlow Fallback stack: Barlow, sans-serif Used for: Body text, extended paragraphs, links, and UI labels. Optimal readability and measured pace.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Bebas Neue	120px	700	0.9	7.2px	Hero title; maximum compression and presence
Display LG	Bebas Neue	96px	700	0.9	3.84px	Large display; uppercase, bold spacing
Display MD	Bebas Neue	80px	700	0.9	3.2px	Medium display; uppercase
Display XL	Barlow Condensed	104px	900	0.94	-3.64px	Extra-large heading; negative tracking for compression
Button XL	Barlow Condensed	30px	900	(not measured)	0px	Large button text; high weight
Button LG	Bebas Neue	25px	400	(not measured)	2px	Large button; measured spacing
Button MD	Barlow Condensed	20px	700	1.15	0px	Medium button; balanced weight
Button SM	Barlow Condensed	11px	700	(not measured)	2.42px	Small button; uppercase variant with tracking
Button XS	Barlow Condensed	9px	700	1.15	0.72px	Extra-small button
Button XS Uppercase	Barlow Condensed	9px	700	(not measured)	1.62px	Extra-small uppercase button
Body XL	Bebas Neue	22px	400	(not measured)	2.2px	Large body text
Body LG	Barlow	16px	400	1.85	0px	Primary body paragraph text
Body MD	Barlow	15px	400	1.5	0px	Standard body text
Body SM	Barlow	14px	600	(not measured)	0px	Secondary body; medium weight
Body XS	Barlow	12px	400	1.4	0px	Small body text
Body XS Strong	Barlow Condensed	13px	600	(not measured)	3.9px	Small uppercase label; tracked
Caption LG	Barlow Condensed	12px	400	(not measured)	2.64px	Large caption; uppercase
Caption LG Strong	Barlow Condensed	12px	700	(not measured)	3.6px or 1.8px	Large caption bold variant; two tracking values observed
Caption MD	Barlow Condensed	11px	600	(not measured)	1.65px	Medium caption
Caption MD Strong	Barlow Condensed	11px	700	(not measured)	5.5px	Medium caption bold; high tracking
Caption SM	Barlow Condensed	10px	400	(not measured)	1.8px or 3px	Small caption; two tracking variants observed
Caption XS	Barlow Condensed	9px	600	(not measured)	1.8px	Extra-small caption; uppercase

Principles

Condensed geometry drives all display and button typography; Barlow Condensed and Bebas Neue provide maximum visual compression
Negative letter-spacing on {typography.display-xl} (-3.64px) is intentional; it creates visual tension and uniqueness
High tracking on captions and small text (1.8px–5.5px) improves legibility at small sizes and adds rhythm
Weight hierarchy ranges from 400 (body) to 900 (display); weight differentiates role more aggressively than size alone
All-caps treatment on buttons, captions, and labels enforces UI authority and visual hierarchy
Line height is compact (0.9–1.15 on display) to maximize space efficiency and dramatic impact
Barlow as fallback for body text ensures readable, measured pacing when condensed fonts are unavailable

4. Component Stylings

Buttons

Outline Variant (Primary)

Background: rgba(0, 0, 0, 0) (transparent)
Border: 1px solid rgba(255, 255, 255, 0.17)
Text Color: rgb(255, 255, 255) ({colors.ink})
Font: Barlow, 13px, weight 600
Padding: 12px 18px
Border Radius: {rounded.sm} (10px)
Box Shadow: rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(5, 5, 11, 0.15) 0px 8px 25px 0px
Dimensions: 235px width × 78px height
Hover State:
- transform: translateY(-4px)
- box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px
- border-color: rgba(255, 255, 255, 0.55)
- background-color: rgba(40, 30, 55, 0.92)
Active State:
- transform: translateY(1px)

Cards & Containers

Default Card

Background: rgb(21, 20, 31)
Border: 1px solid rgba(255, 255, 255, 0.13)
Text Color: rgb(249, 243, 245) ({colors.body})
Font: Barlow, 16px, weight 400
Padding: 20px
Border Radius: {rounded.md} (12px)
Box Shadow: None (flat)
Dimensions: 320px width × 446px height
Hover State:
- transform: scale(1.05)
- border-color: rgb(214, 160, 194)
- background-color: rgba(255, 255, 255, 0.05)
- box-shadow: rgba(15, 9, 27, 0.314) 0px 18px 42px
- transform: translateY(-5px)

Secondary Card Variant

Background: rgb(27, 22, 36)
Border: 1px solid rgba(182, 118, 163, 0.33) (warm mauve border)
Text Color: rgb(249, 243, 245)
Font: Barlow, 16px, weight 400
Padding: 20px
Border Radius: {rounded.md} (12px)
Box Shadow: None (flat)
Dimensions: 320px width × 446px height

Inputs & Forms

Input Focus State

Outline: rgba(180, 140, 176, 0.17) solid 2px
Border Color: rgb(224, 178, 207)
Outline Color: rgba(180, 140, 176, 0.17)
Outline Width: 2px
Disabled State: opacity: 0.7

Navigation

Navigation Links

Text Color (default): rgba(255, 255, 255, 0.55) (muted white)
Font: Barlow, 14px, weight 600
Padding: 18px 2px
Background: None (transparent)
Border: None
Hover State:
- color: rgb(255, 255, 255) (full white)
- text-decoration: underline

Badges

Text Badge

Background: rgba(0, 0, 0, 0) (transparent)
Border: None
Text Color: rgb(255, 255, 255)
Font: Barlow Condensed, 9px, weight 700
Padding: 5px 8px
Border Radius: {rounded.xs} (4px)
Dimensions: 82px width × 21px height

Footer

Default Footer

Background: rgb(9, 9, 15) (slightly lighter than canvas)
Border: 1px solid rgba(255, 255, 255, 0.05) (hairline top)
Text Color: rgb(249, 243, 245)
Font: Barlow, 16px, weight 400
Padding: 36px 60px
Border Radius: {rounded.none} (0px; sharp edges)
Dimensions: Full width × 122px height

5. Layout Principles

Spacing System

The system uses a precise 4px base unit scaled logarithmically to accommodate both micro adjustments and large content sections.

{spacing.xxs} = 4px — Micro margins between adjacent text or inline elements
{spacing.xs} = 8px — Tight padding within compact components
{spacing.sm} = 12px — Small gaps between related elements
{spacing.md} = 16px — Standard padding within components and moderate gutters
{spacing.lg} = 20px — Comfortable spacing between content blocks
{spacing.xl} = 24px — Generous padding for cards and containers
{spacing.xxl} = 32px — Large section dividers
{spacing.xxxl} = 36px — Extra-large footer and major section padding
{spacing.section} = 40px — Section-to-section vertical breathing room
{spacing.band} = 48px — Large hero and full-width band spacing

Usage Context:

Buttons use {spacing.md} (16px) for internal padding
Cards use {spacing.xl} (24px) for comfortable internal spacing
Body text uses {spacing.lg} (20px) line spacing implicit in line-height values
Section margins scale with viewport, but always respect this base scale

Grid & Container

Max Width: 1280px (measured at 1440px viewport; content stops at this limit)
Column Strategy: Single-column layout across all measured breakpoints (375px–1440px)
Gutters: 20px–24px horizontal padding depending on breakpoint
Content Column Width:
- 375px viewport: 331px content
- 768px viewport: 716px content
- 1024px viewport: 972px content
- 1280px+ viewport: 1228px–1280px content

Whitespace Philosophy

Whitespace is aggressive and intentional. The design prioritizes breathing room over density:

Hero sections use {spacing.band} (48px) vertical margins to frame cinematic imagery
Body paragraphs are separated by {spacing.section} (40px) or more
Cards and containers maintain {spacing.xl} (24px) internal padding to prevent crowding
Navigation and footer use {spacing.xxxl} (36px) padding to establish visual hierarchy
Empty space between text and borders creates "negative" visual weight, enhancing legibility

Border Radius Scale

{rounded.none} = 0px — Images, badges, footer (sharp, no rounding)
{rounded.xs} = 4px — Badges; minimal, subtle rounding
{rounded.sm} = 10px — Buttons; approachable but still geometric
{rounded.md} = 12px — Cards and containers; balanced moderate rounding
{rounded.full} = 9999px — Pill-shaped elements (not observed in measured components but available in token scale)

Component Application:

Buttons: {rounded.sm} (10px) — slightly rounded for approachability
Cards: {rounded.md} (12px) — moderate rounding for soft containment
Images: {rounded.none} (0px) — sharp edges emphasize cinematic framing
Badges: {rounded.none} (0px) — minimal visual noise

Border Widths

Thin = 1px — Primary borders on cards, buttons, and inputs; hairline dividers
Medium = 2px — Secondary or accent borders; focus outlines on inputs

Component Usage:

Card borders: 1px thin
Button borders (outline variant): 1px thin
Input focus outline: 2px medium

6. Depth & Elevation

Depth is achieved primarily through color-blocking (background and border shifts) and subtle transparency gradients rather than traditional layered shadows. A single shadow tier is used for emphasis, with transform (translate) and scale animations providing perceived lift.

Level	Treatment	Use
Flat	No shadow; color block alone	Cards at rest, buttons, badges, footer
Lifted	`rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset` + `rgba(5, 5, 11, 0.15) 0px 8px 25px 0px`	Button resting state; soft inset highlight + soft drop
Elevated (Hover)	`rgba(0, 0, 0, 0.4) 0px 10px 30px`	Button hover; dramatic lift
Dramatic (Card Hover)	`rgba(15, 9, 27, 0.314) 0px 18px 42px`	Card hover; maximum perceived elevation
Vignette Overlay	`linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%)`	Hero section darkening; cinematic framing

Shadow Philosophy

The system uses a layered-micro to single-tier approach:

At-rest elements (cards, buttons) employ subtle inset highlights and barely-there drop shadows to suggest materiality without weight
Hover states introduce translate transforms (typically -3px to -5px on Y-axis) paired with increased shadow blur and spread, creating perceived lift
Vignette gradients layer on top of images and hero sections, darkening edges and focusing viewer attention toward center content
Shadows are always dark and cool-toned (rgba(0, 0, 0, 0.3–0.4)), never colored, maintaining the noir aesthetic

Opacity Levels

100% / 1.0 — Fully opaque text, icons, and primary UI elements
55% — Muted text and secondary UI affordances (rgba(255, 255, 255, 0.55))
22% — Hover state ghost button backgrounds and subtle fills (rgba(255, 255, 255, 0.22))
17% — Button outline borders and hairline accents (rgba(255, 255, 255, 0.17))
13% — Card borders; minimal visual weight (rgba(255, 255, 255, 0.13))
5% — Subtle footer borders and section dividers (rgba(255, 255, 255, 0.05))
Disabled — 0.7–0.75 opacity for inactive or restricted elements

Z-index / Layering

Observed z-index values are minimal and sparse; the site relies primarily on source order and stacking context:

Base (z-index: 1–3) — Default stacking for content, cards, and standard UI
No explicit modal, dropdown, or toast layers were measured; assume z-index increments only when necessary (e.g., modals 10+, dropdowns 5+, toasts 20+)

7. Do's and Don'ts

Do

Use Barlow Condensed for compressed UI text, buttons, and captions; its geometric form echoes the noir aesthetic
Leverage negative letter-spacing on display headings (matching the -3.64px on {typography.display-xl}) to create visual tension
Apply aggressive whitespace: section padding should never feel cramped; prioritize breathing room over density
Pair dark backgrounds ({colors.canvas}, {colors.primary}) with high-contrast ink text ({colors.ink}); maintain a minimum WCAG AA contrast ratio
Use transform: translateY() on hover states (not color inversion) to signal interactivity; lift, don't repaint
Apply rounded corners only to buttons ({rounded.sm}) and cards ({rounded.md}); keep images and badges sharp
Build gradients into hero sections; layer vignettes (linear-gradient(to top, rgba(0, 0, 0, 0.88)...)) to frame cinematic imagery
Reserve the accent palette for decorative elements and gradient overlays; don't scatter accent colors across interactive UI
Maintain border consistency: cards and buttons use 1px thin borders; focus outlines use 2px medium
Embed drop shadows sparingly: single-tier shadows only on hover; flat is the default

Don't

Don't use rounded corners on images, badges, or footer; sharp edges are the visual default
Don't invert colors on hover; use opacity shifts, translate transforms, or shadow depth instead
Don't overuse color; the system is primarily monochromatic (white, grays, black) with accent colors reserved for gradients and special emphasis
Don't apply body text in Barlow Condensed; reserve it for UI labels, buttons, and captions only
Don't use opacity below 0.55 for text; muted text should remain legible at 55%+ opacity
Don't scale or blur shadows; keep them sharp and thin at rest, increased only on hover
Don't center-align body text; use left alignment for readability unless explicitly heroic
Don't mix rounded radii (e.g., 10px buttons with 8px cards); stick to the defined scale
Don't rely on font size alone for hierarchy; weight and letter-spacing carry equal visual load
Don't place accent colors (magenta, cyan, peach) on interactive elements; reserve them for backgrounds and gradients only

8. Responsive Behavior

Breakpoints

Viewport	Breakpoint Label	Content Width	Max Content	Heading Size	Section Padding	Key Changes
375px	Mobile	331px	331px	`{typography.display-md}` (56px)	20px	Single column; compact headings; tight gutters
768px	Tablet	716px	716px	`{typography.display-md}` (69px)	24px	Increased heading scale; wider content; consistent single column
1024px	Tablet Large	972px	972px	`{typography.display-lg}` (92px)	24px	Larger headings; more breathing room; pre-max-width
1280px	Desktop	1228px	1280px	`{typography.display-xxl}` (115px)	24px	Near max-width; heroic display sizes
1440px+	Desktop XL	1280px (capped)	1280px	`{typography.display-xxl}` (120px)	24px	Max-width enforced; largest display heading

Touch Targets

Minimum height for buttons: 78px (measured on outline variant)
Minimum width for buttons: 235px (measured on primary CTA)
Card touch area: 320px × 446px (ample for tap targets)
Navigation link padding: 18px 2px (vertical padding provides comfortable tap zone)
Link focus outline: 2px solid, bright color (rgb(243, 191, 206)) for keyboard accessibility

Collapsing Strategy

Single-column layout across all breakpoints: no multi-column grid observed
Typography scales up with viewport: display headings grow from 56px (mobile) to 120px (desktop)
Padding remains consistent (20px–24px horizontal) to maintain proportion relative to viewport width
Card and button dimensions remain fixed (320px × 446px, 235px × 78px) and do not resize; instead, they center or flex within the responsive container
Section spacing ({spacing.section}, {spacing.band}) remains constant across all sizes; rhythm is maintained through typography scaling rather than spacing adjustments
No menu toggle observed across any measured breakpoint; navigation likely remains visible or is hidden via CSS at smaller sizes

9. Agent Prompt Guide

Quick Color Reference

Canvas / Background: {colors.canvas} (#0C0C14) — deep near-black base
Primary Brand / CTA Fill: {colors.primary} (#1B1624) — warm dark brown for depth
Primary Text / Headings: {colors.ink} (#FFFFFF) — full white for maximum contrast
Body Text: {colors.body} (#FFF0F7) — warm white with pink undertone
Secondary Text: {colors.muted} (#F1D3E0) — muted for captions
Tertiary Text: {colors.faint} (#CFB6D4) — further reduced for placeholder
Borders / Dividers: {colors.hairline} (#B5ABBF) — subtle 1px lines
Link Color: {colors.link} (#C6A9CF) — muted mauve for links
Accent (Decorative): {colors.accent-1} through {colors.accent-6} — reserved for gradients and thematic overlays

Iteration Guide

Start with {colors.canvas} and {colors.ink} — these form the core contrast pair for all text-on-dark layouts
Use Barlow Condensed for all UI text (buttons, captions, labels); fallback to Barlow only for body paragraphs
Apply negative letter-spacing on large display headings to match the visual compression aesthetic (e.g., -3.64px on 104px text)
Default all borders to 1px thin ({colors.hairline} at ~13–17% opacity); use 2px medium only on focus outlines
Avoid box-shadows at rest; add them only on hover via :hover state (e.g., rgba(0, 0, 0, 0.4) 0px 10px 30px)
Use transform: translateY() to signal lift on interactive hover; pair with shadow depth increase
Round only buttons ({rounded.sm} 10px) and cards ({rounded.md} 12px); keep images and badges sharp (0px)
Layer vignette gradients on hero sections to frame imagery: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, ...)
Maintain section padding at {spacing.band} (48px) for hero bands; use {spacing.section} (40px) between content blocks
Test contrast ratios with Barlow at 14px / 400 weight on {colors.body} against {colors.canvas}; ensure WCAG AA minimum (4.5:1 for normal text)

10. Known Gaps

No semantic status colors (error, success, warning, info) are defined or measured on the site; assume these are not yet part of the design system
Seven decorative accent colors ({colors.accent-1} through {colors.accent-6}, plus {colors.accent-2}) were extracted but have no measured interactive role; they appear only in gradient overlays and thematic backgrounds, not on buttons or alerts
Hover and active interaction states were extracted from stylesheet analysis, but the full breadth of interactions (focus-visible, disabled, loading, error states) is not comprehensive; assume additional states exist in production that were not captured
Animation and transition durations are not documented in this extraction; transform and box-shadow animations are noted but timing is unknown
Dark mode / theme switching was not observed; the extracted palette represents the measured live site only
Surfaces behind authentication were not visited; logged-in experiences or admin panels are not covered
Responsive behavior below 375px was not measured; mobile breakpoints below this width are extrapolated
Accessibility features (ARIA labels, focus management) are not documented; assume they exist but were not captured by visual extraction
Opacity values for interactive states (e.g., disabled at 0.7) were observed but a complete disabled / loading / error state palette is not documented
Line-height measurements for many caption and button roles were not captured (marked "not measured" in typography table); production use may vary
Interaction event delays (e.g., hover delay, debounce) are not specified
Print styles or alternative media queries are not documented

Token Definitions

colors:
  primary: "#1B1624"
  link: "#C6A9CF"
  accent-1: "#FFE5D5"
  accent-2: "#0000EE"
  accent-3: "#E5B3CB"
  accent-4: "#BC8EAB"
  accent-5: "#A49BAE"
  accent-6: "#E4C7A1"
  canvas: "#0C0C14"
  ink: "#FFFFFF"
  body: "#FFF0F7"
  muted: "#F1D3E0"
  faint: "#CFB6D4"
  hairline: "#B5ABBF"
  neutral-1: "#AAA6B8"

typography:
  display-xxl:
    font-family: "Bebas Neue"
    font-size: "120px"
    font-weight: 700
    line-height: 0.9
    letter-spacing: "7.2px"
  display-lg:
    font-family: "Bebas Neue"
    font-size: "96px"
    font-weight: 700
    line-height: 0.9
    letter-spacing: "3.84px"
    text-transform: uppercase
  display-md:
    font-family: "Bebas Neue"
    font-size: "80px"
    font-weight: 700
    line-height: 0.9
    letter-spacing: "3.2px"
    text-transform: uppercase
  display-xl:
    font-family: "Barlow Condensed"
    font-size: "104px"
    font-weight: 900
    line-height: 0.94
    letter-spacing: "-3.64px"
  button-xl:
    font-family: "Barlow Condensed"
    font-size: "30px"
    font-weight: 900
    letter-spacing: "0px"
  button-lg:
    font-family: "Bebas Neue"
    font-size: "25px"
    font-weight: 400
    letter-spacing: "2px"
  button-md:
    font-family: "Barlow Condensed"
    font-size: "20px"
    font-weight: 700
    line-height: 1.15
    letter-spacing: "0px"
  button-sm:
    font-family: "Barlow Condensed"
    font-size: "11px"
    font-weight: 700
    letter-spacing: "2.42px"
    text-transform: uppercase
  button-xs:
    font-family: "Barlow Condensed"
    font-size: "9px"
    font-weight: 700
    line-height: 1.15
    letter-spacing: "0.72px"
  button-xs-uppercase:
    font-family: "Barlow Condensed"
    font-size: "9px"
    font-weight: 700
    letter-spacing: "1.62px"
    text-transform: uppercase
  body-xl:
    font-family: "Bebas Neue"
    font-size: "22px"
    font-weight: 400
    letter-spacing: "2.2px"
  body-lg:
    font-family: "Barlow"
    font-size: "16px"
    font-weight: 400
    line-height: 1.85
    letter-spacing: "0px"
  body-md:
    font-family: "Barlow"
    font-size: "15px"
    font-weight: 400
    line-height: 1.5
    letter-spacing: "0px"
  body-sm:
    font-family: "Barlow"
    font-size: "14px"
    font-weight: 600
    letter-spacing: "0px"
  body-xs:
    font-family: "Barlow"
    font-size: "12px"
    font-weight: 400
    line-height: 1.4
    letter-spacing: "0px"
  body-xs-strong:
    font-family: "Barlow Condensed"
    font-size: "13px"
    font-weight: 600
    letter-spacing: "3.9px"
    text-transform: uppercase
  caption-lg:
    font-family: "Barlow Condensed"
    font-size: "12px"
    font-weight: 400
    letter-spacing: "2.64px"
    text-transform: uppercase
  caption-lg-strong:
    font-family: "Barlow Condensed"
    font-size: "12px"
    font-weight: 700
    letter-spacing: "3.6px"
    text-transform: uppercase
  caption-md:
    font-family: "Barlow Condensed"
    font-size: "11px"
    font-weight: 600
    letter-spacing: "1.65px"
  caption-md-strong:
    font-family: "Barlow Condensed"
    font-size: "11px"
    font-weight: 700
    letter-spacing: "5.5px"
    text-transform: uppercase
  caption-sm:
    font-family: "Barlow Condensed"
    font-size: "10px"
    font-weight: 400
    letter-spacing: "1.8px"
    text-transform: uppercase
  caption-xs:
    font-family: "Barlow Condensed"
    font-size: "9px"
    font-weight: 600
    letter-spacing: "1.8px"
    text-transform: uppercase

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  xxl: "32px"
  xxxl: "36px"
  section: "40px"
  band: "48px"

rounded:
  none: "0px"
  xs: "4px"
  sm: "10px"
  md: "12px"
  full: "9999px"

shadows:
  sm: "rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(5, 5, 11, 0.15) 0px 8px 25px 0px"

border-widths:
  thin: "1px"
  medium: "2px"

gradients:
  vignette-dark: "linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%)"
  vignette-soft: "linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%)"
  overlay-subtle: "linear-gradient(130deg, rgba(27, 26, 37, 0.55), rgba(16, 16, 23, 0.66))"
  neon-magenta: "linear-gradient(100deg, rgb(255, 125, 154) 0%, rgb(238, 89, 168) 48%, rgb(179, 101, 230) 100%)"
  warm-diagonal: "linear-gradient(135deg, rgb(255, 194, 142), rgb(233, 99, 177))"

breakpoints:
  mobile: "375px"
  tablet: "768px"
  tablet-large: "1024px"
  desktop: "1280px"
  desktop-xl: "1440px"

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from gta6vicecityphonk.netlify.app

Primary

#1B1624

Primary CTA, brand accent, active state

#C6A9CF

Inline link colour

#FFE5D5

Accent / decorative

#0000EE

Accent / decorative

#E5B3CB

Accent / decorative

#BC8EAB

Accent / decorative

#A49BAE

Accent / decorative

#E4C7A1

Accent / decorative

Neutral

#0C0C14

Default page background

#FFFFFF

Headings / primary text

#FFF0F7

Body copy

#F1D3E0

Captions, secondary text

#CFB6D4

Tertiary / placeholder text

#B5ABBF

1px borders and dividers

#AAA6B8

Neutral

Typography · Barlow Condensed

h1104px · 900 · 97.76px

caption12px · 700

caption11px · 700

button30px · 900

button11px · 700

button20px · 700 · 23px

body13px · 600

caption10px · 400

caption12px · 400

caption9px · 600

caption11px · 600

caption11px · 400

caption10px · 600

caption10px · 400

caption12px · 700

caption11px · 400

button9px · 700

button9px · 700 · 10.35px

Typography · Bebas Neue

h2120px · 700 · 108px

display96px · 700 · 86.4px

display80px · 700 · 72px

body22px · 400

button25px · 400

Typography · Barlow

body16px · 400 · 29.6px

link14px · 600

button13px · 600

list-item12px · 400 · 16.8px

body15px · 400 · 22.5px

caption12px · 400 · 22.8px

Spacing

4px

8px

12px

16px

20px

24px

32px

36px

Elevation

rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset, rgba(5, 5, 11, 0.15) 0px 8px 25px 0px

Components · 5

Remixes of gta6vicecityphonk.netlify.app

Latest remixes

No public remixes yet. Be the first to make one.

Remix it