AURO PRISM — DESIGN SYSTEM & STYLE GUIDE
Plain-text mirror of /design-system for AI agents and designers.
Generated from the live design tokens. Safe to source for new assets, pages or social content.
URL: https://auroprism.com/design-system
Text: https://auroprism.com/design-system.txt
Full machine-readable spec: https://auroprism.com/auroprism-spec.txt

============================================================
TABLE OF CONTENTS
============================================================
1. Voice & tone
2. Logo & lockups (downloadable SVGs)
3. Palette & tokens (CSS custom properties)
4. Typography system
5. Monoline icon set (downloadable SVGs)
6. Templates: deck, social, print (downloadable SVGs)
7. Content guidance: decks, print, social
8. Gradient system & positioning
9. Background colorways & atmospheric glows
10. Motion & animation (Doctrine V)
11. Interactive & animated items
12. CTA & link styles
13. Vertical lockup, watermark & prism
14. Per-slide deck guidance
15. Site route map

============================================================
1. VOICE & TONE
============================================================
- Calm, considered, humane. We are a thinking space, not a sales funnel.
- Max ~3-line paragraphs. No emojis. No hype or startup jargon.
- Say "noticing" not surveillance words. Use "comfort", not "accessibility".
- Typography-forward, ethereal aesthetic. Avoid heavy containing boxes.

============================================================
2. LOGO & LOCKUPS
============================================================
Horizontal portal lockup — Light
  - File: /logo/auroprism-lockup-portal-horizontal-light.svg
  - Usage: Light backgrounds, primary brand mark

Horizontal portal lockup — Dark
  - File: /logo/auroprism-lockup-portal-horizontal-dark.svg
  - Usage: Dark backgrounds, dopamine theme

Favicon
  - File: auroprism-favicon-refraction-dark.svg

Prism mark principles
  - Metaphor: A prism splits one input into a calm, ordered spectrum.
  - Gradient: Lavender->Blue (light) / Cyan->Blue (dark), 135deg
  - Do: Keep generous space; let it float, never box it in.
  - Don't: Don't recolor outside the two theme gradients or add a drop shadow.
  - Clear space: Minimum height of the prism mark on all sides.

============================================================
3. PALETTE & TOKENS
============================================================
CSS custom properties (tokens.css)

:root {
  --ap-accent-start: 263 70% 70%; /* Lavender #A78BFA */
  --ap-accent-end:   217 91% 60%; /* Blue #3B82F6 */
  --ap-background:   40 10% 97%;  /* Paper #FAF9F7 */
  --ap-text-primary: 260 25% 15%; /* Ink #221C33 */
  --radius: 1.25rem;
  --ap-font-display: "Fraunces", serif;
  --ap-font-body: "Lexend", system-ui, sans-serif;
}

:root[data-theme="dopamine"] {
  --ap-accent-start: 186 100% 42%; /* Cyan #06B6D4 */
  --ap-accent-end:   217 91% 60%;  /* Blue #3B82F6 */
  --ap-background:   236 54% 5%;   /* Midnight #050611 */
  --ap-text-primary: 0 0% 100%;
}

Named colours
  - Lavender: #A78BFA · hsl(263 70% 70%) · Accent start · Light
  - Blue:     #3B82F6 · hsl(217 91% 60%) · Accent end
  - Cyan:     #06B6D4 · hsl(186 100% 42%) · Accent start · Dopamine
  - Paper:    #FAF9F7 · hsl(40 10% 97%)  · Light background
  - Ink:      #221C33 · hsl(260 25% 15%) · Primary text
  - Midnight: #050611 · hsl(236 54% 5%)  · Dopamine background

============================================================
4. TYPOGRAPHY SYSTEM
============================================================
Display / headings
  - Font: Fraunces, serif
  - Treatment: Italic for large display, weight 200-400
  - Usage: Page titles, hero headlines, deck headlines

Body / UI
  - Font: Lexend, system-ui, sans-serif
  - Treatment: Regular weight, calm spacing
  - Usage: Paragraphs, labels, navigation, button text

Accessibility fonts (loaded via CDN, optional toggle)
  - Atkinson Hyperlegible — high legibility, open counters
  - OpenDyslexic — weighted bottom for dyslexic readers

============================================================
5. MONOLINE ICON SET
============================================================
12 icons, each ships in two safe variants:
  - Light: Lavender #A78BFA -> Blue #3B82F6 gradient stroke
  - Dark:  Cyan #06B6D4 -> Blue #3B82F6 gradient stroke
  - Size: 48x48 viewBox, 1.8px stroke, round caps/joins
  - Download naming: auroprism-icon-{name}-{variant}.svg

Available icons
  1. calm      — Concentric circles with radial paths, centre dot
  2. focus     — Target rings with diagonal corner accents
  3. book      — Open book with two pages
  4. ethics    — Scales of justice motif
  5. check     — Simple checkmark
  6. arrowRight — Right arrow with chevron head
  7. contrast  — Circle bisected vertically, half-filled
  8. pattern   — Central dot with four directional diamonds
  9. signal    — Waveform line with endpoint dot
  10. move     — Curved path with arrowhead and endpoint dot
  11. overload — Star burst with cross cancellation
  12. journey  — Connected path with three waypoint dots
  13. systems  — Four corner nodes with central hub

============================================================
6. TEMPLATES: DECK, SOCIAL, PRINT
============================================================
All templates ship as editable SVGs with placeholder copy.
Open in Figma, Illustrator or any vector editor.

Deck slide (16:9)
  - Dimensions: 1920 x 1080
  - Light: auroprism-deck-light.svg
  - Dark:  auroprism-deck-dark.svg
  - Layout: Wordmark top-left, large serif headline, gradient accent word,
    sans subtitle, gradient rule, URL bottom-right, soft radial glow

Social post (1:1)
  - Dimensions: 1080 x 1080
  - Light: auroprism-social-light.svg
  - Dark:  auroprism-social-dark.svg
  - Layout: Wordmark top-left, large serif headline + gradient accent word,
    supporting line, gradient rule, handle bottom-right, soft circle glow

Print / card (7:4)
  - Dimensions: 1050 x 600, rx:28
  - Light: auroprism-print-light.svg
  - Dark:  auroprism-print-dark.svg
  - Layout: Gradient left-edge accent, wordmark, name, role, contact line

Wordmark SVG text treatment
  - Font: Georgia, 'Fraunces', serif
  - Style: Italic, letter-spacing 2
  - Text: "aurøprism" (note the ø — refraction glyph)

============================================================
7. CONTENT GUIDANCE
============================================================
Decks
  - One idea per slide
  - Serif headline, sans support line
  - Let whitespace carry weight

Print
  - Gradient edge accent only
  - Generous margins
  - Single contact line, no clutter

Social
  - A single calm thought
  - No hype, no emojis
  - Consistent handle + gradient mark

============================================================
8. GRADIENT SYSTEM & POSITIONING
============================================================
Accent gradient · Light theme
  - Start stop: #A78BFA · hsl(263 70% 70%) · --ap-accent-start
  - End stop: #3B82F6 · hsl(217 91% 60%) · --ap-accent-end
  - Angle: 135deg (top-left -> bottom-right)
  - CSS: linear-gradient(135deg, hsl(var(--ap-accent-start)), hsl(var(--ap-accent-end)))

Accent gradient · Dopamine (dark) theme
  - Start stop: #06B6D4 · hsl(186 100% 42%) · --ap-accent-start
  - End stop: #3B82F6 · hsl(217 91% 60%) · --ap-accent-end
  - Angle: 135deg
  - Trigger: :root[data-theme="dopamine"]

Gradient text (.ap-gradient-text)
  - Angle: 135deg
  - Clip: background-clip: text; color: transparent
  - Stops: accent-start -> accent-end (theme aware)

Gradient border (.ap-gradient-border)
  - Hairline gradient ring via masked padding-box. 1px idle, brightens on hover.
  - Angle: 135deg
  - Idle opacity: 0.4 / 0.4
  - Hover opacity: 0.7 / 0.6
  - Padding: 1px (mask-composite: exclude)

Underline gradient (links, CTAs, nav)
  - Horizontal sweep used under text links.
  - Angle: 90deg (left -> right)
  - Height: 2px, radius 1px
  - Reveal: scaleX(0) -> scaleX(1), origin flips right->left on hover
  - Easing: cubic-bezier(0.34, 1.56, 0.64, 1) — gentle overshoot

============================================================
9. BACKGROUND COLORWAYS & GLOWS
============================================================
Light theme surfaces
  - Background: #FAF9F7 · hsl(40 10% 97%) · --ap-background
  - Surface / card: #FFFFFF · hsl(0 0% 100%) · --ap-surface
  - Panel: hsl(270 20% 96%) · --ap-panel
  - Border: hsl(270 15% 88%) · --ap-border
  - Watermark ink: hsl(260 25% 15% / 0.08)

Dopamine (dark) theme surfaces
  - Background: #050611 · hsl(236 54% 5%) · --ap-background
  - Surface / card: rgba(15,23,42,0.95) · hsl(236 45% 7%)
  - Panel: rgba(255,255,255,0.04)
  - Border: hsl(236 30% 18%)
  - Watermark ink: hsl(186 100% 50% / 0.1)

Atmospheric glows
  - Soft radial pools behind hero content. Always low-opacity, never animated in a loop.
  - Breathing gradient: fades 0 -> 0.2 opacity once, then static (.breathing-gradient)
  - Card hover pool: bottom-only: 0 20px 40px -10px blue/cyan 0.35 + 0 40px 80px -15px 0.30
  - Light pool color: rgba(59,130,246,*) blue + rgba(96,165,250,*) light-blue
  - Dark pool color: rgba(34,211,238,*) cyan + rgba(59,130,246,*) blue
  - Placement: Glow lives BELOW the element only — no halo above (Prism Glass v2)

============================================================
10. MOTION & ANIMATION (DOCTRINE V)
============================================================
Doctrine V — first principles
  - Rule 1: No infinite animations on content. Everything resolves to a stable resting state.
  - Rule 2: Honour prefers-reduced-motion AND :root[data-reduce-motion="true"].
  - Rule 3: Motion clarifies, never decorates. Calm over spectacle.
  - Exception: Focus-state pulses (a11y affordance) may loop while focused only.

Single-play animations (load / reveal)
  - fade-in: 0.6s ease-out · translateY(20px) -> 0
  - breathing-gradient: 1.5s ease-out · opacity 0 -> 0.2, scale 0.98 -> 1
  - watermark-fade-in: 0.8s ease-out, 0.3s delay · opacity -> 0.08, slides 20px -> 0
  - ap-brand-shimmer: 2.7s, 0.4s delay · one gradient sweep, resolves to solid gradient
  - ap-shimmer-text: 6.6s · single highlight pass across text, resolves to ink
  - float (legacy): 6s ease-in-out · runs once (count 1), translateY -10px

Transitions (interaction)
  - Card hover: transform/box-shadow/border 250ms ease-out
  - Card active: scale(0.995) at 100ms
  - Button hover: all 300ms · scale(1.04)
  - Button active: scale(0.98)
  - Underline reveal: 300ms cubic-bezier(0.34,1.56,0.64,1)
  - Icon glow: filter 300ms ease
  - Theme switch: background/color 500ms ease (body)

Looping focus pulses (accessibility only)
  - These are the only permitted infinite loops — active solely while an element is focused.
  - gradient-pulse-blue: 2s · button focus border
  - focus-ring-pulse-blue: 2s · 2px -> 4px ring
  - input-focus-pulse-blue: 2.5s · 3px -> 5px ring
  - Reduced motion: all collapse to a static 3px ring

Interactive motion preview
  - Available on the rendered page at /design-system#motion
  - Click through each doctrine to play it live using real shipped CSS.
  - Demos: Fade-in, Shimmer, Card hover lift, Button hover/active, Underline reveal,
    Icon glow transition, Focus pulse, Theme switch.

============================================================
11. INTERACTIVE & ANIMATED ITEMS
============================================================
Prism Glass Card (.ap-card / .ap-card-hero)
  - The signature surface. Calm at rest, lifts with a bottom-only light pool.
  - Radius: 16px (not the global --radius)
  - Padding: p-6 (card) · p-8 md:p-10 (hero)
  - Idle shadow: barely-there: 0 1px 3px /0.04, 0 4px 12px /0.03
  - Hover lift: translateY(-4px), z-index 5
  - Hover light: pool BELOW only — never a top halo
  - Hover border: blue 0.20 (light) / cyan 0.25 (dark)
  - Active: scale(0.995–0.998)

Icon glow (.ap-icon-glow / .ap-icon-halo)
  - Intensity is token-driven so it can be retuned per context.
  - Light idle alpha: 0.18 · hover-soft 0.32 · hover-glow 0.30 · halo 0
  - Dopamine idle alpha: 0.28 · hover-soft 0.45 · hover-glow 0.42 · halo 0.30/0.50
  - Density: comfortable: theme defaults (hero / generous space)
  - Density: dense: muted glow for toolbars/tables (.ap-density-dense)
  - Density: editorial: near-zero glow next to body copy (.ap-density-editorial)

Floating Action Button (.ap-fab)
  - Border: 1.5px masked gradient ring, 0.6 -> 0.9 on hover
  - Hover: translateY(-2px) + soft accent shadow
  - Active: translateY(0) scale(0.95)

============================================================
12. CTA & LINK STYLES
============================================================
Primary CTA (.ap-btn-primary)
  - Pill button on a card surface with a masked gradient ring.
  - Shape: rounded-full · px-6 py-3 · font-medium
  - Surface: bg-card, text-foreground
  - Ring idle: gradient 0.5/0.5
  - Ring hover: gradient 0.8/0.8 + 16px accent glow
  - Hover text: blue hsl(217 91% 45%) / cyan hsl(186 100% 50%)
  - Motion: scale(1.04) hover, scale(0.98) active

Secondary CTA (.ap-btn-secondary)
  - Surface: transparent pill
  - Ring idle: gradient 0.35/0.35
  - Ring hover: gradient 0.7/0.7, text -> accent-end
  - Motion: scale(1.04) / 0.98

Tertiary CTA & links (.ap-btn-tertiary / .ap-nav-link)
  - Text link with a 90deg gradient underline that wipes in from the left on hover.
  - Idle: text-secondary, underline scaleX(0)
  - Hover: text -> accent-end, underline scaleX(1)
  - Easing: cubic-bezier(0.34,1.56,0.64,1)
  - Nav active: persistent underline + primary text
  - Focus: 2px accent outline, 4px offset

============================================================
13. VERTICAL LOCKUP, WATERMARK & PRISM
============================================================
Vertical "AurøPrism" watermark (.watermark)
  - The signature ambient mark — a rotated wordmark that reads like light refracting through a prism. Fixed to the right edge, sits behind content.
  - Text: AurøPrism (note the ø — refraction glyph)
  - Orientation: rotate(90deg), reads bottom -> top
  - Position: fixed, right edge (-6vw to -28vw responsive), vertically centered
  - Type: Fraunces, italic, weight 200, letter-spacing 0.1em
  - Size: clamp(8rem, 15vw, 20rem)
  - Treatment: blur(3px), final opacity 0.08, theme-tinted ink
  - Behaviour: pointer-events none, hidden < 480px, fades in once then static

Horizontal portal lockup
  - Light: /logo/auroprism-lockup-portal-horizontal-light.svg
  - Dark: /logo/auroprism-lockup-portal-horizontal-dark.svg
  - Favicon: auroprism-favicon-refraction-dark.svg
  - Clear space: min. height of the prism mark on all sides

Prism mark principles
  - Metaphor: A prism splits one input into a calm, ordered spectrum.
  - Gradient: Lavender->Blue (light) / Cyan->Blue (dark), 135deg
  - Do: Keep generous space; let it float, never box it in.
  - Don't: Don't recolor outside the two theme gradients or add a drop shadow.

============================================================
14. PER-SLIDE DECK GUIDANCE
============================================================
01 Auro Prism
  Intent: Set the tone — calm, intelligent, alive.
  Treatment: Rotating wordmark, vertical watermark visible. One mark, huge whitespace. No subtitle clutter.

02 [The Problem] We're scaling intelligence. Not clarity.
  Intent: Name the tension everyone feels.
  Treatment: Single sentence, serif. Let the line breathe; no bullet list.

03 [What it is] A design lens for calmer, more ethical systems
  Intent: Define the lens, not a product.
  Treatment: Short framing paragraph + accent eyebrow. Use "noticing", avoid surveillance words.

04 [Structure] Three layers, one system
  Intent: Show Doctrine -> Field Notes -> Pulse hierarchy.
  Treatment: Three calm cards / nodes. Equal weight, gradient connectors only.

05 [Applications] From thinking -> leverage
  Intent: Translate philosophy into use.
  Treatment: Arrow motif (->). Group by audience, keep each line to one idea.

06 Thinking is useful
  Intent: Bridge into the live prototype.
  Treatment: Quiet transition slide. One line, lots of space, leads the eye forward.

07 [Pulse] Pulse — a system that responds
  Intent: Glimpse the system, not a SaaS dashboard.
  Treatment: Embedded lightweight prototype. Calm, reversible, intelligent guidance. No KPI walls.

08 [Why now] An inflection point
  Intent: Make the timing feel inevitable.
  Treatment: Restrained, future-facing. Avoid hype; state the shift plainly.

09 [Collaboration] This overlaps with your work
  Intent: Invite partnership.
  Treatment: Warm, specific. Frame as shared inquiry, not a pitch.

10 Design that feels
  Intent: Land on emotion.
  Treatment: Final mark + single line. Resolve all motion to rest. End calm.

============================================================
15. SITE ROUTE MAP
============================================================
/                  Home — Primary narrative entry point.
/v2                V2 Editorial Landing — Premium, editorial consultancy framing.
/doctrine          Doctrine — The principled core (Doctrine V etc.).
/the-core          The Core — Deep dive into the framework.
/scorecard         Scorecard — Interactive evaluation surface.
/examples          Examples — Index of worked examples.
/worked-example    Worked Example — General applied case.
/worked-example-ai Worked Example · AI — AI-system applied case.
/worked-example-clinician  Worked Example · Clinician — Clinical applied case.
/pulse             Pulse — The responsive-system layer.
/field-notes       Field Notes — Longform essays (640px column).
/deck              Deck — Interactive presentation.
/design-system     Design System — This page — single source of truth.
/icon-gallery      Icon Gallery — Downloadable brand icons.

============================================================
END OF DESIGN SYSTEM & STYLE GUIDE
============================================================