Design Documentation | v1.0

Visual Language

The design system for "Gil Is Awful" - a Black Mirror-inspired presentation about AI personas. This document captures the visual language, motion principles, and component patterns used throughout the production.

01 Color Palettes
P

PRISMO Corporate Brand

Official brand colors for internal training materials

Primary: #ff6b35 (Prismo Orange)

Secondary: #ff8c5a (Light Orange)

Accent: #fbbf24 (Amber)

All Jan Eriksen training materials follow Prismo brand guidelines. The warm orange palette conveys professionalism, approachability, and engineering excellence. Partner branding (VYSA) uses complementary colors.

Warm Palette (Prismo Theme)

Used for Jan's sections. Creates trust, warmth, and approachability. The audience should feel comfortable.

Primary Orange
#ff6b35
Accent Amber
#fbbf24
Secondary Orange
#f97316
Warm Background
rgba(255,107,53,0.1)

Cold Palette

Used after the reveal. Colder, more clinical. The audience should feel the shift.

Primary Blue
#3b82f6
Accent Cyan
#06b6d4
Neutral Slate
#64748b
Cold Background
#1e293b

Glitch / Title Sequence

Black Mirror aesthetic. Used only for title sequence and reveal moment. High contrast, chromatic aberration.

Pure Black
#000000
Pure White
#ffffff
Glitch Red
#ff0040
Glitch Cyan
#00f0ff

Accent / Netflix

The signature red. Used sparingly for featured badges and key moments.

Netflix Red
#e50914
Soft Red
#ff6b6b
02 Typography
Display / Headlines

Playfair Display

Used for titles, section headers, and dramatic moments. Elegant, editorial feel.

Gil Is Awful

The Reveal

"Jan doesn't exist."

Body / UI

Inter

Primary text font. Clean, professional, highly readable. Used for body copy and UI elements.

Senior Software Engineer. 15 years in the game.

I've seen things. Fixed things. Broken things.

Today I'm going to show you how I fix a bug.

Code / Terminal

JetBrains Mono

For code blocks, terminal output, and technical elements. Monospace with ligatures.

$ npm test

const fixedDate = new Date(dateString).toISOString();

// I've seen this before.

Type Scale

4xl / 36px Title
3xl / 30px Section
2xl / 24px Heading
xl / 20px Subheading
lg / 18px Large Body
base / 16px Body Text
sm / 14px Small Text
xs / 12px Caption
03 Motion Principles

The Contrast Rule

"The reveal only works if they trust what came before."

The entire visual strategy hinges on this principle. Jan's sections must feel completely normal - clean, professional, trustworthy. The audience should forget about the creepy title sequence. Only then does the reveal have impact.

Act 1: Title

Black Mirror aesthetic

  • Glitch effects
  • Chromatic aberration
  • Static noise
  • Unsettling, sets tone

Act 2: Jan

Clean & Professional

  • NO glitch effects
  • Smooth transitions
  • Warm colors
  • Trust-building

Act 3: Reveal

Return of glitch

  • Screen tear transition
  • Color temp shifts cold
  • Stark, minimal slides
  • Flicker on "2027"
When to use glitch
  • Title sequence (opening)
  • The reveal transition (when Jan says goodbye)
  • "Jan doesn't exist" card
  • Ending sequence ("2027")
  • Credits text
When to stay clean
  • Jan's introduction (Sections 1-6)
  • All bug fix tutorial content
  • Code demonstrations
  • PR creation
  • Any slide where Jan is "speaking"
04 Key Animations
Gil Is Awful

Glitch / Chromatic Aberration

The signature Black Mirror effect. Red/cyan text shadows offset with jitter animation.

glitch.css CSS 
@keyframes glitch {
  0%, 100% {
    transform: translate(0);
    text-shadow:
      2px 0 #ff0040,
      -2px 0 #00f0ff;
  }
  20% {
    transform: translate(-3px, 2px);
    text-shadow:
      -2px 0 #ff0040,
      2px 0 #00f0ff;
  }
  40% {
    transform: translate(2px, -2px);
    text-shadow:
      3px 0 #ff0040,
      -3px 0 #00f0ff;
  }
  /* ... continues */
}

.glitch-text {
  animation: glitch 0.5s infinite;
}
See you next time.

Screen Tear Transition

Used at the moment of reveal. Horizontal slices with offset. VHS malfunction feel.

screen-tear.css CSS 
@keyframes screen-tear {
  0% {
    clip-path: inset(0 0 0 0);
  }
  10% {
    clip-path: inset(20% 0 30% 0);
    transform: translateX(-5px);
  }
  20% {
    clip-path: inset(50% 0 10% 0);
    transform: translateX(5px);
  }
  30% {
    clip-path: inset(10% 0 60% 0);
    transform: translateX(-3px);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
    transform: translateX(3px);
  }
  50%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}
2027

Flicker Effect

Subtle opacity flicker. Used for the ominous "2027" ending card. Creates unease.

flicker.css CSS 
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
}

.flicker-text {
  animation: flicker 2s infinite;
}
Static Noise Overlay

Static Noise

SVG-based fractal noise as background overlay. Very subtle (0.03-0.05 opacity). Adds texture.

static.css CSS 
.static-bg {
  background-image: url("data:image/svg+xml,
    %3Csvg viewBox='0 0 256 256' xmlns='...'%3E
    %3Cfilter id='noise'%3E
    %3CfeTurbulence type='fractalNoise' 
      baseFrequency='0.9' 
      numOctaves='4' 
      stitchTiles='stitch'/%3E
    %3C/filter%3E
    %3Crect width='100%' height='100%' 
      filter='url(%23noise)'/%3E
    %3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
}
05 Persona Cards

Introduction cards for characters. Warm gradient border, avatar with initials or image.

JE

Jan Eriksen

Senior Software Engineer

15 years in the game. Seven mechanical keyboards. Bonsai trees on the windowsill.

Persona Card Character introductions
persona-card.html HTML 
<div class="persona-card">
  <div class="persona-avatar">JE</div>
  <div>
    <h4 class="persona-name">Jan Eriksen</h4>
    <p class="persona-role">Senior Software Engineer</p>
    <p class="persona-bio">...</p>
  </div>
</div>
06 Terminal Blocks

Code and command output. Large, readable. Traffic light dots in header. Green text for output.

$ npm test
PASS src/utils/date.test.ts
DatePicker
✓ handles Safari date format (4ms)
✓ parses ISO strings correctly (2ms)
Tests: 2 passed, 2 total
Terminal Block Code output, commands
terminal.css CSS 
.terminal {
  background: #0d0d0d;
  border: 1px solid #262626;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  padding: 1.5rem 2rem;
}
07 Quote Cards

For Jan's memorable lines. Left border accent, subtle quote mark decoration.

"Carry less, go further. Works for backpacks. Works for code."

- Jan Eriksen

Quote Card Character quotes, emphasis
quote.css CSS 
.quote-card {
  position: relative;
  padding: 1.5rem 2rem;
  background: #161616;
  border-left: 3px solid #ff6b35;
  font-style: italic;
}

.quote-card::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-size: 3rem;
  color: #ff6b35;
  opacity: 0.2;
}
08 Step Badges

Numbered indicators for process steps. Warm gradient for Jan sections, cold for reveal.

1
Warm
2
Warm
3
Warm
|
7
Cold
8
Cold
Step Badge Section numbers, process steps
step-badge.css CSS 
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
}

.step-badge--warm {
  background: linear-gradient(135deg, #ff6b35, #fbbf24);
}

.step-badge--cold {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}