DESIGN.md · Analysis

EightbornV

eightbornv.com · 25 Oct 2026 · 47 colors · display, Inter

EightbornV

Dark, cinematic GTA V roleplay server identity for Season 4: a near-black noir canvas, warm amber signal accent, and an archival, case-file typographic voice.

Colors

surface#0e0e11

surface-dim#08080b

surface-bright#2d2c33

surface-container-lowest#050507

surface-container-low#111014

surface-container#16161a

surface-container-high#1c1b20

surface-container-highest#2d2c33

on-surface#f3f4f2

on-surface-variant#b3b2b2

inverse-surface#f3f4f2

inverse-on-surface#0e0e11

outline#8e8e8e

outline-variant#414045

surface-tint#ffc526

primary#ffc526

on-primary#0e0e11

primary-container#ffd76a

on-primary-container#161519

inverse-primary#8a6a00

secondary#16d5b2

on-secondary#0e0e11

secondary-container#19b394

on-secondary-container#050507

tertiary#e50a3e

on-tertiary#fff

tertiary-container#920728

on-tertiary-container#ffffff

error#ff425f

on-error#111111

error-container#920728

on-error-container#ffffff

primary-fixed#ffd76a

primary-fixed-dim#ffc526

on-primary-fixed#161519

on-primary-fixed-variant#414045

secondary-fixed#16d5b2

secondary-fixed-dim#14c2a2

on-secondary-fixed#050507

on-secondary-fixed-variant#222126

tertiary-fixed#ff6e84

tertiary-fixed-dim#e50a3e

on-tertiary-fixed#050507

on-tertiary-fixed-variant#2d2c33

background#0e0e11

on-background#f3f4f2

surface-variant#222126

Typography

display: fontFamily: display · fontSize: 32px · fontWeight: 700 · lineHeight: 51.2px · letterSpacing: -5.9904px
headline-lg: fontFamily: display · fontSize: 99.84px · fontWeight: 700 · lineHeight: 83.8656px · letterSpacing: -0.06em
headline-md: fontFamily: Inter · fontSize: 99.84px · fontWeight: 700 · lineHeight: 83.8656px · letterSpacing: -5.9904px
title-lg: fontFamily: Inter · fontSize: 24px · fontWeight: 600 · lineHeight: 32px
body-lg: fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28.8px
body-md: fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 25.6px
label-md: fontFamily: Inter · fontSize: 12px · fontWeight: 500 · lineHeight: 18px
label-sm: fontFamily: JetBrains Mono · fontSize: 11px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.08em

Design guidance

Overview

EightbornV is a Turkish GTA V roleplay server presenting its fourth season as a cinematic, case-file narrative. The interface frames the community as an archive: sealed dossiers, cassette players and CRT televisions sit in a near-black room lit by a single warm source. The aesthetic movement is Archival Noir, a restrained, film-grade darkness punctuated by one signal color.

The tone is measured, atmospheric and understated. Copy favours short declarative Turkish sentences, countdown language and locked-state labels such as "Yakında" (coming soon). Personality reads as secretive but inviting. Example sentence: "Sezon 4'ü keşfet — dosya 02 henüz açılmadı."

Colors

Primary (#ffc526) is the signature amber used on primary CTAs, active navigation underlines, countdown labels and focus states; it is the only warm accent and should be spent sparingly. Primary-container (#ffd76a) is the lighter hover state. Secondary (#16d5b2) is a teal status accent for live or positive indicators and never competes with amber on the same control. Tertiary (#e50a3e) is a crimson reserved for alerts and destructive emphasis.

Surfaces step from #050507 (lowest, used for inputs) through #111014 (cards) to #1c1b20 (hover). The page canvas is #0e0e11. Body text is #f3f4f2 at full strength; secondary copy uses #b3b2b2. Avoid pure white except for logo rendering.

Typography

The system pairs a condensed heavy display face (display, 99.84px, weight 700, letter-spacing -5.9904px) for the hero wordmark with Inter for interface copy and JetBrains Mono for tracked uppercase labels. Display sets the cinematic tone; Inter carries readable body at 16px/25.6px; JetBrains Mono at 11px with letter-spacing 0.08em marks metadata such as countdown units and dossier tags. Apply text-shadow 0 2px 4px rgba(0,0,0,0.4) to small labels that sit over the photographic hero.

Layout

The layout is a fixed container of 1200px centred on a 12-column grid with a 20px gutter. White space is generous: section separation uses the 18px lg spacing step and hero blocks use 24px (2xl) internal padding. Spacing is built on an 8px unit with xs 8px, sm 10px, md 12px, lg 18px, xl 20px and 2xl 24px. Use lg for separating stacked sections and md for label-to-control gaps.

Elevation & Depth

Depth comes from tonal layering and light rather than large shadows. Level 1 is the #0e0e11 canvas with the photographic room behind it. Level 2 cards sit on #111014 with a 1px inset ring of rgba(255,197,38,0.35) on focus. Level 3 floating panels use box-shadow 0 8px 16px rgba(0,0,0,0.1) and a 2px inset #0e0e11 frame. Avoid blurred glass; the look is opaque and matte.

Shapes

Shape language is Precise Tactical: small, near-square corners. Buttons use 4px (rounded.md), cards use 8px (rounded.xl) to soften the dossier frames, and inputs use 4px. Pills (9999px) are reserved for badges and status chips. The restraint keeps the archival objects feeling physical.

Components

Action Elements Primary buttons are amber #ffc526 with #0e0e11 text, 48px tall, 12px vertical padding and 4px radius; on hover they shift to #ffd76a over 200ms ease. Secondary buttons are transparent with a 1px #414045 border and transition to #1c1b20 fill on hover.

Containers & Surfaces Cards use #111014 with an 8px radius and 20px padding. Hover raises them to #1c1b20 over 240ms. Dossier-style panels carry a 1px inset ring rgba(255,197,38,0.35).

Inputs & Interaction Input fields sit on #050507 with a 4px radius and 10px padding. Focus draws a 1px #ffc526 outline. Navigation links are Inter 16px and show a 2px amber underline for the active route.

Do's and Don'ts

**Do**

Use amber #ffc526 only for the single most important action on a view.
Set countdown and metadata labels in JetBrains Mono at 11px with 0.08em tracking.
Keep card radius at 8px and button radius at 4px for consistent tactility.
Let photographic hero assets carry the mood against the #0e0e11 canvas.

**Don't**

Don't place amber and teal on the same control; they signal different states.
Don't introduce blur or translucent glass surfaces; the system is opaque.
Don't use pill shapes for primary buttons.
Don't set body copy below 16px on desktop.

---
version: alpha
name: EightbornV
description: >-
  Dark, cinematic GTA V roleplay server identity for Season 4: a near-black noir canvas, warm amber signal accent, and
  an archival, case-file typographic voice.
logo:
  src: https://eightbornv.com/_next/image?url=%2Fbrand%2Flogo-white.png&w=3840&q=75
colors:
  surface: '#0e0e11'
  surface-dim: '#08080b'
  surface-bright: '#2d2c33'
  surface-container-lowest: '#050507'
  surface-container-low: '#111014'
  surface-container: '#16161a'
  surface-container-high: '#1c1b20'
  surface-container-highest: '#2d2c33'
  on-surface: '#f3f4f2'
  on-surface-variant: '#b3b2b2'
  inverse-surface: '#f3f4f2'
  inverse-on-surface: '#0e0e11'
  outline: '#8e8e8e'
  outline-variant: '#414045'
  surface-tint: '#ffc526'
  primary: '#ffc526'
  on-primary: '#0e0e11'
  primary-container: '#ffd76a'
  on-primary-container: '#161519'
  inverse-primary: '#8a6a00'
  secondary: '#16d5b2'
  on-secondary: '#0e0e11'
  secondary-container: '#19b394'
  on-secondary-container: '#050507'
  tertiary: '#e50a3e'
  on-tertiary: '#fff'
  tertiary-container: '#920728'
  on-tertiary-container: '#ffffff'
  error: '#ff425f'
  on-error: '#111111'
  error-container: '#920728'
  on-error-container: '#ffffff'
  primary-fixed: '#ffd76a'
  primary-fixed-dim: '#ffc526'
  on-primary-fixed: '#161519'
  on-primary-fixed-variant: '#414045'
  secondary-fixed: '#16d5b2'
  secondary-fixed-dim: '#14c2a2'
  on-secondary-fixed: '#050507'
  on-secondary-fixed-variant: '#222126'
  tertiary-fixed: '#ff6e84'
  tertiary-fixed-dim: '#e50a3e'
  on-tertiary-fixed: '#050507'
  on-tertiary-fixed-variant: '#2d2c33'
  background: '#0e0e11'
  on-background: '#f3f4f2'
  surface-variant: '#222126'
typography:
  display:
    fontFamily: display
    fontSize: 32px
    fontWeight: 700
    lineHeight: 51.2px
    letterSpacing: '-5.9904px'
  headline-lg:
    fontFamily: display
    fontSize: 99.84px
    fontWeight: '700'
    lineHeight: 83.8656px
    letterSpacing: '-0.06em'
  headline-md:
    fontFamily: Inter
    fontSize: 99.84px
    fontWeight: 700
    lineHeight: 83.8656px
    letterSpacing: '-5.9904px'
  title-lg:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28.8px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 18px
  label-sm:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.08em
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 4px
  lg: 5px
  xl: 8px
  full: 9999px
spacing:
  unit: 8px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 18px
  xl: 20px
  2xl: 24px
  gutter: 20px
  container-max: 1200px
elevation:
  sm: 'inset 0 0 0 1px #f3f4f2'
  md: 0 8px 16px rgba(0,0,0,0.1)
  lg: 'inset 0 0 0 2px #0e0e11'
layout:
  containerMaxWidth: 1200px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.xl}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons are amber #ffc526 with #0e0e11 text, 48px tall, 12px vertical padding and 4px radius; on hover they shift to #ffd76a over 200ms ease. Secondary buttons are transparent with a 1px #414045 border and transition to #1c1b20 fill on hover.

### Containers & Surfaces
Cards use #111014 with an 8px radius and 20px padding. Hover raises them to #1c1b20 over 240ms. Dossier-style panels carry a 1px inset ring rgba(255,197,38,0.35).

### Inputs & Interaction
Input fields sit on #050507 with a 4px radius and 10px padding. Focus draws a 1px #ffc526 outline. Navigation links are Inter 16px and show a 2px amber underline for the active route.

## Do's and Don'ts

**Do**
- Use amber #ffc526 only for the single most important action on a view.
- Set countdown and metadata labels in JetBrains Mono at 11px with 0.08em tracking.
- Keep card radius at 8px and button radius at 4px for consistent tactility.
- Let photographic hero assets carry the mood against the #0e0e11 canvas.

**Don't**
- Don't place amber and teal on the same control; they signal different states.
- Don't introduce blur or translucent glass surfaces; the system is opaque.
- Don't use pill shapes for primary buttons.
- Don't set body copy below 16px on desktop.

Edit, then copy or download.