Design Specification — Nexus Kinetic Defense
| Field | Value |
|---|
| Site / Project | https://cybersecur-nexus.aura.build/ |
| Analyzed on | 2026-07-20 |
| Analysis mode | Automated code extraction (no AI) |
Overview
This design system was extracted programmatically from the source page. It is built on a dark canvas (#1A1040), ink text (#FFFFFF). All type is set in 'Oswald'. Detected font weights: 300, 400, 500, 600, 700.
Color System
Detected palette (by frequency)
| Hex | RGB | HSL | Count |
|---|
#FFFFFF | 255, 255, 255 | 0° 0% 100% | 17 |
#1A1040 | 26, 16, 64 | 253° 60% 16% | 2 |
#28195C | 40, 25, 92 | 253° 57% 23% | 1 |
#A69FD6 | 166, 159, 214 | 248° 40% 73% | 1 |
#000000 | 0, 0, 0 | 0° 0% 0% | 1 |
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-background | #1A1040 | 26, 16, 64 | 253° 60% 16% |
--color-text-primary | #FFFFFF | 255, 255, 255 | 0° 0% 100% |
--color-surface | #FFFFFF | 255, 255, 255 | 0° 0% 100% |
--color-secondary | #1A1040 | 26, 16, 64 | 253° 60% 16% |
--color-text-secondary | #A69FD6 | 166, 159, 214 | 248° 40% 73% |
--color-on-secondary | #FFFFFF | 255, 255, 255 | 0° 0% 100% |
Gradients
- `linear-gradient(to right, theme('colors.brand.grid') 1px, transparent 1px),
linear-gradient(to bottom, theme('colors.brand.grid') 1px, transparent 1px)`
linear-gradient(45deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 8px)
Typography
Primary typeface: Oswald — stack: 'Oswald'
Font stacks (most used first)
'Oswald''Inter''Oswald', sans-serif !importantui-sans-serif, system-ui, sans-serif
Web font sources
- fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Oswald:wght@300;400;500&display=swap
- fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap
Derived type scale
| Token | Size |
|---|
| display | 128px |
| headline-lg | 36px |
| headline-md | 30px |
| title-lg | 20px |
| body-lg | 18px |
| body-md | 16px |
| label-md | 14px |
| label-sm | 12px |
Font sizes (by frequency)
| Size | Count |
|---|
| 72px | 2 |
| 48px | 2 |
| 60px | 2 |
| 36px | 2 |
| 24px | 1 |
| 12px | 1 |
| 96px | 1 |
| 128px | 1 |
| 14px | 1 |
| 16px | 1 |
| 30px | 1 |
| 20px | 1 |
| 18px | 1 |
Weights in use: 300, 400, 500, 600, 700
Line heights (by frequency)
| Value | Count |
|---|
| 0.85 | 1 |
| 1.1 | 1 |
| 1.625 | 1 |
| 1 | 1 |
| 1.25 | 1 |
Letter spacing (by frequency)
| Value | Count |
|---|
| -0.05em | 1 |
| 0.1em | 1 |
| -0.025em | 1 |
| 0.025em | 1 |
Spacing
Derived spacing scale
| Token | Value |
|---|
| unit | 8px |
| xs | 4px |
| sm | 8px |
| md | 16px |
| lg | 32px |
| xl | 64px |
Raw values (by frequency)
| Value | Count |
|---|
| 24px | 9 |
| 48px | 8 |
| 32px | 8 |
| 16px | 7 |
| 4px | 5 |
| 80px | 4 |
| 8px | 4 |
| 64px | 3 |
| 40px | 3 |
| 96px | 3 |
| 20px | 3 |
| 12px | 2 |
| 0px | 2 |
| 10px | 1 |
Borders & Radius
Derived radius tokens
| Token | Value |
|---|
| sm | 4px |
| pill | 9999px |
Raw values (resolved, by frequency)
Shadows
Derived elevation
| Token | Value |
|---|
| md | 0 25px 50px -12px rgba(0,0,0,0.25) |
All detected shadows
0 25px 50px -12px rgba(0,0,0,0.25)
Layout
Container max-width: 896px
Grid columns (largest detected grid): 4
Breakpoints
- 640px
- 768px
- 1024px
- 1280px
Animation & Motion
Transitions
color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)all 150ms cubic-bezier(0.4, 0, 0.2, 1)transform 150ms cubic-bezier(0.4, 0, 0.2, 1)
Easing curves
cubic-bezier(0.4, 0, 0.2, 1)
Components
Extracted from the page's own interactive elements (classes → resolved CSS values).
button-secondary — sample text: “Initialize”
| Property | Value |
|---|
| fontSize | 12px |
| letterSpacing | 0.1em |
| textTransform | uppercase |
| padding | 10px 24px |
| border | 1px solid currentColor |
| transition | color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) |
button-primary — sample text: “Initialize”
| Property | Value |
|---|
| fontSize | 12px |
| textTransform | uppercase |
| letterSpacing | 0.1em |
| padding | 12px 24px |
| border | 1px solid currentColor |
| transition | color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) |
navigation-link
| Property | Value |
|---|
| transition | color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) |
| textColor (hover) | #FFFFFF |
> Page contains canvas/WebGL elements — consider ambient effects layers.
Source Design Tokens (CSS custom properties)
:root {
--body-bg: #1A1040;
--body-color: #ffffff;
}
Do's and Don'ts
Do
- Do keep the canvas at
#1A1040; surfaces should stay within the detected neutral ramp.
- Do stick to the detected font weight(s): 300, 400, 500, 600, 700.
- Do align spacing to the 8px base unit derived from the page.
Don't
- Don't introduce colors outside the detected palette — every hue above was found in the source.
Design Tokens (copy-paste)
:root {
--color-background: #1A1040;
--color-text-primary: #FFFFFF;
--color-surface: #FFFFFF;
--color-secondary: #1A1040;
--color-text-secondary: #A69FD6;
--color-on-secondary: #FFFFFF;
--font-sans: 'Oswald';
--font-size-display: 128px;
--font-size-headline-lg: 36px;
--font-size-headline-md: 30px;
--font-size-title-lg: 20px;
--font-size-body-lg: 18px;
--font-size-body-md: 16px;
--font-size-label-md: 14px;
--font-size-label-sm: 12px;
--radius-sm: 4px;
--radius-pill: 9999px;
--shadow-md: 0 25px 50px -12px rgba(0,0,0,0.25);
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
--tracking-display: -0.05em;
--tracking-label: 0.1em;
--container-max: 896px;
}
