Brand DNA

Style Guide

A comprehensive guide to the visual identity of John Ellison's brand. This living document defines the colors, typography, and design patterns that create a cohesive prismatic aesthetic.

Colors

A dark-first palette with prismatic accents.

Core Palette

Prismatic Spectrum

The signature rainbow palette used for accents, borders, and animations.

Brand Colors

Text Hierarchy

Typography

Fluid, responsive type scales with intentional font pairings.

Display

Clash Display

Used for headings, section titles, and impactful statements. Available in weights 400-700.

var(--font-display)
Body

Satoshi

Used for body text, UI elements, and general content. Highly legible at all sizes. Weights 300-700.

var(--font-body)

Type Scale (Fluid)

All sizes use clamp() for smooth responsive scaling.

--text-4xl4XL

Hero Headlines

--text-3xl3XL

Section Headers

--text-2xl2XL

Card Titles

--text-xlXL

Subsection Headers

--text-lgLG

Large Body Text

--text-baseBase

Standard body copy for paragraphs and general content.

--text-smSM

Captions and secondary information

--text-xsXS

Labels and fine print

Gradients

Signature gradient treatments that define the visual identity.

Gradient Prism

Primary brand gradient for text and accents.

linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #2dd4bf 100%)

Example gradient text

Gradient Warm

Secondary gradient for emphasis and warmth.

linear-gradient(135deg, #ef4444 0%, #f59e0b 50%, #fcd34d 100%)

Example gradient text

Prismatic Rainbow

Used for animated borders, hovers, and special accents.

linear-gradient(135deg, rgba(255,150,150,1), rgba(255,220,120,1), rgba(150,255,200,1), rgba(150,200,255,1), rgba(180,150,255,1))

Buttons

Interactive elements with prismatic hover effects.

Primary

Rainbow border animation on hover. Used for primary CTAs.

.btn-primary

Secondary

Subtle border with hover fill. Used for secondary actions.

.btn-secondary

Animation

Motion principles and key animation patterns.

Easing Functions

Standard

cubic-bezier(0.23, 1, 0.32, 1)

GSAP Power2

power2.out, power3.out

Timing

Fast

200ms

Hovers, micro-interactions

Standard

400ms

Transitions, reveals

Slow

600-1200ms

Page entrances, GSAP

Key Animations

Prismatic Spin

.animate-prismatic-spin

Rainbow Slide

@keyframes rainbowSlide
Gradient

Animated Gradient Text

.text-gradient-animated

Spacing & Layout

Consistent spacing creates visual rhythm.

Breakpoints

Mobile480px
Tablet768px
Desktop1024px

Container

Max Widthmax-w-6xl (64rem)
Paddingpx-6
Section Gappy-24

Border Radius

lg (8px)
xl (12px)
2xl (16px)
full

Grid Gaps

Small0.75rem
Medium1.25rem
Large1.5rem

Design Philosophy

The principles that guide every design decision.

1

Dark-First

The interface lives in darkness, allowing content and prismatic accents to shine. Pure black backgrounds create depth and reduce visual fatigue.

2

Prismatic Energy

Rainbow gradients represent the full spectrum of possibility. They appear on interaction, rewarding engagement with moments of color.

3

Fluid & Responsive

Typography and spacing scale smoothly across all viewport sizes using clamp(). No jarring breakpoint jumps—just continuous adaptation.

4

Motion with Purpose

Animations enhance meaning, never distract. Scroll-triggered reveals create narrative. Reduced motion preferences are always respected.

CSS Variables Reference

Quick reference for all design tokens.

:root {
  /* Fonts */
  --font-display: 'Clash Display', -apple-system, sans-serif;
  --font-body: 'Satoshi', -apple-system, sans-serif;

  /* Type Scale */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-4xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;

  /* Breakpoints */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* Gradients */
  --gradient-prism: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #2dd4bf 100%);
  --gradient-warm: linear-gradient(135deg, #ef4444 0%, #f59e0b 50%, #fcd34d 100%);
}