Aegis Command Protocol Brand Style Guide
← Color Fonts

Aegis Command Protocol

Sistema dark de tipo command/protocol: pizarra #1E293B como base, azul #3B82F6 como accion, Geist 120px en mayuscula como gesto, y material glass con gradient border shell. El neutro #000000 se tinta en frio hacia slate para evitar el negro plano.

FUENTE: Aegis-Command-Protocol-DESIGN.md

Typography

Geist · una familia
Heading system
Geist
Specimen · 300 · 48px · ls −0.025em
Body system
Geist
16px / 24px · ls 0.025em
This is how body text feels at 18px when applied to a real paragraph block.
Labels · Geist 400 · 12px · ls 1.2px · uppercase. Una sola familia en display, body y utilidad.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Dark · azul de accion
Primary#1E293B
Secondary#3B82F6
Tertiary#64748B
Neutral#000000

Background #1E293B · Surface glass #131A28 · Text #64748B / #CBD5E1 · Border #334155 · Accent #3B82F6

Neutro #000000 tintado en frio a #0E1320 como canvas (evita el negro plano); el hex literal se conserva arriba.

Overview

Grid
LayoutGrid
Content widthFull Bleed
FramingGlassy
GridStrong

Components

Reconstruidos · glass
Iniciar protocolo Consola Docs Activo
Card · radio 0px · padding 40px
Glass first
Shell de gradiente como hairline; profundidad por sombra inset.

Buttons

Primary + link
Primary Secondary Link
Primary#1E293B · text #E2E8F0 · 2px
Border / pad1px rgba(51,65,85,.5) · 12px

Spacing

8px base
Eyebrow
Title block
La copy de descripcion refleja la medida de linea, el offset del icono y el espaciado del CTA sobre el ritmo de 8px.
CTA
Scale
1px8px12px16px24px32px40px48px
Gaps · Card padding
4px8px12px16pxcard 40–48px

Elevation & Depth

Glass

La profundidad se comunica con glass, contraste de borde y recetas de sombra o blur reutilizables. Las superficies leen como glass primero; bordes, sombras y blur solo refuerzan esa eleccion de material.

Tecnica · Gradient border shell Shell exterior con 1px de padding y radio 2px, gradiente linear de rgba(51,65,85,0.5) a rgba(30,41,59,0.2) a rgba(15,23,42,0.5). La superficie real va inset a radio menor para que el gradiente quede como hairline premium en vez de un trazo plano.
Surfaceglass · #131A28
Border1px #334155 / #1E293B
Shadowinset hairlines · 0 2px 4px · 0 20px 60px −15px
Blur4px

Shapes

Radius family

Sistema de radio ajustado anclado en 1px y escalado en cards, botones y superficies de apoyo. Controles y badges se mantienen dentro de la misma familia en vez de inventar excepciones mas afiladas o solo pastilla.

1px2px9999px
Primary radius2px
Icon setSolar

Do's and Don'ts

Guardrails

Do

Usa la paleta primaria como acento principal para enfasis y estados de accion.
Manten el espaciado alineado al ritmo de 8px.
Reutiliza el tratamiento glass de forma consistente en cards y controles.
Conserva los radios dentro de la familia 1px, 2px, 9999px.

Don't

No introduzcas colores de acento fuera de los roles del core salvo un nuevo estado semantico.
No mezcles recetas de sombra o blur ajenas que rompan el sistema de profundidad.
No excedas la intensidad de motion expresiva sin una razon deliberada.

Motion

Expressive

El movimiento se siente expresivo pero centrado en interfaz, texto y transiciones de layout. El timing se agrupa en 800ms y 500ms. Easing favorece ease y cubic-bezier(0.16, 1, 0.3, 1). Hover cambia color y texto; la coreografia de scroll usa parallax para revelados de seccion.

Motion levelExpressive
Durations800ms · 500ms · 700ms
Easingcubic-bezier(.16,1,.3,1)
Hover / scrollcolor, text · parallax

WebGL · ThreeJS

three.js r128

Campo de fondo full-bleed retro-futurista y tecnico: dot-matrix particle field con pulso de respiracion lenta y drift reactivo al puntero. Capa ThreeJS con icosaedros MeshPhysicalMaterial en orbita lenta. Arriba se reconstruye como aproximacion CSS animada; preserva fallback DOM.

<canvas id="webgl-canvas" class="absolute inset-0 z-0 w-full h-full pointer-events-none opacity-60"></canvas>
StackThreeJS · WebGL
Renderalpha · antialias · DPR clamp
EfectoDot-matrix · breathing pulse
GeometryIcosahedron · ~35° FOV
Generado desde DESIGN.md · design-md-styleguide · Aegis Command Protocol
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #1E293B;
  --color-secondary: #3B82F6;
  --color-tertiary: #64748B;
  --color-neutral: #000000;
  --color-background: #1E293B;
  --color-surface: #3B82F6;
  --color-text-primary: #64748B;
  --color-text-secondary: #CBD5E1;
  --color-border: #1E293B;
  --color-accent: #1E293B;
  --font-display: "Geist";
  --font-body: "Geist";
  --radius-md: 2px;
  --space-base: 8px;
  --space-sm: 1px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-gap: 4px;
  --space-card-padding: 40px;
  --space-section-padding: 24px;
}
@theme {
  --color-primary: #1E293B;
  --color-secondary: #3B82F6;
  --color-tertiary: #64748B;
  --color-neutral: #000000;
  --color-background: #1E293B;
  --color-surface: #3B82F6;
  --color-text-primary: #64748B;
  --color-text-secondary: #CBD5E1;
  --color-border: #1E293B;
  --color-accent: #1E293B;
  --font-display: "Geist";
  --font-body: "Geist";
  --radius-md: 2px;
  --spacing-base: 8px;
  --spacing-sm: 1px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-gap: 4px;
  --spacing-card-padding: 40px;
  --spacing-section-padding: 24px;
}
{
  "colors": {
    "primary": "#1E293B",
    "secondary": "#3B82F6",
    "tertiary": "#64748B",
    "neutral": "#000000",
    "background": "#1E293B",
    "surface": "#3B82F6",
    "text-primary": "#64748B",
    "text-secondary": "#CBD5E1",
    "border": "#1E293B",
    "accent": "#1E293B"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Geist",
      "fontSize": "120px",
      "fontWeight": "300",
      "lineHeight": "120px",
      "letterSpacing": "-0.025em",
      "textTransform": "uppercase"
    },
    "body-md": {
      "fontFamily": "Geist",
      "fontSize": "16px",
      "fontWeight": "300",
      "lineHeight": "24px",
      "letterSpacing": "0.025em"
    },
    "label-md": {
      "fontFamily": "Geist",
      "fontSize": "12px",
      "fontWeight": "400",
      "lineHeight": "16px",
      "letterSpacing": "1.2px",
      "textTransform": "uppercase"
    }
  },
  "rounded": {
    "md": "2px"
  },
  "spacing": {
    "base": "8px",
    "sm": "1px",
    "md": "8px",
    "lg": "12px",
    "xl": "16px",
    "gap": "4px",
    "card-padding": "40px",
    "section-padding": "24px"
  }
}
---
version: "alpha"
name: "Aegis Command Protocol"
description: "Aegis Command Content Section is designed for structuring a full-width content block for modern web pages. Key features include reusable structure, responsive behavior, and production-ready presentation. It is suitable for component libraries and responsive product interfaces."
colors:
  primary: "#1E293B"
  secondary: "#3B82F6"
  tertiary: "#64748B"
  neutral: "#000000"
  background: "#1E293B"
  surface: "#3B82F6"
  text-primary: "#64748B"
  text-secondary: "#CBD5E1"
  border: "#1E293B"
  accent: "#1E293B"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: "120px"
    fontWeight: 300
    lineHeight: "120px"
    letterSpacing: "-0.025em"
    textTransform: "uppercase"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "24px"
    letterSpacing: "0.025em"
  label-md:
    fontFamily: "Geist"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
    letterSpacing: "1.2px"
    textTransform: "uppercase"
rounded:
  md: "2px"
spacing:
  base: "8px"
  sm: "1px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  gap: "4px"
  card-padding: "40px"
  section-padding: "24px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#E2E8F0"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "12px"
  card:
    rounded: "0px"
    padding: "40px"
---

## Overview

- **Composition cues:**
  - Layout: Grid
  - Content Width: Full Bleed
  - Framing: Glassy
  - Grid: Strong

## Colors

The color system uses dark mode with #1E293B as the main accent and #000000 as the neutral foundation.

- **Primary (#1E293B):** Main accent and emphasis color.
- **Secondary (#3B82F6):** Supporting accent for secondary emphasis.
- **Tertiary (#64748B):** Reserved accent for supporting contrast moments.
- **Neutral (#000000):** Neutral foundation for backgrounds, surfaces, and supporting chrome.

- **Usage:** Background: #1E293B; Surface: #3B82F6; Text Primary: #64748B; Text Secondary: #CBD5E1; Border: #1E293B; Accent: #1E293B

- **Gradients:** bg-gradient-to-b from-slate-700/50 to-slate-900/50 via-slate-800/20

## Typography

Typography relies on Geist across display, body, and utility text.

- **Display (`display-lg`):** Geist, 120px, weight 300, line-height 120px, letter-spacing -0.025em, uppercase.
- **Body (`body-md`):** Geist, 16px, weight 300, line-height 24px, letter-spacing 0.025em.
- **Labels (`label-md`):** Geist, 12px, weight 400, line-height 16px, letter-spacing 1.2px, uppercase.

## Layout

Layout follows a grid composition with reusable spacing tokens. Preserve the grid, full bleed structural frame before changing ornament or component styling. Use 8px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.

Treat the page as a grid / full bleed composition, and keep that framing stable when adding or remixing sections.

- **Layout type:** Grid
- **Content width:** Full Bleed
- **Base unit:** 8px
- **Scale:** 1px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
- **Section padding:** 24px, 40px, 48px, 80px
- **Card padding:** 40px, 48px
- **Gaps:** 4px, 8px, 12px, 16px

## Elevation & Depth

Depth is communicated through glass, border contrast, and reusable shadow or blur treatments. Keep those recipes consistent across hero panels, cards, and controls so the page reads as one material system.

Surfaces should read as glass first, with borders, shadows, and blur only reinforcing that material choice.

- **Surface style:** Glass
- **Borders:** 1px #1E293B; 1px #64748B; 1px #334155; 1px #000000
- **Shadows:** rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px 2px 4px 0px; rgba(255, 255, 255, 0.02) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -1px 0px 0px inset; rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 20px 60px -15px
- **Blur:** 4px

### Techniques
- **Gradient border shell:** Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 1px padding and a 2px radius. Drive the shell with linear-gradient(rgba(51, 65, 85, 0.5), rgba(30, 41, 59, 0.2), rgba(15, 23, 42, 0.5)) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.

## Shapes

Shapes rely on a tight radius system anchored by 1px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.

Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.

- **Corner radii:** 1px, 2px, 9999px
- **Icon sets:** Solar

## Components

Anchor interactions to the detected button styles. Reuse the existing card surface recipe for content blocks.

### Buttons
- **Primary:** background #1E293B, text #E2E8F0, radius 2px, padding 12px, border 1px solid rgba(51, 65, 85, 0.5).

### Cards and Surfaces
- **Card surface:** radius 0px, padding 40px, shadow rgba(255, 255, 255, 0.02) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -1px 0px 0px inset.
- **Card surface:** border 0px solid rgb(229, 231, 235), radius 0px, padding 40px, shadow rgba(255, 255, 255, 0.02) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -1px 0px 0px inset.

### Iconography
- **Treatment:** Follow the detected set defaults.
- **Sets:** Solar.

## Do's and Don'ts

Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles.

### Do
- Do use the primary palette as the main accent for emphasis and action states.
- Do keep spacing aligned to the detected 8px rhythm.
- Do reuse the Glass surface treatment consistently across cards and controls.
- Do keep corner radii within the detected 1px, 2px, 9999px family.

### Don't
- Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
- Don't mix unrelated shadow or blur recipes that break the current depth system.
- Don't exceed the detected expressive motion intensity without a deliberate reason.

## Motion

Motion feels expressive but remains focused on interface, text, and layout transitions. Timing clusters around 800ms and 500ms. Easing favors ease and 1). Hover behavior focuses on color and text changes. Scroll choreography uses Parallax for section reveals and pacing.

**Motion Level:** expressive

**Durations:** 800ms, 500ms, 700ms, 10000ms, 3000ms, 300ms

**Easings:** ease, 1), cubic-bezier(0.16, 1, 0.3, cubic-bezier(0.4

**Hover Patterns:** color, text

**Scroll Patterns:** parallax

## WebGL

Reconstruct the graphics as a full-bleed background field using webgl, renderer, alpha, antialias, dpr clamp. The effect should read as retro-futurist, technical, and meditative: dot-matrix particle field with green on black and sparse spacing. Build it from dot particles + soft depth fade so the effect reads clearly. Animate it as slow breathing pulse. Interaction can react to the pointer, but only as a subtle drift. Preserve dom fallback.

**Id:** webgl

**Label:** WebGL

**Stack:** ThreeJS, WebGL

**Insights:**
  - **Scene:**
    - **Value:** Full-bleed background field
  - **Effect:**
    - **Value:** Dot-matrix particle field
  - **Primitives:**
    - **Value:** Dot particles + soft depth fade
  - **Motion:**
    - **Value:** Slow breathing pulse
  - **Interaction:**
    - **Value:** Pointer-reactive drift
  - **Render:**
    - **Value:** WebGL, Renderer, alpha, antialias, DPR clamp

**Techniques:** Dot matrix, Breathing pulse, Pointer parallax, DOM fallback

**Code Evidence:**
  - **HTML reference:**
    - **Language:** html
    - **Snippet:**
      ```html
      <!-- Generative 3D Background Canvas -->
      <canvas id="webgl-canvas" class="absolute inset-0 z-0 w-full h-full pointer-events-none opacity-60"></canvas>

      <!-- Ambient Technical Dot Grid -->
      ```
  - **JS reference:**
    - **Language:** html
    - **Snippet:**
      ```html
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      ```

## ThreeJS

Reconstruct the Three.js layer as a full-bleed background field that feels retro-futurist and technical. Use alpha, antialias, dpr clamp renderer settings, perspective, ~35deg fov, icosahedron geometry, meshphysicalmaterial materials, and ambient + directional + point lighting. Motion should read as slow orbital drift, with poster frame + dom fallback.

**Id:** threejs

**Label:** ThreeJS

**Stack:** ThreeJS, WebGL

**Insights:**
  - **Scene:**
    - **Value:** Full-bleed background field
  - **Render:**
    - **Value:** alpha, antialias, DPR clamp
  - **Camera:**
    - **Value:** Perspective, ~35deg FOV
  - **Lighting:**
    - **Value:** ambient + directional + point
  - **Materials:**
    - **Value:** MeshPhysicalMaterial
  - **Geometry:**
    - **Value:** icosahedron
  - **Motion:**
    - **Value:** Slow orbital drift

**Techniques:** PBR shading, Timeline beats, alpha, antialias, DPR clamp, Poster frame + DOM fallback

**Code Evidence:**
  - **HTML reference:**
    - **Language:** html
    - **Snippet:**
      ```html
      <!-- Generative 3D Background Canvas -->
      <canvas id="webgl-canvas" class="absolute inset-0 z-0 w-full h-full pointer-events-none opacity-60"></canvas>

      <!-- Ambient Technical Dot Grid -->
      ```
  - **JS reference:**
    - **Language:** html
    - **Snippet:**
      ```html
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      ```