Aria Design System
Aria (Human-AI Analyst, by Enlighten): the red-primary product brand. Aria Red (#EB2726) with tonal red secondaries, warm-black (#26292B) / cool-white surfaces, the Travelia / Azeret Mono / Doto type stack, and Aria's signature pale-blue JavaScript code-substrate panels. Tokens, brand board, client sales deck, icons, wordmarks, graphics, imagery, fonts, and diagrams.
Brand board
Tokens · system.css
/* ARIA design system — tokens inherited from Enlighten parent brand */
/* ─── Travelia (brand display · by enlighten) ──────────────── */
@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 (slide title + eyebrow + ARIA wordmark voice) ───── */
@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 (reserved alternate display) ─────────────── */
@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');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;600;800&display=swap');
:root {
/* Color tokens — Aria Red is the primary. Period. */
--primary: #EB2726; /* Aria Red — primary brand */
--primary-soft: #F59180; /* tonal partner — captions on dark plates */
--secondary-1: #9E1D20; /* darkest red — pressed states, deep accents */
--secondary-2: #EE4747; /* mid red — hover, secondary highlights */
--secondary-3: #F27062; /* light red — supporting series in viz */
--secondary-4: #F59180; /* softest red — = primary-soft, on-dark partner */
--neutral: #757575;
--warm-black: #26292B;
--cool-white: #FFFFFF;
--surface-tint-neutral: #EEEEEE;
--surface-tint-red: #FCEDED; /* 6% red wash — capability cards, lane fills */
--surface-tint-blue: #E8F0F7; /* pale "code-texture" panel */
--surface-muted: #F9F9FA;
--surface-code: #EEF3F8; /* JS-source-code substrate panel base */
--border-hairline: #E9E9E9;
/* Legacy aliases — Aria-Red and primary are the same color. */
--aria-red: #EB2726;
--aria-red-soft: #F59180;
--accent-red: #EB2726;
--accent-blue: #3C76A9;
--accent-green: #6DC19C;
/* Type families */
--font-display: 'Travelia', 'Space Grotesk', system-ui, sans-serif;
--font-title: 'Doto', ui-monospace, monospace;
--font-body: 'Azeret Mono', ui-monospace, monospace;
--font-alt-display: 'BN Hightide', 'Travelia', serif;
/* 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); }
/* Brand wordmark renderers */
.enlighten { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.aria-mark { font-family: var(--font-title); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* 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);
}
.eyebrow-rule.red::before { background: var(--aria-red); }
/* The signature double-dot eyebrow ("X..") used across ARIA decks */
.eb-dot {
font-family: var(--font-title); font-weight: 600; font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--warm-black);
}
.eb-dot::after {
content: " ..";
color: var(--aria-red);
}
/* Em-dash eyebrow for dark detail slides */
.eb-dash {
font-family: var(--font-title); font-weight: 600; font-size: 12px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--cool-white);
}
.eb-dash::before { content: "─ "; color: var(--aria-red); margin-right: 4px; }
/* 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;
}
/* Hairline */
.hairline { height: 0.5px; background: var(--border-hairline); }
/* Doc sheet shell */
.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); }
/* ── ARIA's signature substrate ───────────────────────────────
The pale-blue scrolling-JavaScript-code texture panel that sits
behind most content slides. CSS-synthesized so it reads without
needing a texture asset.
─────────────────────────────────────────────────────────────── */
.code-substrate {
background: var(--surface-code);
position: relative; overflow: hidden;
}
.code-substrate::before {
content: "stopOnFalse resolve hrefNormalized callbackArgs promiseResolve promiseReject thenable isFunction notifyWith fireWith rejectWith always catch done fail progress state pipe resolveWith rejectWith notify prefilters transports ajaxSettings responseFields contents converters flatOptions ajaxSetup ajaxPrefilter ajaxTransport jsonp callback isLocal crossDomain hasContent parseJSON globalEval contextOptions";
position: absolute; inset: 0; padding: 18px 24px;
font-family: var(--font-body); font-weight: 300; font-size: 11px;
line-height: 1.55; color: var(--secondary-1);
opacity: 0.10; word-spacing: 16px;
letter-spacing: 0.02em;
pointer-events: none; user-select: none;
}
/* Card surface */
.card-surface {
background: var(--cool-white);
border-radius: var(--r-md);
padding: 32px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.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; }
/* ── Metric — pixelated big number using Doto ───────────────── */
.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--red { color: var(--aria-red); }
.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 {
font-family: var(--font-title); font-weight: 600; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--primary);
}
.metric-label--red { color: var(--aria-red); }
.metric-caption {
font-family: var(--font-body); font-weight: 300;
font-size: 13px; line-height: 1.5;
color: var(--warm-black);
}
Files & assets
| Name | Kind | Location | |
|---|---|---|---|
| Aria Client Presentation (Markdown master) | deck | content/design-systems/aria/enlighten-aria presentation-client-final.md | |
| Aria Client Presentation (PPTX) | deck | design-systems/aria/enlighten-aria presentation-client-final.pptx | |
| AzeretMono-Italic-VariableFont_wght.ttf | font | design-systems/aria/assets/fonts/AzeretMono-Italic-VariableFont_wght.ttf | |
| AzeretMono-VariableFont_wght.ttf | font | design-systems/aria/assets/fonts/AzeretMono-VariableFont_wght.ttf | |
| BNHightide.otf | font | design-systems/aria/assets/fonts/BNHightide.otf | |
| Doto-Medium.ttf | font | design-systems/aria/assets/fonts/Doto-Medium.ttf | |
| Doto-SemiBold.ttf | font | design-systems/aria/assets/fonts/Doto-SemiBold.ttf | |
| Doto-VariableFont_ROND,wght.ttf | font | design-systems/aria/assets/fonts/Doto-VariableFont_ROND,wght.ttf | |
| Travelia-Black.ttf | font | design-systems/aria/assets/fonts/Travelia-Black.ttf | |
| Travelia-Bold.ttf | font | design-systems/aria/assets/fonts/Travelia-Bold.ttf | |
| Travelia-Medium.ttf | font | design-systems/aria/assets/fonts/Travelia-Medium.ttf | |
| bottleneck-bitmap-black.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-bitmap-black.svg | |
| bottleneck-bitmap-red.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-bitmap-red.svg | |
| bottleneck-black.png | photography | design-systems/aria/assets/graphics/bottleneck/bottleneck-black.png | |
| bottleneck-charcoal.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-charcoal.svg | |
| bottleneck-light.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-light.svg | |
| bottleneck-new-1.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-new-1.svg | |
| bottleneck-new-2.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-new-2.svg | |
| bottleneck-normal.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-normal.svg | |
| bottleneck-orange.png | photography | design-systems/aria/assets/graphics/bottleneck/bottleneck-orange.png | |
| bottleneck-red.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-red.svg | |
| bottleneck-vertical.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-vertical.svg | |
| bottleneck-white.png | photography | design-systems/aria/assets/graphics/bottleneck/bottleneck-white.png | |
| bottleneck-white.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/bottleneck-white.svg | |
| data-bottleneck.svg | logo | content/design-systems/aria/assets/graphics/bottleneck/data-bottleneck.svg | |
| abstract clock.svg | logo | content/design-systems/aria/assets/graphics/clocks/abstract clock.svg | |
| abstract clokc with dots.svg | logo | content/design-systems/aria/assets/graphics/clocks/abstract clokc with dots.svg | |
| pixel numbers clock.svg | logo | content/design-systems/aria/assets/graphics/clocks/pixel numbers clock.svg | |
| stick clock.svg | logo | content/design-systems/aria/assets/graphics/clocks/stick clock.svg | |
| trust-anatomy.jpg | photography | design-systems/aria/assets/graphics/trust/trust-anatomy.jpg | |
| trust-gradient.jpg | photography | design-systems/aria/assets/graphics/trust/trust-gradient.jpg | |
| asset-100.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-100.svg | |
| asset-101.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-101.svg | |
| asset-102.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-102.svg | |
| asset-103.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-103.svg | |
| asset-104.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-104.svg | |
| asset-105.svg | logo | content/design-systems/aria/assets/icons/capabilities/asset-105.svg | |
| consideration.svg | logo | content/design-systems/aria/assets/icons/capabilities/consideration.svg | |
| consistency-black.svg | logo | content/design-systems/aria/assets/icons/capabilities/consistency-black.svg | |
| engagement.svg | logo | content/design-systems/aria/assets/icons/capabilities/engagement.svg | |
| icon-c.svg | logo | content/design-systems/aria/assets/icons/capabilities/icon-c.svg | |
| money-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/money-white.svg | |
| repeatability-black.svg | logo | content/design-systems/aria/assets/icons/capabilities/repeatability-black.svg | |
| scalability-black.svg | logo | content/design-systems/aria/assets/icons/capabilities/scalability-black.svg | |
| scalability-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/scalability-white.svg | |
| scale-reach-alt.svg | logo | content/design-systems/aria/assets/icons/capabilities/scale-reach-alt.svg | |
| scale-reach-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/scale-reach-white.svg | |
| speed-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/speed-white.svg | |
| steerability-black.svg | logo | content/design-systems/aria/assets/icons/capabilities/steerability-black.svg | |
| strategic-advantage-alt.svg | logo | content/design-systems/aria/assets/icons/capabilities/strategic-advantage-alt.svg | |
| strategic-advantage-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/strategic-advantage-white.svg | |
| verification-black.svg | logo | content/design-systems/aria/assets/icons/capabilities/verification-black.svg | |
| verification-white.svg | logo | content/design-systems/aria/assets/icons/capabilities/verification-white.svg | |
| deployment-flexibility-black.svg | logo | content/design-systems/aria/assets/icons/framework/deployment-flexibility-black.svg | |
| deployment-flexibility-white.svg | logo | content/design-systems/aria/assets/icons/framework/deployment-flexibility-white.svg | |
| human-in-the-loop-black.svg | logo | content/design-systems/aria/assets/icons/framework/human-in-the-loop-black.svg | |
| human-in-the-loop-white.svg | logo | content/design-systems/aria/assets/icons/framework/human-in-the-loop-white.svg | |
| human-in-the-loop.svg | logo | content/design-systems/aria/assets/icons/framework/human-in-the-loop.svg | |
| integration-black.svg | logo | content/design-systems/aria/assets/icons/framework/integration-black.svg | |
| integration-white.svg | logo | content/design-systems/aria/assets/icons/framework/integration-white.svg | |
| model-choice-black.svg | logo | content/design-systems/aria/assets/icons/framework/model-choice-black.svg | |
| model-choice-white.svg | logo | content/design-systems/aria/assets/icons/framework/model-choice-white.svg | |
| slide5_concentration-risk.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_concentration-risk.svg | |
| slide5_concentration-risk_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_concentration-risk_white.svg | |
| slide5_flow-integrity.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_flow-integrity.svg | |
| slide5_flow-integrity_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_flow-integrity_white.svg | |
| slide5_planning-discipline.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_planning-discipline.svg | |
| slide5_planning-discipline_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide5_planning-discipline_white.svg | |
| slide6_action.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_action.svg | |
| slide6_action_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_action_white.svg | |
| slide6_insight.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_insight.svg | |
| slide6_insight_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_insight_white.svg | |
| slide6_outcome.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_outcome.svg | |
| slide6_outcome_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_outcome_white.svg | |
| slide6_signal.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_signal.svg | |
| slide6_signal_white.svg | logo | content/design-systems/aria/assets/icons/operators/slide6_signal_white.svg | |
| Looker.svg | logo | content/design-systems/aria/assets/icons/software/Looker.svg | |
| Power BI - Microsoft Logo Vector.svg | logo | content/design-systems/aria/assets/icons/software/Power BI - Microsoft Logo Vector.svg | |
| Tableau_(5).svg | logo | content/design-systems/aria/assets/icons/software/Tableau_(5).svg | |
| abstract-light.jpg | photography | design-systems/aria/assets/imagery/abstract/abstract-light.jpg | |
| abstract-mesh.jpg | photography | design-systems/aria/assets/imagery/abstract/abstract-mesh.jpg | |
| data-network-color.jpg | photography | design-systems/aria/assets/imagery/abstract/data-network-color.jpg | |
| data-network.jpg | photography | design-systems/aria/assets/imagery/abstract/data-network.jpg | |
| spaceship.jpg | photography | design-systems/aria/assets/imagery/abstract/spaceship.jpg | |
| airplane-contrail.jpg | photography | design-systems/aria/assets/imagery/launch/airplane-contrail.jpg | |
| aria-delivers.jpg | photography | design-systems/aria/assets/imagery/launch/aria-delivers.jpg | |
| bullseye.jpg | photography | design-systems/aria/assets/imagery/launch/bullseye.jpg | |
| eye-portrait-wide.png | photography | design-systems/aria/assets/imagery/portraits/eye-portrait-wide.png | |
| eye-portrait.jpg | photography | design-systems/aria/assets/imagery/portraits/eye-portrait.jpg | |
| eye-reflection.png | photography | design-systems/aria/assets/imagery/portraits/eye-reflection.png | |
| mckenna-phillips.jpg | photography | design-systems/aria/assets/imagery/portraits/mckenna-phillips.jpg | |
| planet.jpg | photography | design-systems/aria/assets/imagery/space/planet.jpg | |
| aria-delivers-secondary.jpg | photography | design-systems/aria/assets/imagery/struggle/aria-delivers-secondary.jpg | |
| shadow-tech.jpg | photography | design-systems/aria/assets/imagery/struggle/shadow-tech.jpg | |
| struggle-after-hours.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-after-hours.jpg | |
| struggle-daniel-olah.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-daniel-olah.jpg | |
| struggle-edited.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-edited.jpg | |
| struggle-overwhelmed.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-overwhelmed.jpg | |
| struggle-pixel-machines.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-pixel-machines.jpg | |
| struggle-sojourn.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-sojourn.jpg | |
| struggle-solo.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-solo.jpg | |
| struggle-the-intern.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-the-intern.jpg | |
| struggle-welcome.jpg | photography | design-systems/aria/assets/imagery/struggle/struggle-welcome.jpg | |
| aria-asset-2.svg | logo | content/design-systems/aria/assets/wordmarks/aria-asset-2.svg | |
| aria-asset-3.svg | logo | content/design-systems/aria/assets/wordmarks/aria-asset-3.svg | |
| aria-asset-4.svg | logo | content/design-systems/aria/assets/wordmarks/aria-asset-4.svg | |
| aria-en-black-01.png | photography | design-systems/aria/assets/wordmarks/aria-en-black-01.png | |
| aria-en-black-02.png | photography | design-systems/aria/assets/wordmarks/aria-en-black-02.png | |
| aria-en-black-03.png | photography | design-systems/aria/assets/wordmarks/aria-en-black-03.png | |
| aria-en-black.png | photography | design-systems/aria/assets/wordmarks/aria-en-black.png | |
| aria-en-black.svg | logo | content/design-systems/aria/assets/wordmarks/aria-en-black.svg | |
| aria-en-lockup.svg | logo | content/design-systems/aria/assets/wordmarks/aria-en-lockup.svg | |
| aria-wordmark-on-dark.svg | logo | content/design-systems/aria/assets/wordmarks/aria-wordmark-on-dark.svg | |
| aria-wordmark-on-light.svg | logo | content/design-systems/aria/assets/wordmarks/aria-wordmark-on-light.svg | |
| aria-wordmark.svg | logo | content/design-systems/aria/assets/wordmarks/aria-wordmark.svg | |
| demo-type.svg | logo | content/design-systems/aria/assets/wordmarks/demo-type.svg | |
| Aria-Competitive-Landscape.pdf | design-systems/aria/diagrams/Aria-Competitive-Landscape.pdf | ||
| ai-analytics-comparison-streamlined.html | html | content/design-systems/aria/diagrams/ai-analytics-comparison-streamlined.html | |
| aria-analytics-comparison-3col.html | html | content/design-systems/aria/diagrams/aria-analytics-comparison-3col.html | |
| aria-competitive-landscape.html | html | content/design-systems/aria/diagrams/aria-competitive-landscape.html | |
| aria-pricing.html | html | content/design-systems/aria/diagrams/aria-pricing.html | |
| aria-workflow-flowchart.html | html | content/design-systems/aria/diagrams/aria-workflow-flowchart.html | |
| ARIA - One-Pager Content.docx | other | design-systems/aria/reference/ARIA - One-Pager Content.docx |
Overview
# Aria Design System
**Aria** is Enlighten's Human-AI Analyst product brand. Endorsed as *Aria, by Enlighten*,
it inherits the parent type stack and warm-black / cool-white surfaces but runs on a single
signature primary: **Aria Red**. Look and voice carry the 80s computer-culture inflection of
the parent, expressed through Aria's pale-blue scrolling-JavaScript "code-substrate" panels.
## Color
| Token | Hex | Role |
| --- | --- | --- |
| `--primary` / `--aria-red` | `#EB2726` | Aria Red, the primary brand color. |
| `--primary-soft` | `#F59180` | Tonal partner, captions on dark plates. |
| `--secondary-1` | `#9E1D20` | Darkest red, pressed states, deep accents. |
| `--secondary-2` | `#EE4747` | Mid red, hover and secondary highlights. |
| `--secondary-3` | `#F27062` | Light red, supporting data-viz series. |
| `--warm-black` | `#26292B` | Body type. |
| `--cool-white` | `#FFFFFF` | Page surface. |
| `--neutral` | `#757575` | Labels and captions. |
Surface tints: `--surface-muted #F9F9FA`, `--surface-tint-red #FCEDED`, `--surface-tint-blue #E8F0F7`, `--surface-code #EEF3F8` (the code-substrate base), `--border-hairline #E9E9E9`.
## Type
Same stack as the parent: **Travelia** (`--font-display`, headers and the *by enlighten* wordmark),
**Azeret Mono** (`--font-body`, body and labels), **Doto** (`--font-title`, slide titles, eyebrows,
the `ARIA` wordmark voice, metrics), **BN Hightide** (reserved alternate display).
## What's in this entry
| File / folder | Purpose | Where |
| --- | --- | --- |
| `system.css` | Authoritative design tokens + component CSS | git |
| `brand-board.html` | Full brand/mood board (specimens, patterns) | git |
| `enlighten-aria presentation-client-final.md` | Client presentation (markdown source) | git |
| `enlighten-aria presentation-client-final.pptx` | Presentation export (73 MB) | storage / R2 |
| `assets/icons/` | Capability / framework / operator / software SVG icons | git |
| `assets/wordmarks/` | Aria wordmark marks (SVG to git, PNG to storage) | git + storage |
| `assets/graphics/` | Bottleneck / clocks / trust illustration sets | git + storage |
| `assets/imagery/` | Brand photography (abstract, launch, portraits, space, struggle) | storage / R2 |
| `assets/fonts/` | Licensed fonts (.ttf/.otf) | storage / R2 |
| `diagrams/` | Brand diagrams | git + storage |
| `reference/` | One-pager content (.docx) | storage / R2 |
## How agents should use it
1. Pull `system.css` into context (`enl ds get aria`). It is authoritative.
2. Use the tokens by `var()` name. Aria Red is the primary, never hardcode hex.
3. Aria is endorsed by Enlighten: render `ARIA` all-caps only inside the wordmark, "Aria" in prose.
4. The pale-blue code-substrate panel is Aria's signature; use it behind content, not as the brand itself.
> Binaries (PPTX, fonts, raster imagery, docx) are served from the StorageProvider, `.storage/`
> locally and Cloudflare R2 in production, referenced by `storageKey` and never committed to git.