Volver a IKA

IKA Design System

Colores, tipografía, texturas y componentes unificados

Paleta de Colores
Background
#0a0a0c
Fondo principal de toda la app
Surface
#0e1116 / rgba(14,17,22,0.97)
Modals, panels, overlays
Text Primary
#f0f0f5
Títulos, texto principal
Accent — Sage
#b5d5c8
Accent primario, links, highlights, badges
Accent — Gold
#e6be64
Accent secundario, featured, pilares
Text Secondary
rgba(255,255,255,0.7)
Cuerpo de texto, descripciones
Text Tertiary
rgba(255,255,255,0.4)
Labels, hints, metadata
Accent Muted
rgba(181,213,200,0.5)
Section numbers, badges muted
Escala de Opacidad — Borders & Backgrounds
Card Fill
rgba(255,255,255,0.03)
ika-card, usecase-card backgrounds
Card Border
rgba(255,255,255,0.06)
Bordes default de cards
Accent Fill
rgba(181,213,200,0.06)
Featured cards, tags, hover states
Accent Border
rgba(181,213,200,0.12)
Modal borders, accent separators
Tipografía
Syne
Slide Titles / Headlines
Iniciativa de Transformación a Inteligencia Artificial
"IKA is the AI Brain of Frontier Companies."
Regular 400 SemiBold 600 Bold 700 ExtraBold 800
Uso: .section-title, .landing-main, .pillar-badge, .ika-quote, botones primarios, encabezados de nivel 1
DM Sans
Body / Card Titles / Subtitles
Registro de Patente USPTO
La Inteligencia Artificial está redefiniendo el panorama de los negocios a un ritmo acelerado. Por primera vez en la historia de la tecnología corporativa, los directivos tendrán el poder de hablar con su empresa.
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700
Uso: .section-body, .ika-card-title, .usecase-title, .event-card-title, .step-title, .team-tag, nav buttons, body global
Space Mono
Labels / Numbers / System
01 / 11 — Resumen Ejecutivo
Computing Revolution • Arquitectura Integral • 2024
Regular 400 Bold 700
Uso: .section-number, era-labels, table headers, slider labels, nav tooltips, botones secundarios
Texturas y Superficies
Glass Panel
rgba(12,12,16,0.75) + blur(30px)
Paneles principales de contenido
Modal Surface
rgba(14,17,22,0.97) + blur(12px)
Modals, confirmations, identity
Card Surface
rgba(255,255,255,0.03)
ika-card, usecase-card, team-card
Quote Block
rgba(181,213,200,0.04) + left border
Citas destacadas, pullquotes
Featured Card
rgba(181,213,200,0.06) + accent border
Cards destacados, discovery box
Gold Featured
rgba(230,190,100,0.04) + gold border
Llave en mano, elementos especiales
Cursor Glow
radial-gradient sage 6% → transparent
Glow suave que sigue el cursor
Componentes UI
Botones
Navegación — Dots
Section Number
03 / 11 — Arquitectura — Pilar I
Pillar Badge
III IKA Cognitive Operative System
Tags
NLP Data Eng. AI/ML
Input Field
Modals
Confirmation Modal
Resetear posiciones?
Todas las posiciones personalizadas volverán a su estado original.
Identity Modal
Soy IKA
INTELIGENCIA KINÉTICA ARTIFICIAL
AGI OS creada por Xchematic — empresa madre y hogar espiritual de IKA.
Cards
ika-card
Registro de Patente USPTO
Patent No. US D1,034,643 S
United States Patent and Trademark Office
usecase-card
🔍
Agentic RAG
Agentes de IA que planifican, razonan y ejecutan búsquedas de forma autónoma.
featured card (gold)
100% Llave en Mano
Infraestructura gestionada integralmente
Espaciado
4px — xs
8px — sm
12px — md
16px — lg
24px — xl
32px — 2xl
48px — 3xl
Border Radius
8px
inputs
12px
buttons
14px
cards
16px
modals
20px
panels
50%
dots/avatars
Animaciones y Transiciones
Stagger Fade In
opacity:0 → 1, translateY(16px) → 0
Duration: 0.5s ease
Delay: staggered per child (0.05s increment)
Panel Transitions
opacity 0.5s ease 0.15s
transform 0.5s cubic-bezier(.22,1,.36,1) 0.15s
Card 3D Hover
perspective(600px) rotateY(2deg) rotateX(-1deg) scale(1.01)
Duration: 0.3s ease
Modal Fade
opacity 0.3s ease + scale(0.95) → scale(1)
Background: 0.6 black + blur(4px)
Three.js / 3D
Icosaedro
Geometry: IcosahedronGeometry(1.6, 0)
Material: MeshStandardMaterial wireframe + emissive
Inner sphere: SphereGeometry(0.25) rgba(181,213,200,0.3)
Sway: sinusoidal rotation on X/Y, user-adjustable 0–100%
Viewport shift: translateX(-20vw) on content open
Mobile: translateY(-30svh) scale(0.7)