Prism prismd.fr
Extracted · 10 sections · 4 colors · grade D

auroxdashboard.com

Accent #5e6ad2 · Inter var — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

4
colors
1
face
1
shadows
41
keyframes
Get DESIGN.md tokens.json Repeindre ce design
auroxdashboard.com
rendu réel · source de vérité

auroxdashboard.com is built on a near-black canvas (rgb(34, 34, 43)). The system uses rgb(255, 255, 255) as the singular interactive color. Moderately rounded CTAs (12px) — modern SaaS standard, neither sharp nor pill alongside Inter var as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 41 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

4 colors measured · click any swatch to copy

Canvas
#22222b
AAA 15.77:1
Ink
#ffffff
AAA 15.77:1
Accent
#ffffff
AAA 15.77:1
Line
#ffffff
AAA 15.77:1
Semantic states
error#ef4444success#10b981warning#f1c40finfo#3498db

4 semantic roles found.

02

Type — the ladder, in the real face

4 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

headline
headline30px · 700
body
body16px · 400 · ×1.88
body sm
body-sm14px · 400 · ×1.14
button
button14px · 600 · ×1.00
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 12px
sm · 16px
md · 24px
base · 32px
lg · 40px
xl · 48px
2xl · 56px
3xl · 64px
Radius
none
0px
xs
12px
sm
20px
md
28px
lg
36px
xl
44px
full
9999px
04

Depth — elevation is extracted, not invented

1 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
05

Motion — easings, transitions & live keyframes

1 easing curve · 41 keyframes · hover a tile to preview

Easing & transitions
transition-fastcubic-bezier(.4, 0, .2, 1)
41 keyframe animations extracted
svelte-w9y5n9-backAndForth
svelte-1ocfouu-rotate
pulse
modeSwitch
ftPulseGlowRed
slideIn
pulseDot
modeSwitchPulse
kf-linear-progress__bar1--indeterminate
kf-linear-progress__bar2--indeterminate
Toastify__trackProgress
Toastify__bounceInRight
06

Components — the closed vocabulary

4 component families · 6 variants counted on the live DOM

ComponentVariants found
inputs×2
links×2
buttons×1
heading H4×1
Component style specs (§4)expand

Inputs & Forms

Text Input

  • Background: #22222b {colors.surface-2}
  • Text: #ffffff {colors.hairline}
  • Padding: 12px 16px
  • Radius: 12px
  • Border: 1px solid rgba(255, 255, 255, 0.1)
  • Shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
  • Font: 14px weight 400
  • Use: Text fields, search inputs
  • Focus: outline: rgba(0, 0, 0, 0) solid 2px
07

Layout — structure & dimensions

5 layout metrics measured

header 64px 1200px max-width
max Width1200px
header Height64px
sidebar Width0px
gap16px
container Padding24px
08

Responsive — real breakpoints

12 media-query stops read from the live CSS

480px
600px
640px
641px
720px
768px
769px
1024px
1180px
1200px
1280px
1536px
09

Do's & Don'ts

14 enforceable rules pulled verbatim from the spec

Do
Use dark background (`#22222b`) as the foundation — this is a dark-mode-native design
Use Inter var as the primary typeface — it defines the brand personality
Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Pure White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
Use 12px border-radius on buttons — the standard corner rounding for interactive elements
Style form inputs with a `1px solid rgba(255, 255, 255, 0.1)` border — use border-based inputs, not floating labels or underline-only
Don't
Don't use light backgrounds — the dark canvas is the native medium
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
Don't invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't remove the input border — the border is the primary affordance indicator for form fields
Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the auroxdashboard.com design system. Canvas #22222b · ink #ffffff · accent #ffffff. Type: Inter var — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.
$ npx prismd add auroxdashboard
DESIGN.md · narrative spec tokens.json