Aura · Agentic AI for Unreal + Unity Game Developers Design System & DESIGN.md Report

Detected Language

Design Style

glassmorphism

1 backdrop-filter rules + 8 translucent white fills

neumorphism

paired inset/outset soft shadows

soft-ui / layered elevation

14 large soft low-opacity shadows

gradient-rich / aurora

many gradient definitions

technical / mono accents

monospace font in use

Palette

Colors

primary

#FF7C6D

2.51 on white · 8.36 on black · 6° 100% 71%

secondary

#200703

19.21 on white · 1.09 on black · 8° 83% 7%

accent

#9C3524

7.12 on white · 2.95 on black · 9° 63% 38%

Token Roles 8 tokens

background

#F6ECDD · 17.96:1 vs black

surface

#FFFFFF · 21:1 vs black

text-primary

#200703 · 19.21:1 vs white

text-secondary

#74482E · 7.75:1 vs white

border

#F4E7CD · 17.16:1 vs black

on-primary

#200703 · 19.21:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

Detected Palette 24 colors by frequency in source CSS

#FF7C6D

used 20× · 6° 100% 71%

#F6ECDD

used 11× · 36° 58% 92%

#74482E

used 11× · 22° 43% 32%

#FFFFFF

used 11× · 0° 0% 100%

#9C3524

used 10× · 9° 63% 38%

#6F2318

used 9× · 8° 64% 26%

#681E12

used 9× · 8° 70% 24%

#200703

used 9× · 8° 83% 7%

#1D1218

used 8× · 327° 23% 9%

#000000

used 7× · 0° 0% 0%

#F4E7CD

used 7× · 40° 64% 88%

#EADCBE

used 7× · 41° 51% 83%

#DCCAA7

used 7× · 40° 43% 76%

#9C4A34

used 7× · 13° 50% 41%

#FF7A60

used 6× · 10° 100% 69%

#FF8C60

used 6× · 17° 100% 69%

#92603A

used 5× · 26° 43% 40%

#784226

used 5× · 20° 52% 31%

#180A04

used 5× · 18° 71% 5%

#3D2B2C

used 4× · 357° 17% 20%

#FFB367

used 4× · 30° 100% 70%

#FFD6A4

used 4× · 33° 100% 82%

#FFB274

used 4× · 27° 100% 73%

#0C050C

used 4× · 300° 41% 3%

Surface Treatments

Gradients

linear-gradient( 152deg,#f4e7cd 0%,#eadcbe 44%,#dccaa7 100% )

radial-gradient( 50% 52% at 50% 54%,rgba(122,70,42,0.15) 0%,rgba(122,70,42,0.07) 46%,rgba(122,70,42,0) 74% )

radial-gradient( 56% 60% at 50% 54%,rgba(255,152,118,0.52) 0%,rgba(255,124,109,0.19) 42%,rgba(255,124,109,0) 72% )

linear-gradient(180deg,#e0553d 0%,#cb4530 100%)

linear-gradient(180deg,#ff9584 0%,#ff7c6d 46%,#f96e5c 100%)

linear-gradient( 180deg,rgba(255,255,255,0.66) 0%,rgba(255,255,255,0) 100% )

Type System

Typography

display

inherit

48px · 400 · LH 1 · LS -0.012em

Aura · Agentic AI for Unreal + Unity Game Developers

headline-lg

inherit

35.2px · 400 · LH 1 · LS -0.012em

Aura · Agentic AI for Unreal + Unity Game Developers

headline-md

inherit

28.5px · 400 · LH 1 · LS -0.012em

Aura · Agentic AI for Unreal + Unity Game Developers

body-lg

inherit

17px · 400 · LH 1.58

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

body-md

inherit

16.6px · 400 · LH 1.58

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14.7px · 400 · LH 1.4 · LS 0.18em

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12.8px · 400 · LH 1.4 · LS 0.18em

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

var(--pixel-font),ui-monospace,monospacevar(--title-font),system-ui,sans-serifui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serifmonospace,monospace"Helvetica Neue",HelveticaNeue,"TeX Gyre Heros",TeXGyreHeros,FreeSans,"Nimbus Sans L","Liberation Sans",Arimo,Helvetica,Arial,sans-serifrigidSquareBold FallbackeightBitOperatorPlusRegulareightBitOperatorPlusRegular Fallback

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

xs

4px

sm

8.8px

md

16px

detected

4px

detected

0.35em

detected

6px

detected

0.55em

detected

9px

detected

10px

detected

11px

detected

0.72em

detected

12px

detected

13px

Breakpoints

400px420px600px620px860px980px1180px

Depth

Elevation & Depth

level 1

inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset -1.5px 0 0 rgba(255, 214, 164, 0.5),3px 0 22px -8px rgba(255, 178, 116, 0.34),-12px 22px 42px -18px rgba(24, 10, 4, 0.62),-30px 54px 92px -44px rgba(12, 5, 12, 0.74)

level 2

inset 0 1.5px 0 rgba(255,244,238,0.68),inset 0 -5px 9px -4px rgba(146,42,26,0.38)

level 3

0 0 0 1px rgba(104,30,18,0.5),0 1px 0 0 #9c3524,0 2px 0 0 #6f2318,0 5px 9px -4px rgba(32,7,3,0.6),0 8px 18px -10px rgba(255,122,96,0.55)

level 4

inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset 1.5px 0 0 rgba(255, 214, 164, 0.5),-3px 0 22px -8px rgba(255, 178, 116, 0.34),12px 22px 42px -18px rgba(24, 10, 4, 0.62),30px 54px 92px -44px rgba(12, 5, 12, 0.74)

level 5

inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),0 20px 44px -18px rgba(24, 10, 4, 0.7),0 60px 104px -46px rgba(10, 4, 12, 0.8)

level 6

inset 0 0 0 1px rgba(255,124,109,0.6),0 0 0 0 rgba(156,53,36,0)

Geometry

Shapes

sm

2px

md

8px

lg

20px

pill

50%

r5

4px

r6

70px

r7

10px

Tokens in Context

Components

card

background{colors.surface}

border1px solid {colors.border}

radius20px

boxShadow{elevation.md}

button-primary

background{colors.primary}

radius50%

Animation

Motion

Applied Animations

eLajEL 6.4s ease-in-out infinitenonehVXtgG 5.6s ease-in-out infinitebsbDlc 3.6s ease-in-out infinite

Easing Curves

cubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.34, 1.52, 0.64, 1)cubic-bezier(0.3,0,0.2,1)cubic-bezier(0.33, 0, 0.5, 1)

Transitions

opacity 200ms ease,transform 240ms cubic-bezier(0.16, 1, 0.3, 1)opacity 120ms lineartransform 320ms cubic-bezier(0.34, 1.52, 0.64, 1),box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),filter 220ms easetransform 240ms cubic-bezier(0.16, 1, 0.3, 1)transform 110ms cubic-bezier(0.3,0,0.2,1),box-shadow 140ms ease-out,filter 140ms ease-outtransform 70ms cubic-bezier(0.3,0,0.2,1),box-shadow 90ms ease-out,filter 90ms ease-outtransform 120ms linear,box-shadow 120ms linear,filter 120ms linearcolor 200ms ease,border-color 200ms ease

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — Aura · Agentic AI for Unreal + Unity Game Developers

Field	Value
Site / Project	https://www.tryaura.dev/
Analyzed on	2026-10-30
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F6ECDD), ink text (#200703), a vivid accent (#9C3524). All type is set in var(--pixel-font),ui-monospace,monospace. Detected font weights: 400, 500. Detected style signatures: glassmorphism; neumorphism; soft-ui / layered elevation; gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://www.tryaura.dev/images/unreal-logo.svg · https://www.tryaura.dev/images/unity-logo.svg

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#FF7C6D`	255, 124, 109	6° 100% 71%	20
`#F6ECDD`	246, 236, 221	36° 58% 92%	11
`#74482E`	116, 72, 46	22° 43% 32%	11
`#FFFFFF`	255, 255, 255	0° 0% 100%	11
`#9C3524`	156, 53, 36	9° 63% 38%	10
`#6F2318`	111, 35, 24	8° 64% 26%	9
`#681E12`	104, 30, 18	8° 70% 24%	9
`#200703`	32, 7, 3	8° 83% 7%	9
`#1D1218`	29, 18, 24	327° 23% 9%	8
`#000000`	0, 0, 0	0° 0% 0%	7
`#F4E7CD`	244, 231, 205	40° 64% 88%	7
`#EADCBE`	234, 220, 190	41° 51% 83%	7
`#DCCAA7`	220, 202, 167	40° 43% 76%	7
`#9C4A34`	156, 74, 52	13° 50% 41%	7
`#FF7A60`	255, 122, 96	10° 100% 69%	6
`#FF8C60`	255, 140, 96	17° 100% 69%	6
`#92603A`	146, 96, 58	26° 43% 40%	5
`#784226`	120, 66, 38	20° 52% 31%	5
`#180A04`	24, 10, 4	18° 71% 5%	5
`#3D2B2C`	61, 43, 44	357° 17% 20%	4

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-primary`	`#FF7C6D`	255, 124, 109	6° 100% 71%
`--color-accent`	`#9C3524`	156, 53, 36	9° 63% 38%
`--color-background`	`#F6ECDD`	246, 236, 221	36° 58% 92%
`--color-surface`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-text-primary`	`#200703`	32, 7, 3	8° 83% 7%
`--color-secondary`	`#200703`	32, 7, 3	8° 83% 7%
`--color-text-secondary`	`#74482E`	116, 72, 46	22° 43% 32%
`--color-border`	`#F4E7CD`	244, 231, 205	40° 64% 88%
`--color-on-primary`	`#200703`	32, 7, 3	8° 83% 7%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Gradients

linear-gradient( 152deg,#f4e7cd 0%,#eadcbe 44%,#dccaa7 100% )
radial-gradient( 50% 52% at 50% 54%,rgba(122,70,42,0.15) 0%,rgba(122,70,42,0.07) 46%,rgba(122,70,42,0) 74% )
radial-gradient( 56% 60% at 50% 54%,rgba(255,152,118,0.52) 0%,rgba(255,124,109,0.19) 42%,rgba(255,124,109,0) 72% )
linear-gradient(180deg,#e0553d 0%,#cb4530 100%)
linear-gradient(180deg,#ff9584 0%,#ff7c6d 46%,#f96e5c 100%)
linear-gradient( 180deg,rgba(255,255,255,0.66) 0%,rgba(255,255,255,0) 100% )
linear-gradient( 180deg,rgba(19,13,26,0.66) 0%,rgba(19,13,26,0.3) 54%,rgba(19,13,26,0) 100% )
linear-gradient( 168deg,#f4e7cd 0%,#eadcbe 52%,#dccaa7 100% )
linear-gradient(180deg,#f4e7cd 0%,#eadcbe 62%,#dccaa7 100%)
radial-gradient(90% 70% at 24% 30%,rgba(255,179,103,0.18),transparent 62%),linear-gradient(180deg,#241a2e 0%,#1a1324 100%)

> 5 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--pixel-font) — stack: var(--pixel-font),ui-monospace,monospace

Font stacks (most used first)

var(--pixel-font),ui-monospace,monospace
var(--title-font),system-ui,sans-serif
ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
monospace,monospace
"Helvetica Neue",HelveticaNeue,"TeX Gyre Heros",TeXGyreHeros,FreeSans,"Nimbus Sans L","Liberation Sans",Arimo,Helvetica,Arial,sans-serif
rigidSquareBold Fallback
eightBitOperatorPlusRegular
eightBitOperatorPlusRegular Fallback

Derived type scale

Token	Size
display	48px
headline-lg	35.2px
headline-md	28.5px
body-lg	17px
body-md	16.6px
label-md	14.7px
label-sm	12.8px

Font sizes (by frequency)

Size	Count
11px	7
1rem	3
10px	3
12px	2
1em	1
16px	1
3rem	1
1.78rem	1
2.2rem	1
0.98rem	1
0.92rem	1
1.04rem	1
0.6em	1
1.06rem	1
0.82rem	1
0.875rem	1
0.8rem	1
0.72rem	1
0.96rem	1

Weights in use: 400, 500

Line heights (by frequency)

Value	Count
1	7
0.95	2
0.92	2
0	1
1.58	1
1.5	1
1.1	1
1.3	1
1.42	1
1.06	1

Letter spacing (by frequency)

Value	Count
0.18em	4
0.038em	3
0.1em	3
0.14em	2
0.17em	2
0.2em	1
-0.012em	1
-0.008em	1

Spacing

Derived spacing scale

Token	Value
xs	4px
sm	8.8px
md	16px

Raw values (by frequency)

Value	Count
4px	4
9px	4
10px	4
0.72em	3
11px	2
20px	2
15px	2
13px	2
12px	2
26px	2
1em	1
0.35em	1
0.85em	1
0.55em	1
6px	1
24px	1

Borders & Radius

Derived radius tokens

Token	Value
sm	`2px`
md	`8px`
lg	`20px`
pill	`50%`

Raw values (resolved, by frequency)

Radius	Count
`20px`	6
`inherit`	5
`2px`	4
`12px`	3
`4px`	2
`0`	1
`50%`	1
`70px`	1
`8px`	1
`10px`	1

Shadows

Derived elevation

Token	Value
sm	`inset 0 1.5px 0 rgba(255,244,238,0.68),inset 0 -5px 9px -4px rgba(146,42,26,0.38)`
md	`inset 0 0 0 1px rgba(246, 236, 221, 0.22),0 8px 20px -12px rgba(10, 4, 12, 0.9)`
lg	`inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset 1.5px 0 0 rgba(255, 214, 164, 0.5),-3px 0 22px -8px rgba(255, 178, 116, 0.34),12px 22px 42px -18px rgba(24, 10, 4, 0.62),30px 54px 92px -44px rgba(12, 5, 12, 0.74)`

All detected shadows

inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset -1.5px 0 0 rgba(255, 214, 164, 0.5),3px 0 22px -8px rgba(255, 178, 116, 0.34),-12px 22px 42px -18px rgba(24, 10, 4, 0.62),-30px 54px 92px -44px rgba(12, 5, 12, 0.74)
inset 0 1.5px 0 rgba(255,244,238,0.68),inset 0 -5px 9px -4px rgba(146,42,26,0.38)
0 0 0 1px rgba(104,30,18,0.5),0 1px 0 0 #9c3524,0 2px 0 0 #6f2318,0 5px 9px -4px rgba(32,7,3,0.6),0 8px 18px -10px rgba(255,122,96,0.55)
inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset 1.5px 0 0 rgba(255, 214, 164, 0.5),-3px 0 22px -8px rgba(255, 178, 116, 0.34),12px 22px 42px -18px rgba(24, 10, 4, 0.62),30px 54px 92px -44px rgba(12, 5, 12, 0.74)
inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),0 20px 44px -18px rgba(24, 10, 4, 0.7),0 60px 104px -46px rgba(10, 4, 12, 0.8)
inset 0 0 0 1px rgba(255,124,109,0.6),0 0 0 0 rgba(156,53,36,0)
inset 0 0 0 1px rgba(246, 236, 221, 0.22),0 8px 20px -12px rgba(10, 4, 12, 0.9)
-22px 0 48px -24px rgba(10,4,12,0.86)

Layout

Container max-width: 860px

Breakpoints

400px
420px
600px
620px
860px
980px
1180px

Animation & Motion

Transitions

opacity 200ms ease,transform 240ms cubic-bezier(0.16, 1, 0.3, 1)
opacity 120ms linear
transform 320ms cubic-bezier(0.34, 1.52, 0.64, 1),box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),filter 220ms ease
transform 240ms cubic-bezier(0.16, 1, 0.3, 1)
transform 110ms cubic-bezier(0.3,0,0.2,1),box-shadow 140ms ease-out,filter 140ms ease-out
transform 70ms cubic-bezier(0.3,0,0.2,1),box-shadow 90ms ease-out,filter 90ms ease-out
transform 120ms linear,box-shadow 120ms linear,filter 120ms linear
color 200ms ease,border-color 200ms ease
transform 220ms cubic-bezier(0.16, 1, 0.3, 1)
opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,transform 880ms cubic-bezier(0.16, 1, 0.3, 1) 80ms
opacity 620ms cubic-bezier(0.33, 0, 0.5, 1),transform 760ms cubic-bezier(0.33, 0, 0.5, 1)
none

Easing curves

cubic-bezier(0.16, 1, 0.3, 1)
cubic-bezier(0.34, 1.52, 0.64, 1)
cubic-bezier(0.3,0,0.2,1)
cubic-bezier(0.33, 0, 0.5, 1)

Animations

eLajEL 6.4s ease-in-out infinite
none
hVXtgG 5.6s ease-in-out infinite
bsbDlc 3.6s ease-in-out infinite

Effects

backdrop-filter: blur(2px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --header-expanded-px: calc(308 * (min(calc(clamp(360px, 100dvh, 2160px) / 608), calc(clamp(360px, 100vh, 2160px) / 608), calc(clamp(760px, 100vw, 3840px) / 1080))));
  --header-compact-px: calc(92 * (min(calc(clamp(360px, 100dvh, 2160px) / 608), calc(clamp(360px, 100vh, 2160px) / 608), calc(clamp(760px, 100vw, 3840px) / 1080))));
  --scroll-base-range: calc(240 * (min(calc(clamp(360px, 100dvh, 2160px) / 608), calc(clamp(360px, 100vh, 2160px) / 608), calc(clamp(760px, 100vw, 3840px) / 1080))));
  --pixel-ratio: 1;
  --delta-h: calc(216 * (min(calc(clamp(360px, 100dvh, 2160px) / 608), calc(clamp(360px, 100vh, 2160px) / 608), calc(clamp(760px, 100vw, 3840px) / 1080))));
  --scroll-range-px: calc(
      var(--scroll-base-range) * (2 / var(--pixel-ratio))
    );
  --animation-progress: 0;
  --main-wrapper-transform-y: calc(
      (var(--scroll-range-px) - var(--delta-h)) * var(--animation-progress)
    );
  --phantom-footer-height: max(
      0px,
      calc(var(--delta-h) * (1 - var(--animation-progress)))
    );
  --cap-r: 12px;
  --wall: 7px;
  --skirt: 3px;
  --press: 2.5px;
  --title-font: "rigidSquareBold","rigidSquareBold Fallback";
  --pixel-font: "eightBitOperatorPlusRegular","eightBitOperatorPlusRegular Fallback";
}

Do's and Don'ts

Do

Do reserve the accent #9C3524 for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #F6ECDD; surfaces should stay within the detected neutral ramp.
Do stick to the detected font weight(s): 400, 500.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #FF7C6D;
  --color-accent: #9C3524;
  --color-background: #F6ECDD;
  --color-surface: #FFFFFF;
  --color-text-primary: #200703;
  --color-secondary: #200703;
  --color-text-secondary: #74482E;
  --color-border: #F4E7CD;
  --color-on-primary: #200703;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: var(--pixel-font),ui-monospace,monospace;
  --font-size-display: 48px;
  --font-size-headline-lg: 35.2px;
  --font-size-headline-md: 28.5px;
  --font-size-body-lg: 17px;
  --font-size-body-md: 16.6px;
  --font-size-label-md: 14.7px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-pill: 50%;
  --shadow-sm: inset 0 1.5px 0 rgba(255,244,238,0.68),inset 0 -5px 9px -4px rgba(146,42,26,0.38);
  --shadow-md: inset 0 0 0 1px rgba(246, 236, 221, 0.22),0 8px 20px -12px rgba(10, 4, 12, 0.9);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(146,96,58,0.3),inset 0 -18px 34px -26px rgba(120,66,38,0.5),inset 1.5px 0 0 rgba(255, 214, 164, 0.5),-3px 0 22px -8px rgba(255, 178, 116, 0.34),12px 22px 42px -18px rgba(24, 10, 4, 0.62),30px 54px 92px -44px rgba(12, 5, 12, 0.74);
  --space-xs: 4px;
  --space-sm: 8.8px;
  --space-md: 16px;
  --tracking-display: -0.012em;
  --tracking-label: 0.18em;
  --container-max: 860px;
}