enlighten

← Design systems

Enlighten Design Systemcanonical

The canonical Enlighten AI Labs brand (house of brands: Enlighten, Echo, Aria): color tokens, Travelia / Azeret Mono / Doto type stack, components, brand board, guidelines, sales deck, logos, icons, photography, textures, case studies, and an installable brand skill.

id: enlighten version: 2026.02.01 skill: enlighten-design

Brand board

Tokens · system.css

/* Enlighten parent-brand design system — extended from ECHO design.md.
   Where ECHO restricts to a single accent and three reserved data-viz
   colors, the parent brand carries the FULL palette: warm black, four
   primaries (purple, red, blue, green), two accents (soft orange,
   yellow), and the cool white spec'd by the brand book. BN Hightide is
   promoted from "reserved" to a first-class display voice for parent-
   brand moments. */

/* All brand assets are centralized in ./assets — fonts, logos, icons,
   textures, photography. Self-contained: this folder is portable. */

/* ─── Travelia (brand display · enlighten wordmark) ────────── */
@font-face {
  font-family: "Travelia";
  src: url("assets/fonts/Travelia-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Travelia";
  src: url("assets/fonts/Travelia-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Travelia";
  src: url("assets/fonts/Travelia-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ─── Doto (subject lines, page numbers, footers) ──────────── */
@font-face {
  font-family: "Doto";
  src: url("assets/fonts/Doto-VariableFont_ROND,wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("assets/fonts/Doto-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("assets/fonts/Doto-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ─── Azeret Mono (body + labels) ──────────────────────────── */
@font-face {
  font-family: "Azeret Mono";
  src: url("assets/fonts/AzeretMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("assets/fonts/AzeretMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ─── BN Hightide (parent-brand display · 80s glyph energy) ─ */
@font-face {
  font-family: "BN Hightide";
  src: url("assets/fonts/BNHightide.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Parent-brand palette ─────────────────────────────────
     Eight colors from the brand book. At the parent level red,
     blue, and green are PRIMARY brand colors (not data-viz only
     as in ECHO). Soft Orange and Yellow are accents — bursts of
     energy. Warm black + cool white carry. */
  --warm-black:  #26282B;       /* Pantone 426C */
  --purple:      #9C55A0;       /* Pantone 254U */
  --red:         #EB2726;       /* Pantone 185C · Aria accent */
  --blue:        #3C76A9;       /* Pantone 2383C */
  --green:       #6DC19C;       /* Pantone 2247C */
  --soft-orange: #F69757;       /* Pantone 3588U · accent */
  --yellow:      #FFCF4F;       /* Pantone 810C · accent */
  --cool-white:  #E9EDF3;       /* parent-spec cool white */
  --pure-white:  #FFFFFF;

  /* ─── Aliases for ECHO inheritance ─────────────────────────
     The ECHO board was authored with --primary / --accent-* etc.
     These aliases let the same component CSS read cleanly here.
     Echo's product accent is purple; Aria's is red. */
  --primary:        var(--purple);
  --primary-soft:   #A898B7;
  --secondary-1:    #543778;
  --secondary-2:    #6F5689;
  --secondary-3:    #88769E;
  --secondary-4:    #A898B7;
  --neutral:        #757575;
  --accent-red:     var(--red);
  --accent-blue:    var(--blue);
  --accent-green:   var(--green);

  /* ─── Surfaces & tints ─────────────────────────────────────
     ECHO inherits the purple-tint lane. The parent adds tint
     surfaces for every brand color so the wider palette can carry
     ownership across collateral. */
  --surface-muted:        #F9F9FA;
  --surface-tint-neutral: #EEEEEE;
  --surface-tint-purple:  #F4ECF4;
  --surface-tint-red:     #FCEAEA;
  --surface-tint-blue:    #ECF1F6;
  --surface-tint-green:   #ECF7F2;
  --surface-tint-orange:  #FCEFE3;
  --surface-tint-yellow:  #FFF8E0;
  --border-hairline:      #E9E9E9;

  /* ─── The spectrum beam ────────────────────────────────────
     The parent-brand "gradient beam" treatment from the PDF —
     used in the primary logo lockup. Encoded so it can wash hero
     plates and section turns. */
  --beam: linear-gradient(90deg,
    var(--purple) 0%,
    var(--red) 28%,
    var(--soft-orange) 52%,
    var(--yellow) 72%,
    var(--green) 100%);
  --beam-soft: linear-gradient(90deg,
    rgba(156,85,160,0.18) 0%,
    rgba(235,39,38,0.16) 28%,
    rgba(246,151,87,0.18) 52%,
    rgba(255,207,79,0.18) 72%,
    rgba(109,193,156,0.16) 100%);

  /* ─── Type families ────────────────────────────────────────
     PDF call-outs (slightly more permissive than ECHO):
       Travelia    — primary, dynamic sans, Bold = headers (200pt)
       Azeret Mono — body copy (Light), display body (Regular)
       Doto        — subject lines, page numbers, footers
       BN Hightide — 80s display, with glyphs, hero & title pages */
  --font-display:     'Travelia', 'Space Grotesk', system-ui, sans-serif;
  --font-title:       'Doto', ui-monospace, monospace;
  --font-body:        'Azeret Mono', ui-monospace, monospace;
  --font-display-alt: 'BN Hightide', 'Travelia', serif;
  --font-alt-display: 'BN Hightide', 'Travelia', serif; /* legacy alias */

  /* Radii */
  --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-pill: 9999px;

  /* Spacing */
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px;
  --s-gutter: 40px; --s-margin: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--surface-muted);
  color: var(--warm-black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Type primitives */
.t-display { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; color: var(--warm-black); }
.t-headline { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: -0.005em; color: var(--warm-black); }
.t-slide-title { font-family: var(--font-title); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--primary); }
.t-subtitle { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.4; color: var(--warm-black); }
.t-body { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--warm-black); }
.t-label { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--neutral); }
.t-eyebrow { font-family: var(--font-title); font-weight: 600; font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral); }

/* The enlighten wordmark — always Travelia Bold */
.enlighten { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* Eyebrow rule pairing */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-title); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral);
}
.eyebrow-rule::before {
  content: ""; width: 20px; height: 2px; background: var(--primary);
}

/* Title chip */
.title-chip {
  display: inline-flex; align-items: center;
  background: var(--surface-muted);
  color: var(--primary);
  font-family: var(--font-title); font-weight: 600; font-size: 22px; line-height: 1.2;
  padding: 12px 18px; border-radius: var(--r-sm); min-height: 56px;
}

/* Lane headers */
.lane-header {
  font-family: var(--font-title); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cool-white);
  padding: 10px 14px; text-align: center;
}
.lane-header--customer { background: var(--neutral); }
.lane-header--spine { background: var(--warm-black); }
.lane-header--vendor { background: var(--primary); }

/* Role boxes */
.role-box {
  background: var(--cool-white);
  border-radius: var(--r-sm);
  padding: 14px 16px 14px 19px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  min-height: 56px;
}
.role-box::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.role-box--customer::before { background: var(--neutral); }
.role-box--vendor::before { background: var(--primary); }
.role-box .activity { font-family: var(--font-title); font-weight: 600; font-size: 14px; color: var(--warm-black); line-height: 1.25; }
.role-box .role-label { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--neutral); margin-top: 4px; letter-spacing: 0.04em; }

/* Stage circles */
.stage-circle {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 600; font-size: 16px; color: var(--cool-white);
}
.stage-circle--customer { background: var(--neutral); }
.stage-circle--vendor { background: var(--primary); }

/* Surface tints */
.surface-customer { background: var(--surface-tint-neutral); }
.surface-vendor { background: var(--surface-tint-purple); }
.surface-spine { background: var(--warm-black); color: var(--cool-white); }

/* Hairline */
.hairline { height: 0.5px; background: var(--border-hairline); }

/* Card (generic) */
.card-surface {
  background: var(--cool-white);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Doc sheet shell for design-system pages */
.sheet { max-width: 1320px; margin: 0 auto; padding: 64px 48px 96px; }
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 20px; margin-bottom: 56px;
  border-bottom: 1px solid var(--border-hairline);
}
.sheet-head .brand { display: inline-flex; align-items: baseline; gap: 10px; }
.sheet-head .brand .mark {
  width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--primary);
  display: inline-block; transform: translateY(1px);
}
.sheet-head .brand .title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--warm-black); letter-spacing: -0.005em; }
.sheet-head .brand .sep { color: var(--neutral); }
.sheet-head .brand .sub { font-family: var(--font-title); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral); }
.sheet-head .meta { font-family: var(--font-title); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral); }

/* ───────────────────────────────────────────────────────────────
   Slide chrome — shared fixtures across all deck layouts.
   Canonical slide: 1280 × 720 (13.33 × 7.5 in × 96 dpi).
   ─────────────────────────────────────────────────────────────── */
.slide-frame {
  width: 1280px; height: 720px;
  position: relative; overflow: hidden;
  background: var(--cool-white);
  color: var(--warm-black);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-hairline);
}
.slide-frame--dark {
  background: var(--warm-black);
  color: var(--cool-white);
  border-color: var(--warm-black);
}
.slide-frame--split {
  background: var(--cool-white);
}

/* Right-edge spine (the distressed textural rail in immersive decks).
   We CSS-synthesize it so it reads without needing a texture asset. */
.slide-spine {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 88px;
  background: var(--cool-white);
  border-left: 1px solid var(--border-hairline);
  z-index: 3;
}
.slide-spine--dark { background: var(--warm-black); border-left-color: rgba(255,255,255,0.06); }
.slide-spine .spine-en {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 56px;
  background: var(--cool-white);
  border-radius: 2px;
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.slide-spine .spine-en-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  color: var(--primary); letter-spacing: -0.03em; line-height: 1;
}
.slide-spine .spine-page {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-title); font-weight: 600; font-size: 18px;
  color: var(--neutral); letter-spacing: 0.05em;
}
.slide-spine--dark .spine-page { color: var(--primary-soft); }
/* Glyph column — the distressed char-column from the immersive deck.
   A vertical run of tiny Azeret Mono chars ghosted into the rail. */
.slide-spine .spine-glyphs {
  position: absolute; top: 92px; bottom: 56px; left: 0; right: 0;
  overflow: hidden; opacity: 0.18;
  font-family: var(--font-body); font-weight: 300; font-size: 11px;
  line-height: 1.45; color: var(--warm-black);
  writing-mode: vertical-rl; text-orientation: mixed;
  letter-spacing: 0.02em;
  padding: 8px 0;
  text-align: center;
  user-select: none; pointer-events: none;
}
.slide-spine--dark .spine-glyphs { color: var(--cool-white); opacity: 0.15; }

/* "Why ECHO?" style question chip anchored top-left of the slide. */
.slide-chip {
  position: absolute; top: 32px; left: 32px;
  background: var(--cool-white);
  color: var(--warm-black);
  padding: 14px 22px; border-radius: var(--r-xs);
  font-family: var(--font-title); font-weight: 600; font-size: 18px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 4;
}
.slide-chip--ghost {
  background: transparent; box-shadow: none;
  border: 1px solid var(--border-hairline);
}

/* Pad — inset safe area inside the slide frame. */
.slide-pad {
  position: absolute;
  left: 48px; top: 48px;
  right: 136px;  /* reserve for spine + breathing room */
  bottom: 48px;
}
.slide-pad--tight { left: 32px; right: 120px; top: 32px; bottom: 32px; }

/* ───────────────────────────────────────────────────────────────
   Metric — the canonical Doto pixelated big number.
   Usage: <div class="metric metric--primary"><span class="metric-n">1/10</span><sup class="metric-ord">th</sup></div>
   ─────────────────────────────────────────────────────────────── */
.metric {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--warm-black);
  display: inline-flex; align-items: baseline; gap: 2px;
}
.metric--primary { color: var(--primary); }
.metric--onwhite { color: var(--primary); }
.metric--ondark { color: var(--primary-soft); }
.metric--soft { color: var(--primary-soft); }
.metric--xl { font-size: 96px; }
.metric--sm { font-size: 42px; }
.metric sup, .metric .metric-ord { font-size: 0.42em; line-height: 1; align-self: flex-start; margin-left: 2px; }
.metric .metric-unit { font-size: 0.42em; color: inherit; opacity: 0.7; margin-left: 6px; }

/* Metric label — small all-caps Doto eyebrow beneath / beside the number. */
.metric-label {
  font-family: var(--font-title); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
}
.metric-label--ondark { color: var(--primary-soft); }
.metric-label .dot-dot::after {
  content: "..";
  color: var(--primary);
  margin-left: 2px;
}

/* Metric caption — Azeret mono body under a metric. */
.metric-caption {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.5;
  color: var(--warm-black);
}
.metric-caption--ondark { color: var(--cool-white); opacity: 0.82; }

/* ───────────────────────────────────────────────────────────────
   Hero plate — the immersive dark panel slot with room for a render.
   Holds either an <img> or a CSS-drawn placeholder scene.
   ─────────────────────────────────────────────────────────────── */
.hero-plate {
  position: relative;
  background: var(--warm-black);
  border-radius: var(--r-sm);
  overflow: hidden;
  color: var(--cool-white);
  isolation: isolate;
}
.hero-plate .hero-media {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.hero-plate .hero-media img,
.hero-plate .hero-media svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-plate .hero-copy {
  position: relative; z-index: 2;
  padding: 64px 64px 56px;
  max-width: 58%;
}
.hero-plate .hero-copy .hero-eyebrow {
  font-family: var(--font-title); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-soft); margin-bottom: 20px;
}
.hero-plate .hero-copy .hero-title {
  font-family: var(--font-display); font-weight: 700; font-size: 56px;
  line-height: 1.05; letter-spacing: -0.015em; color: var(--cool-white);
  margin-bottom: 18px;
}
.hero-plate .hero-copy .hero-sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: 15px; line-height: 1.55;
  color: var(--cool-white); opacity: 0.78; max-width: 520px;
}

/* Immersive placeholder scene — neon "data beam" rising from a device. */
.hero-placeholder-beam {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 72% 62%, rgba(109,193,156,0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 78% 82%, rgba(146,70,149,0.25), transparent 70%),
    linear-gradient(180deg, #1a1d1f 0%, #26292B 100%);
}
.hero-placeholder-beam::before {
  /* rising particles suggestion */
  content: "";
  position: absolute; left: 60%; right: 10%; top: 12%; bottom: 22%;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(175,231,210,0.28) 4px 5px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(175,231,210,0.14) 3px 4px);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, black 20%, transparent 80%);
  opacity: 0.9;
}
.hero-placeholder-beam::after {
  /* phone silhouette at base */
  content: "";
  position: absolute; left: 58%; right: 12%; bottom: 14%; height: 54px;
  background: linear-gradient(180deg, #2d3033 0%, #0e1011 100%);
  border-radius: 14px;
  box-shadow: 0 -8px 28px rgba(146,70,149,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-placeholder-label {
  position: absolute; right: 16px; bottom: 10px; z-index: 3;
  font-family: var(--font-title); font-weight: 600;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Immersive placeholder scene — concentric rings (before/after diagrams). */
.rings-figure {
  width: 160px; height: 160px; position: relative;
}
.rings-figure svg { width: 100%; height: 100%; }

/* ───────────────────────────────────────────────────────────────
   Receipt panel — light, data-dense "hybrid" panel that sits
   beneath or beside a hero plate. Replaces the standalone
   "pricing card" / "defense layer card" patterns.
   ─────────────────────────────────────────────────────────────── */
.receipt {
  background: var(--cool-white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.receipt--accent { border-top: 3px solid var(--primary); }
.receipt--muted { border-top: 3px solid var(--neutral); }
.receipt-head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-tint-purple);
  border-bottom: 1px solid rgba(146, 70, 149, 0.18);
}
.receipt--muted .receipt-head {
  background: var(--surface-tint-neutral);
  border-bottom-color: rgba(117,117,117,0.2);
}
.receipt-head .r-label {
  font-family: var(--font-title); font-weight: 600; font-size: 14px;
  color: var(--warm-black); letter-spacing: 0.01em;
}
.receipt-head .r-sub {
  font-family: var(--font-body); font-weight: 300; font-size: 11px;
  color: var(--neutral);
}
.receipt-body {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.receipt-item { display: flex; gap: 10px; align-items: flex-start; }
.receipt-item .ri-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 3px;
  position: relative;
}
.receipt--muted .receipt-item .ri-dot { background: var(--neutral); }
.receipt-item .ri-dot::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--cool-white);
}
.receipt-item .ri-text {
  font-family: var(--font-body); font-weight: 300; font-size: 12.5px;
  line-height: 1.5; color: var(--warm-black);
}
.receipt-item .ri-text strong {
  font-family: var(--font-title); font-weight: 600; font-size: 12.5px;
  color: var(--warm-black); display: block; margin-bottom: 2px;
}

/* Anchor bar / Summary bar — dark rails at top/bottom of a doc.  */
.anchor-bar, .summary-bar {
  background: var(--warm-black);
  color: var(--cool-white);
  border-radius: var(--r-sm);
  padding: 24px 32px;
}
.anchor-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.anchor-bar .ab-l { display: flex; flex-direction: column; gap: 4px; }
.anchor-bar .ab-label {
  font-family: var(--font-title); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.anchor-bar .ab-price {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.anchor-bar .ab-price .ab-pre,
.anchor-bar .ab-price .ab-unit {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.anchor-bar .ab-price .ab-num {
  font-family: var(--font-title); font-weight: 600; font-size: 56px;
  line-height: 1; color: var(--cool-white);
}
.anchor-bar .ab-note {
  font-family: var(--font-body); font-weight: 300; font-size: 13px;
  color: var(--primary-soft);
}
.anchor-bar .ab-r { text-align: right; }
.anchor-bar .ab-tagline {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  line-height: 1.35; color: var(--cool-white);
}
.anchor-bar .ab-sub {
  font-family: var(--font-body); font-weight: 300; font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.summary-bar { display: flex; align-items: center; justify-content: space-around; gap: 24px; }
.summary-bar .s-item { text-align: center; }
.summary-bar .s-val {
  font-family: var(--font-title); font-weight: 600; font-size: 28px;
  color: var(--primary-soft); line-height: 1;
}
.summary-bar .s-val--text { font-size: 18px; color: var(--cool-white); }
.summary-bar .s-label {
  font-family: var(--font-body); font-weight: 300; font-size: 11px;
  color: rgba(255,255,255,0.65); margin-top: 6px; max-width: 160px;
  line-height: 1.4;
}
.summary-bar .s-div { width: 1px; align-self: stretch; background: rgba(255,255,255,0.14); }

.block { margin-bottom: 72px; }
.block-eyebrow { margin-bottom: 12px; }
.block-title { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; color: var(--warm-black); margin: 0 0 10px; }
.block-sub { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--warm-black); max-width: 720px; margin: 0 0 32px; }

Files & assets

NameKindLocation
Enlighten Brand Guidelines (final) pdf design-systems/enlighten/enlighten-brand-guidelines-final.pdf
Enlighten Sales Deck (Markdown master) deck content/design-systems/enlighten/Enlighten-Sales-Deck-Master-2026-02-01.md
Enlighten Sales Deck (PPTX) deck design-systems/enlighten/Enlighten-Sales-Deck-Master-2026-02-01.pptx
acquisition-1.svg logo content/design-systems/enlighten/assets/icons/acquisition-1.svg
advocacy-1.svg logo content/design-systems/enlighten/assets/icons/advocacy-1.svg
advocacy-2.svg logo content/design-systems/enlighten/assets/icons/advocacy-2.svg
ai engineers-1.svg logo content/design-systems/enlighten/assets/icons/ai engineers-1.svg
ai engineers-2.svg logo content/design-systems/enlighten/assets/icons/ai engineers-2.svg
ai engineers-3.svg logo content/design-systems/enlighten/assets/icons/ai engineers-3.svg
ai powered analytics-1.svg logo content/design-systems/enlighten/assets/icons/ai powered analytics-1.svg
auto-1.svg logo content/design-systems/enlighten/assets/icons/auto-1.svg
auto-2.svg logo content/design-systems/enlighten/assets/icons/auto-2.svg
auto-3.svg logo content/design-systems/enlighten/assets/icons/auto-3.svg
auto-4.svg logo content/design-systems/enlighten/assets/icons/auto-4.svg
awareness-1.svg logo content/design-systems/enlighten/assets/icons/awareness-1.svg
consideration-1.svg logo content/design-systems/enlighten/assets/icons/consideration-1.svg
consideration-2.svg logo content/design-systems/enlighten/assets/icons/consideration-2.svg
consideration-3.svg logo content/design-systems/enlighten/assets/icons/consideration-3.svg
data analysts-1.svg logo content/design-systems/enlighten/assets/icons/data analysts-1.svg
data analysts-2.svg logo content/design-systems/enlighten/assets/icons/data analysts-2.svg
data architects-1.svg logo content/design-systems/enlighten/assets/icons/data architects-1.svg
data engineers-1.svg logo content/design-systems/enlighten/assets/icons/data engineers-1.svg
data scientists-1.svg logo content/design-systems/enlighten/assets/icons/data scientists-1.svg
data scientists-2.svg logo content/design-systems/enlighten/assets/icons/data scientists-2.svg
data viz-1.svg logo content/design-systems/enlighten/assets/icons/data viz-1.svg
data viz-2.svg logo content/design-systems/enlighten/assets/icons/data viz-2.svg
data viz-3.svg logo content/design-systems/enlighten/assets/icons/data viz-3.svg
data viz-4.svg logo content/design-systems/enlighten/assets/icons/data viz-4.svg
data viz-5.svg logo content/design-systems/enlighten/assets/icons/data viz-5.svg
discovery-1.svg logo content/design-systems/enlighten/assets/icons/discovery-1.svg
discovery-2.svg logo content/design-systems/enlighten/assets/icons/discovery-2.svg
engagement-1.svg logo content/design-systems/enlighten/assets/icons/engagement-1.svg
engagement-2.svg logo content/design-systems/enlighten/assets/icons/engagement-2.svg
engagement-3.svg logo content/design-systems/enlighten/assets/icons/engagement-3.svg
engagement-4.svg logo content/design-systems/enlighten/assets/icons/engagement-4.svg
execute-1.svg logo content/design-systems/enlighten/assets/icons/execute-1.svg
execute-2.svg logo content/design-systems/enlighten/assets/icons/execute-2.svg
fulfillment-1.svg logo content/design-systems/enlighten/assets/icons/fulfillment-1.svg
fulfillment-2.svg logo content/design-systems/enlighten/assets/icons/fulfillment-2.svg
healthcare-1.svg logo content/design-systems/enlighten/assets/icons/healthcare-1.svg
healthcare-2.svg logo content/design-systems/enlighten/assets/icons/healthcare-2.svg
healthcare-3.svg logo content/design-systems/enlighten/assets/icons/healthcare-3.svg
hospitality-1.svg logo content/design-systems/enlighten/assets/icons/hospitality-1.svg
hospitality-2.svg logo content/design-systems/enlighten/assets/icons/hospitality-2.svg
hospitality-3.svg logo content/design-systems/enlighten/assets/icons/hospitality-3.svg
innovate-1.svg logo content/design-systems/enlighten/assets/icons/innovate-1.svg
innovate-2.svg logo content/design-systems/enlighten/assets/icons/innovate-2.svg
insurance-1.svg logo content/design-systems/enlighten/assets/icons/insurance-1.svg
insurance-2.svg logo content/design-systems/enlighten/assets/icons/insurance-2.svg
insurance-3.svg logo content/design-systems/enlighten/assets/icons/insurance-3.svg
insurance-4.svg logo content/design-systems/enlighten/assets/icons/insurance-4.svg
insurance-5.svg logo content/design-systems/enlighten/assets/icons/insurance-5.svg
insurance-6.svg logo content/design-systems/enlighten/assets/icons/insurance-6.svg
insurance-7.svg logo content/design-systems/enlighten/assets/icons/insurance-7.svg
insurance-8.svg logo content/design-systems/enlighten/assets/icons/insurance-8.svg
insurance-9.svg logo content/design-systems/enlighten/assets/icons/insurance-9.svg
intel & analaytics-1.svg logo content/design-systems/enlighten/assets/icons/intel & analaytics-1.svg
intel & analytics-2.svg logo content/design-systems/enlighten/assets/icons/intel & analytics-2.svg
intel data infrastructure-1.svg logo content/design-systems/enlighten/assets/icons/intel data infrastructure-1.svg
intel data infrastructure-2.svg logo content/design-systems/enlighten/assets/icons/intel data infrastructure-2.svg
launch-1.svg logo content/design-systems/enlighten/assets/icons/launch-1.svg
launch-2.svg logo content/design-systems/enlighten/assets/icons/launch-2.svg
loyalty-1.svg logo content/design-systems/enlighten/assets/icons/loyalty-1.svg
optimize-1.svg logo content/design-systems/enlighten/assets/icons/optimize-1.svg
optimize-2.svg logo content/design-systems/enlighten/assets/icons/optimize-2.svg
qa engineers-1.svg logo content/design-systems/enlighten/assets/icons/qa engineers-1.svg
qa engineers-2.svg logo content/design-systems/enlighten/assets/icons/qa engineers-2.svg
qsr-1.svg logo content/design-systems/enlighten/assets/icons/qsr-1.svg
qsr-10.svg logo content/design-systems/enlighten/assets/icons/qsr-10.svg
qsr-11.svg logo content/design-systems/enlighten/assets/icons/qsr-11.svg
qsr-12.svg logo content/design-systems/enlighten/assets/icons/qsr-12.svg
qsr-2.svg logo content/design-systems/enlighten/assets/icons/qsr-2.svg
qsr-3.svg logo content/design-systems/enlighten/assets/icons/qsr-3.svg
qsr-4.svg logo content/design-systems/enlighten/assets/icons/qsr-4.svg
qsr-5.svg logo content/design-systems/enlighten/assets/icons/qsr-5.svg
qsr-6.svg logo content/design-systems/enlighten/assets/icons/qsr-6.svg
qsr-7.svg logo content/design-systems/enlighten/assets/icons/qsr-7.svg
qsr-8.svg logo content/design-systems/enlighten/assets/icons/qsr-8.svg
qsr-9.svg logo content/design-systems/enlighten/assets/icons/qsr-9.svg
retail-1.svg logo content/design-systems/enlighten/assets/icons/retail-1.svg
retail-2.svg logo content/design-systems/enlighten/assets/icons/retail-2.svg
retail-3.svg logo content/design-systems/enlighten/assets/icons/retail-3.svg
retail-4.svg logo content/design-systems/enlighten/assets/icons/retail-4.svg
retail-5.svg logo content/design-systems/enlighten/assets/icons/retail-5.svg
retail-6.svg logo content/design-systems/enlighten/assets/icons/retail-6.svg
tech-1.svg logo content/design-systems/enlighten/assets/icons/tech-1.svg
tech-2.svg logo content/design-systems/enlighten/assets/icons/tech-2.svg
trAIning-1.svg logo content/design-systems/enlighten/assets/icons/trAIning-1.svg
trAIning-2.svg logo content/design-systems/enlighten/assets/icons/trAIning-2.svg
trAIning-3.svg logo content/design-systems/enlighten/assets/icons/trAIning-3.svg
ARIA_logo_white.svg logo content/design-systems/enlighten/assets/logos/aria/ARIA_logo_white.svg
echo-logo-dark.png photography design-systems/enlighten/assets/logos/echo/echo-logo-dark.png
echo-logo-light.png photography design-systems/enlighten/assets/logos/echo/echo-logo-light.png
Enlighten-spectrum-Logo-dark.svg logo content/design-systems/enlighten/assets/logos/enlighten/Enlighten-spectrum-Logo-dark.svg
Enlighten-spectrum-Logo-white.svg logo content/design-systems/enlighten/assets/logos/enlighten/Enlighten-spectrum-Logo-white.svg
e-employee-trans-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/e-employee-trans-black.svg
e-world-blog-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/e-world-blog-black.svg
en-enltn-solid-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-enltn-solid-black.svg
en-enltn-striped-color-white.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-enltn-striped-color-white.svg
en-solid-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-solid-black.svg
en-solid-white.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-solid-white.svg
en-striped-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-striped-black.svg
en-striped-color-black-01.png photography design-systems/enlighten/assets/logos/enlighten/en-striped-color-black-01.png
en-striped-color-black-02.png photography design-systems/enlighten/assets/logos/enlighten/en-striped-color-black-02.png
en-striped-color-black.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-striped-color-black.svg
en-striped-color-white.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-striped-color-white.svg
en-striped-white.svg logo content/design-systems/enlighten/assets/logos/enlighten/en-striped-white.svg
enlighten-wordmark-dark.png photography design-systems/enlighten/assets/logos/enlighten/enlighten-wordmark-dark.png
enlighten-wordmark-light.png photography design-systems/enlighten/assets/logos/enlighten/enlighten-wordmark-light.png
enlighten-wordmark-spectrum-dark.png photography design-systems/enlighten/assets/logos/enlighten/enlighten-wordmark-spectrum-dark.png
AzeretMono-Italic-VariableFont_wght.ttf font design-systems/enlighten/assets/fonts/AzeretMono-Italic-VariableFont_wght.ttf
AzeretMono-VariableFont_wght.ttf font design-systems/enlighten/assets/fonts/AzeretMono-VariableFont_wght.ttf
BNHightide.otf font design-systems/enlighten/assets/fonts/BNHightide.otf
Doto-Medium.ttf font design-systems/enlighten/assets/fonts/Doto-Medium.ttf
Doto-SemiBold.ttf font design-systems/enlighten/assets/fonts/Doto-SemiBold.ttf
Doto-VariableFont_ROND,wght.ttf font design-systems/enlighten/assets/fonts/Doto-VariableFont_ROND,wght.ttf
Travelia-Black.ttf font design-systems/enlighten/assets/fonts/Travelia-Black.ttf
Travelia-Bold.ttf font design-systems/enlighten/assets/fonts/Travelia-Bold.ttf
Travelia-Medium.ttf font design-systems/enlighten/assets/fonts/Travelia-Medium.ttf
dts-hazy-eighties-8718.jpg photography design-systems/enlighten/assets/photography/dts-hazy-eighties-8718.jpg
dts-misc-fancher-6071.jpg photography design-systems/enlighten/assets/photography/dts-misc-fancher-6071.jpg
dts-misc-fancher-6161.jpg photography design-systems/enlighten/assets/photography/dts-misc-fancher-6161.jpg
dts-misc-fancher-6185.jpg photography design-systems/enlighten/assets/photography/dts-misc-fancher-6185.jpg
dts-misc-fancher-6186.jpg photography design-systems/enlighten/assets/photography/dts-misc-fancher-6186.jpg
dts-misc-fancher-6190-cropped.jpg photography design-systems/enlighten/assets/photography/dts-misc-fancher-6190-cropped.jpg
dts-the-scientist-11870.jpg photography design-systems/enlighten/assets/photography/dts-the-scientist-11870.jpg
glitch-brain.png photography design-systems/enlighten/assets/photography/glitch-brain.png
headphones.png photography design-systems/enlighten/assets/photography/headphones.png
holding-phone.png photography design-systems/enlighten/assets/photography/holding-phone.png
pexels-cottonbro-5371583.jpg photography design-systems/enlighten/assets/photography/pexels-cottonbro-5371583.jpg
pexels-cottonbro-5473955.jpg photography design-systems/enlighten/assets/photography/pexels-cottonbro-5473955.jpg
pexels-cottonbro-5473956.jpg photography design-systems/enlighten/assets/photography/pexels-cottonbro-5473956.jpg
pexels-cottonbro-5483149.jpg photography design-systems/enlighten/assets/photography/pexels-cottonbro-5483149.jpg
pexels-cottonbro-6153354.jpg photography design-systems/enlighten/assets/photography/pexels-cottonbro-6153354.jpg
pexels-ekaterina-bolovtsova-6192331.jpg photography design-systems/enlighten/assets/photography/pexels-ekaterina-bolovtsova-6192331.jpg
pexels-googledeepmind-25626432.jpg photography design-systems/enlighten/assets/photography/pexels-googledeepmind-25626432.jpg
pexels-googledeepmind-25626438.jpg photography design-systems/enlighten/assets/photography/pexels-googledeepmind-25626438.jpg
pexels-googledeepmind-25626439.jpg photography design-systems/enlighten/assets/photography/pexels-googledeepmind-25626439.jpg
pexels-lany-14923853.jpg photography design-systems/enlighten/assets/photography/pexels-lany-14923853.jpg
pexels-mati-5952738.jpg photography design-systems/enlighten/assets/photography/pexels-mati-5952738.jpg
pexels-nivdex-796206.jpg photography design-systems/enlighten/assets/photography/pexels-nivdex-796206.jpg
pexels-sora-shimazaki-5926382.jpg photography design-systems/enlighten/assets/photography/pexels-sora-shimazaki-5926382.jpg
pexels-yaroslav-shuraev-7689143.jpg photography design-systems/enlighten/assets/photography/pexels-yaroslav-shuraev-7689143.jpg
phone.png photography design-systems/enlighten/assets/photography/phone.png
robot-and-human.jpg photography design-systems/enlighten/assets/photography/robot-and-human.jpg
thumbprint.png photography design-systems/enlighten/assets/photography/thumbprint.png
woman-face-with-code.jpg photography design-systems/enlighten/assets/photography/woman-face-with-code.jpg
woman-on-laptop.jpg photography design-systems/enlighten/assets/photography/woman-on-laptop.jpg
woman-using-laptop.png photography design-systems/enlighten/assets/photography/woman-using-laptop.png
8bit-texture.png photography design-systems/enlighten/assets/textures/8bit-texture.png
Asset 1.png photography design-systems/enlighten/assets/textures/Asset 1.png
bitmap-black.jpg photography design-systems/enlighten/assets/textures/bitmap-black.jpg
bitmap-blue.jpg photography design-systems/enlighten/assets/textures/bitmap-blue.jpg
bitmap-example-white.jpg photography design-systems/enlighten/assets/textures/bitmap-example-white.jpg
bitmap-green.png photography design-systems/enlighten/assets/textures/bitmap-green.png
bitmap-purple.jpg photography design-systems/enlighten/assets/textures/bitmap-purple.jpg
bitmap-red.jpg photography design-systems/enlighten/assets/textures/bitmap-red.jpg
customer_green.png photography design-systems/enlighten/assets/textures/customer_green.png
dotted-texture.png photography design-systems/enlighten/assets/textures/dotted-texture.png
dotted-texture.svg logo content/design-systems/enlighten/assets/textures/dotted-texture.svg
pixel-map-1.png photography design-systems/enlighten/assets/textures/pixel-map-1.png
pixel-map-1.svg logo content/design-systems/enlighten/assets/textures/pixel-map-1.svg
pixel-map-2.png photography design-systems/enlighten/assets/textures/pixel-map-2.png
pixel-map-2.svg logo content/design-systems/enlighten/assets/textures/pixel-map-2.svg
wendys_delivery_incrementality_case_study.html html content/design-systems/enlighten/assets/case-studies/wendys_delivery_incrementality_case_study.html
wendys_episode3_case_study.html html content/design-systems/enlighten/assets/case-studies/wendys_episode3_case_study.html
wendys_loyalty_incrementality_case_study.html html content/design-systems/enlighten/assets/case-studies/wendys_loyalty_incrementality_case_study.html
wendys_march_madness_case_study.html html content/design-systems/enlighten/assets/case-studies/wendys_march_madness_case_study.html

Overview

# Enlighten Design System

The canonical brand for **Enlighten AI Labs** — a *house of brands*: the company is
**Enlighten**, the products are **Echo** (agentic DAAP, purple accent) and **Aria**
(Human-AI Analyst, red accent). Look & voice: *80s computer-culture nostalgia meets
modern AI execution* — bit-mapped textures, neon-arcade palette, and a disciplined
**Travelia / Azeret Mono / Doto** type stack. Tagline: **Data-Driven. Results-Focused. AI-Powered.**

## What's in this entry

| File / folder | Purpose | Where |
| --- | --- | --- |
| `system.css` | Authoritative design tokens + component CSS | git |
| `brand-board.html` | Full brand/mood board: patterns, philosophy, specimens | git |
| `Enlighten-Sales-Deck-Master-2026-02-01.md` | Master sales deck (markdown source) | git |
| `Enlighten-Sales-Deck-Master-2026-02-01.pptx` | Sales deck export (191 MB) | storage / R2 |
| `enlighten-brand-guidelines-final.pdf` | Definitive guidelines (86 MB) | storage / R2 |
| `assets/icons/` | ~87 brand SVG icons | git |
| `assets/logos/` | Enlighten / Echo / Aria logo marks (SVG → git, PNG → storage) | git + storage |
| `assets/case-studies/` | Wendy's case-study HTML templates | git |
| `assets/fonts/` | Licensed fonts: Azeret Mono, Doto, Travelia, BNHightide (.ttf/.otf) | storage / R2 |
| `assets/photography/` | Brand photography (.jpg/.png) | storage / R2 |
| `assets/textures/` | Bit-mapped textures (.png/.jpg → storage; small .svg → git) | git + storage |
| `skill/` | The installable `enlighten-design` brand skill (`SKILL.md` + `INSTALL-HANDOFF.txt`) | git |

## How agents should use it

1. Pull `system.css` into context (MCP resource `enlighten://design-system/enlighten/system.css`,
   or `enl ds get enlighten`). It is **authoritative** — if the skill and the CSS diverge, trust the CSS.
2. Use the brand tokens (`--warm-black`, `--cool-white`, `--purple`, `--red`, `--blue`,
   `--green`, `--soft-orange`, `--yellow`, `--neutral`, plus surface tints) — never hardcode hex.
3. Type stack: **Travelia** (display), **Azeret Mono** / **Doto** (mono/accent).
4. Install the `enlighten-design` skill (`enl skill install enlighten-design`) for the full
   color/type/logo/voice rules and the brand "cliffs" (don'ts).

> Binaries (PDF, PPTX, fonts, large images) are served from the StorageProvider — `.storage/`
> locally, Cloudflare R2 in production — and are referenced by `storageKey`, not committed to git.