DESIGN SYSTEM // EXTRACTED

DESIGN
SYSTEM

Documentação completa extraída —
tokens, tipografia, espaçamento e componentes prontos para uso.

GLOBAL DISTRIBUTED — 13 cores INTER TYPEFACE — 400 / 500 4PX BASE UNIT — escala 1–16 SUB-10MS LATENCY — dark theme

Color System

// 13 tokens

        ⚡ Accent / Brand

#0040FF

blue-600 · dark

#00A1FF

blue-500 · primary

#D3E3FF

blue-100 · light

GRADIENT

full spectrum

        Base / Backgrounds

#05070A

background

#0A0E16

surface

#161C2C

surface-2

#1E293B

surface-3

#334155

navy-deep

        Text / Foreground

#D3E3FF

text

#8AA3C6

text-muted

#D4D4D4

syntax

#FAF9F5

warm-light

        Status / Semantic

#28C840 — ONLINE

#F97316 — PROCESSING

#22D3EE — OPTIMAL

#FF5F57 — ERROR

CSS

/* Color System — Ordem */
:root {
  /* backgrounds */
  --color-bg:           #05070A;
  --color-surface:      #0A0E16;
  --color-surface-2:    #161C2C;
  --color-surface-3:    #1E293B;
  --color-warm-dark:    #334155;

  /* text */
  --color-text:         #D3E3FF;
  --color-text-muted:   #8AA3C6;
  --color-warm-light:   #FAF9F5;

  /* accent / brand */
  --color-accent:       #F97316; /* orange-500 — CTA */
  --color-accent-hover: #FB923C; /* orange-400 */
  --color-accent-dark:  #EA580C; /* orange-600 */

  /* status */
  --color-success:      #28C840; /* ONLINE */
  --color-info:         #22D3EE; /* OPTIMAL */
  --color-error:        #FF5F57; /* ERROR */

  /* borders */
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-border-warm:  rgba(249, 115, 22, 0.25);
}

Typography

// Inter · 400 · 500

Scale With Type

        'Inter', -apple-system, BlinkMacSystemFont, sans-serif
      

400 — Regular

Deploy autonomous agents.

500 — Medium

Deploy autonomous agents.

700 — Bold

Deploy autonomous agents.

900 — Black

SCALE WITH AUTONOMY

XS11px400CLUSTER: READY // SYSTEM ONLINE — badges, labels

SM12px500GLOBAL DISTRIBUTED INFRASTRUCTURE — nav links, meta

BASE14px400Deploy autonomous agents optimized for infrastructure — body

LG16px400Open chat · Dismiss · botões text

DISPLAY72px+900SCALE WITH AUTONOMY

CSS

/* Typography */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:   11px;  /* badges, labels */
  --text-sm:   12px;  /* nav, meta */
  --text-base: 14px;  /* body */
  --text-lg:   16px;  /* botões text */
  --font-normal: 400; --font-medium: 500;
  --font-bold:   700; --font-black:  900;
}

Spacing

// base unit: 4px

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1248px

--space-1664px

Border Radius

// 5 valores

0px

sharp

4px

sm · botões

6px

base · chips

8px

md · cards

12px

14px

9999px

pill · badges

★ O site prefere cantos retos (0px) nos elementos maiores como hero e nav — o arredondamento é reservado para elementos pequenos.

Shadows

// 3 níveis

shadow-sm

rgba(0,0,0,0.05) 0px 1px 2px 0px

shadow-md

rgba(0,0,0,.05) 0 1px 0, rgba(0,0,0,.1) 0 4px 4px, rgba(0,0,0,.15) 0 10px 10px, rgba(0,0,0,.1) 0 -1px 0 inset

shadow-lg

rgba(0,0,0,0.15) 0px 40px 80px 0px

shadow-glow

rgba(249,115,22,0.20) 0px 0px 20px 0px — uso: botões accent, hover states

Components

// botões · badges · inputs

        Buttons

preview

CSS

/* Primary CTA */
.btn-primary {
  background: #F97316; color: #000;
  border: none; padding: 10px 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn-primary:hover { background: #FB923C; }

/* Secondary */
.btn-secondary {
  background: transparent; color: #D3E3FF;
  border: 1px solid rgba(255,255,255,0.10); padding: 10px 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Ghost / Tab */
.btn-ghost {
  background: transparent; color: #A6A6A6;
  border: none; padding: 6px 12px;
  font-size: 14px; font-weight: 500;
}
.btn-ghost.active { background: #171717; color: #D3E3FF; }

        Badges / Status

preview

ENV: PRODUCTION PROCESSING OPTIMAL ONLINE

        Card / Panel

preview

            SYSTEM_HEALTH

99.99%

LOAD STATUS
          

LATENCY: 12ms OPTIMAL

Design Tokens

// CSS variables completas

CSS — COPY ALL

/**
 * Design System — Ordem / Aura Build
 * Source: https://axion-agent.aura.build/
 * Stack: shadcn/ui + Tailwind CSS + Inter
 * Theme: Dark futuristic SaaS — Feb 2026
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

:root {
  /* ── COLORS ─────────────────────────── */
  --color-bg:            #05070A;
  --color-surface:       #0A0E16;
  --color-surface-2:     #161C2C;
  --color-surface-3:     #1E293B;
  --color-warm-dark:     #334155;
  --color-text:          #D3E3FF;
  --color-text-muted:    #8AA3C6;
  --color-warm-light:    #FAF9F5;
  --color-syntax-bg:     #1E1E1E;
  --color-syntax-text:   #D4D4D4;

  /* accent */
  --color-accent:        #F97316;
  --color-accent-hover:  #FB923C;
  --color-accent-dark:   #EA580C;

  /* status */
  --color-success:       #28C840;
  --color-info:          #22D3EE;
  --color-error:         #FF5F57;

  /* borders */
  --color-border:        rgba(255,255,255,0.10);
  --color-border-accent: rgba(249,115,22,0.25);

  /* ── FONT ────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-lg:    16px;
  --font-normal: 400; --font-medium: 500;
  --font-bold:   700; --font-black:  900;

  /* ── SPACING (base: 4px) ─────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-12:48px; --space-16:64px;

  /* ── RADIUS ──────────────────────────── */
  --radius-sm:   4px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────── */
  --shadow-sm: rgba(0,0,0,0.05) 0px 1px 2px 0px;
  --shadow-md: rgba(0,0,0,.05) 0 1px 0, rgba(0,0,0,.10) 0 4px 4px,
               rgba(0,0,0,.15) 0 10px 10px, rgba(0,0,0,.10) 0 -1px 0 inset;
  --shadow-lg: rgba(0,0,0,0.15) 0px 40px 80px 0px;
  --shadow-glow:rgba(249,115,22,0.20) 0px 0px 20px 0px;

  /* ── TRANSITIONS ─────────────────────── */
  --ease-fast:   150ms ease;
  --ease-normal: 200ms ease;
  --ease-slow:   300ms ease;
}

/* ── BASE ────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.6;
}

          // Quick Start

Import Font

Adicione Inter via Google Fonts com pesos 400, 500, 700 e 900 para cobrir todos os usos do site.

Copy Tokens

Cole o bloco :root { ... } acima no seu CSS global. Todos os tokens estarão disponíveis como variáveis CSS.

Use Accent

Use --color-accent (#F97316) em CTAs e destaques. Use --color-border para todos os dividers e bordas.

Typography

Headings grandes usam font-weight: 900, letter-spacing: -2 a -3px e text-transform: uppercase.

DESIGN
SYSTEM

Color System

Typography

Spacing

Border Radius

Shadows

Components

Design Tokens

Em breve

Em breve

DESIGNSYSTEM

Color System

Typography

Spacing

Border Radius

Shadows

Components

Design Tokens

Em breve

Em breve

DESIGN
SYSTEM