HEADSTATE // BRAND ASSETS SSOT

Design System & Assets

This repository serves as the central hub for all Headstate brand elements. Configure the Base URL above to generate ready-to-use CDN links for your projects.

Color Palette

Core Neutral

#050505

Brand Black

#FFFFFF

Brand White

Division: AI

#22C55E

Signal Green

Division: Cloud

#C026D3

Nexus Fuchsia

Division: Productions

#EA580C

Forge Orange

Division: ID

#2563EB

Sovereign Blue

Division: Search

#84CC16

Index Lime

Division: Events

#DC2626

Rogue Red

Typography

Inter

PRIMARY SANS-SERIF


                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap" rel="stylesheet">

900

Headline Black

Usage: Hero sections, Main Division Titles

700/600

Subheading Bold

Usage: Section headers, navigation links

400

The quick brown fox jumps over the lazy dog. Standard body text should always be legible and high contrast.

Usage: Body copy, descriptions

JetBrains Mono

TECHNICAL / CODE


                            <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

700

SYSTEM_ALERT

Usage: Status indicators, buttons, technical accents

400

function init() {
return true;
}

Usage: Code blocks, terminal outputs, metadata

UI Patterns & Textures

Dot Map (Cloud)

background-image: radial-gradient(#333 1px, transparent 1px);
background-size: 20px 20px;

Scanlines (ID)

SECURE

background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5) 50%);
background-size: 100% 4px;

Matrix Grid (Search)

/* Complex Linear Gradient */
background-size: 50px 50px;
/* See source for full gradient */

Iconography

Headstate uses Lucide Icons. Icons should be used sparingly and consistently. Stroke weight is typically standard (2px).

cpu

cloud

scan

zap

Usage


                       <script src="https://unpkg.com/lucide@latest"></script>


                       <i data-lucide="icon-name"></i>

                       <script>lucide.createIcons();</script>

Motion Identity

Glitch

Used for AI interfaces, error states, and "rogue" system alerts. High energy.

Scan / Pulse

Steady, rhythmic pulses for scanning lines, status lights, and background elements.

Marquee

Continuous horizontal scrolling for large typography and news tickers.

Logotypes & Marks

Primary Wordmark (Wide Condensed)

Black Fill

For light backgrounds

SVG PNG

White Fill

For dark backgrounds

SVG PNG

Standard / Transparent

Versatile usage

SVG PNG

Icon Marks

Icon (Black BG)

SVG PNG

Icon (White BG)

SVG PNG

Icon (Transparent)

SVG PNG