:root {
--color-primary: #0044FF;
--color-secondary: #3B6BFF;
--color-tertiary: #8FA3CC;
--color-neutral: #FFFFFF;
--color-background: #060C1A;
--color-surface: #0D1630;
--color-text-primary: #FFFFFF;
--color-text-secondary: #8FA3CC;
--color-border: #1A3070;
--color-accent: #0044FF;
--font-display: "Outfit";
--font-body: "DM Sans";
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 9999px;
--space-base: 8px;
--space-sm: 4px;
--space-md: 12px;
--space-lg: 20px;
--space-xl: 32px;
--space-gap: 16px;
--space-card-padding: 28px;
--space-section-padding: 40px;
}
@theme {
--color-primary: #0044FF;
--color-secondary: #3B6BFF;
--color-tertiary: #8FA3CC;
--color-neutral: #FFFFFF;
--color-background: #060C1A;
--color-surface: #0D1630;
--color-text-primary: #FFFFFF;
--color-text-secondary: #8FA3CC;
--color-border: #1A3070;
--color-accent: #0044FF;
--font-display: "Outfit";
--font-body: "DM Sans";
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 9999px;
--spacing-base: 8px;
--spacing-sm: 4px;
--spacing-md: 12px;
--spacing-lg: 20px;
--spacing-xl: 32px;
--spacing-gap: 16px;
--spacing-card-padding: 28px;
--spacing-section-padding: 40px;
}
{
"colors": {
"primary": "#0044FF",
"secondary": "#3B6BFF",
"tertiary": "#8FA3CC",
"neutral": "#FFFFFF",
"background": "#060C1A",
"surface": "#0D1630",
"text-primary": "#FFFFFF",
"text-secondary": "#8FA3CC",
"border": "#1A3070",
"accent": "#0044FF"
},
"typography": {
"display-lg": {
"fontFamily": "Outfit",
"fontSize": "96px",
"fontWeight": "900",
"lineHeight": "96px",
"letterSpacing": "-0.02em",
"textTransform": "uppercase"
},
"body-md": {
"fontFamily": "DM Sans",
"fontSize": "16px",
"fontWeight": "400",
"lineHeight": "26px",
"letterSpacing": "0em"
},
"label-md": {
"fontFamily": "DM Sans",
"fontSize": "11px",
"fontWeight": "500",
"lineHeight": "16px",
"letterSpacing": "0.12em",
"textTransform": "uppercase"
}
},
"rounded": {
"sm": "8px",
"md": "12px",
"lg": "20px",
"pill": "9999px"
},
"spacing": {
"base": "8px",
"sm": "4px",
"md": "12px",
"lg": "20px",
"xl": "32px",
"gap": "16px",
"card-padding": "28px",
"section-padding": "40px"
}
}
---
version: "alpha"
name: "AVENIX"
description: "AVENIX es una agencia creativa tech construida sobre azul electrico y near-black navy: tipografia geometrica en peso maximo, cards flotantes con blue-glow edge y un sistema de identidad disenado para marcas digitales que buscan liderazgo visual."
colors:
primary: "#0044FF"
secondary: "#3B6BFF"
tertiary: "#8FA3CC"
neutral: "#FFFFFF"
background: "#060C1A"
surface: "#0D1630"
text-primary: "#FFFFFF"
text-secondary: "#8FA3CC"
border: "#1A3070"
accent: "#0044FF"
typography:
display-lg:
fontFamily: "Outfit"
fontSize: "96px"
fontWeight: 900
lineHeight: "96px"
letterSpacing: "-0.02em"
textTransform: "uppercase"
body-md:
fontFamily: "DM Sans"
fontSize: "16px"
fontWeight: 400
lineHeight: "26px"
letterSpacing: "0em"
label-md:
fontFamily: "DM Sans"
fontSize: "11px"
fontWeight: 500
lineHeight: "16px"
letterSpacing: "0.12em"
textTransform: "uppercase"
rounded:
sm: "8px"
md: "12px"
lg: "20px"
pill: "9999px"
spacing:
base: "8px"
sm: "4px"
md: "12px"
lg: "20px"
xl: "32px"
gap: "16px"
card-padding: "28px"
section-padding: "40px"
components:
button-primary:
backgroundColor: "#0044FF"
textColor: "#FFFFFF"
rounded: "8px"
padding: "12px 20px"
card:
rounded: "12px"
padding: "28px"
background: "#0D1630"
border: "1px solid #1A3070"
---
## Overview
- Layout: Modular Grid
- Content Width: Full Bleed
- Framing: Floating cards on dark canvas
- Grid: Editorial / asymmetric
## Colors
Dark-mode-first. Electric blue #0044FF as primary action; near-black #060C1A as canvas.
- Primary (#0044FF): Electric blue. Action states, CTAs, primary emphasis.
- Secondary (#3B6BFF): Mid blue. Hover states, secondary elements, gradients.
- Tertiary (#8FA3CC): Blue-tinted gray. Muted text, subtle labels.
- Neutral (#FFFFFF): White. Headlines and high-contrast moments.
Usage: Background #060C1A; Surface #0D1630; Text #FFFFFF; Muted #8FA3CC; Border #1A3070; Accent #0044FF
## Typography
- Display: Outfit, 96px, weight 900, ls -0.02em, uppercase.
- Body: DM Sans, 16px, weight 400, lh 26px.
- Labels: DM Sans, 11px, weight 500, ls 0.12em, uppercase.
## Layout
Modular Grid, Full Bleed. Base 8px rhythm. Section padding 40-80px. Card padding 28px.
## Elevation and Depth
Blue-glow depth system. No glass, no gradient-border shell.
- Borders: 1px solid #1A3070; 1px solid rgba(0,68,255,0.3)
- Glow: box-shadow 0 0 40px -10px rgba(0,68,255,0.3)
- Shadow: 0 20px 60px -20px rgba(0,68,255,0.25)
## Shapes
- Corner radii: 8px, 12px, 20px, 9999px
## Components
Buttons: Primary #0044FF / text #FFFFFF / radius 8px / padding 12px 20px.
Cards: background #0D1630, border 1px solid #1A3070, radius 12px, padding 28px.
## Motion
Slick: 150ms ease-out hover, 300ms staggered fade-up. No parallax.