Design system multi-proyecto

Un kit, cinco identidades.

Tokens, tipografías y componentes extraídos del código real de cada front-end — sin valores inventados. Cada componente se renderiza en vivo con los estilos del proyecto y su snippet de clases debajo. La pestaña Comparativa pone las paletas y tipografías lado a lado.

NEXO SD

Sitio corporativo + demos. Azul-noche tech.

Next 16 · Tailwind v4 · HeroUI

SIGE ERP

ERP escolar CESP. Institucional, solo light.

Next 16 · Tailwind v4 · Headless UI

SIGE Landing

Landing CESP. Misma paleta institucional.

Next 16 · Tailwind v4 · framer-motion

diecast-house

SaaS de colección. Atelier automotriz oscuro.

Next 16 · Tailwind v4 · primitivas propias

Portafolio

Portfolio personal. Stack legacy MUI.

Next 12 · MUI 5 · Emotion · SCSS

Método. Réplica fiel estática: los estilos de cada proyecto se reconstruyen en CSS plano aislado por scope (.t-nexo, .t-sige…) con los hex, radios y sombras reales del repo. Sin build ni Tailwind en runtime — despliegue estático puro.

Proyecto 01

NEXO SD

Sitio corporativo y demos de portafolio. Identidad azul-noche “tech”: fondo marino profundo, azul eléctrico y cian para acentos, glows y gradientes de marca.

nexosdweb/ Next 16 · React 19 Tailwind v4 (@theme inline) HeroUI · CVA framer-motion · lucide

Nota de arquitectura. Los colores viven en @theme pero se aplican hardcoded inline (bg-[#1477F8]), no vía clases de tema — decisión documentada en docs/DECISIONS.md. Fuente de verdad de estilos: app/globals.css + ESTILOS.md.

Fundamentos

Paleta

background

#071423

Fondo principal (azul marino oscuro)

primary

#0B2A5B

Fondos secundarios, gradientes, nodos, mockup

secondary

#1477F8

Botones, acentos, bordes, glows azules

accent

#25C6DA

Highlights, tags, énfasis, underline de links

success

#10B981

Estados de éxito, indicadores, dot del footer

text-muted

#A0AEC0

Todo texto secundario / terciario

foreground

#FFFFFF

Texto principal

Gradiente de marca from-[#1477F8] to-[#25C6DA] · Glows shadow-[0_0_30px_rgba(20,119,248,0.45)], shadow-[0_0_20px_rgba(37,198,218,0.5)] · opacidades usadas: /90 /30 /25 /20 /15 /12 /10 /8 /6 /5 /4 /3 /2

Tipografía

Poppins · font-black · text-6xl · leading-[1.05] · tracking-tight — h1 Hero

Construimos software

Poppins · font-black · text-4xl/5xl — h2 sección

Lo que hacemos

Inter · text-xs · tracking-[0.2em] · uppercase · #25C6DA — eyebrow

Servicios

Inter · text-base/lg · leading-relaxed · #A0AEC0 — cuerpo

Diseño y desarrollo de productos digitales a medida para PyMEs de Yucatán.

Escala menor · text-sm / text-xs / text-[11px] / text-[10px]

14 · 12 · 11 · 10

Radios y superficies

rounded-lg

8px · botones

rounded-xl

12px · CTA, inputs

rounded-2xl

16px · glass-card

rounded-3xl

24px · cards de contenido

rounded-full

tags, dots, success

Elementos decorativos (definidos en globals.css)

gradient-text · accent-line · dot-gridclases utilitarias de marca

.gradient-textNEXO SD

.accent-line

.dot-grid (fondo de esta superficie)radial-gradient · 24px

.gradient-text { background: linear-gradient(90deg,#1477F8,#25C6DA); -webkit-background-clip: text; color: transparent; }
.accent-line   { background: linear-gradient(90deg, transparent, #1477F8, #25C6DA, transparent); }
.dot-grid      { background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 24px 24px; }

Componentes

Buttonprimario · secundario · CTA · submit — default / hover / disabled

primary — default

primary — hover

secondary

CTA grande

submit (gradiente)

disabled

<button class="group inline-flex items-center gap-2 px-6 py-3.5 rounded-lg bg-[#1477F8]
  hover:bg-[#1477F8]/90 text-white font-inter font-medium text-sm transition-all duration-200
  hover:shadow-[0_0_30px_rgba(20,119,248,0.45)] hover:-translate-y-0.5">…</button>

<!-- CTA -->  px-8 py-4 rounded-xl font-poppins font-semibold text-base
<!-- submit --> w-full py-4 rounded-xl bg-gradient-to-r from-[#1477F8] to-[#25C6DA] font-semibold

Input + LabelContact.tsx — default / focus / error

default

Nombre

focus

Correo

error

Correo

<label class="font-inter text-xs text-[#A0AEC0] font-medium">Nombre</label>
<input class="w-full bg-white/5 border border-white/8 rounded-xl px-4 py-3 text-sm font-inter
  text-white placeholder:text-[#A0AEC0]/40 focus:outline-none focus:border-[#1477F8] transition-all" />

Card de contenidoDemos / Software — default / hover

default

◆

NEXO Hotel

Demo de PMS hotelero con reservas y housekeeping.

hover

◆

NEXO Dental

Agenda clínica, expediente y recordatorios.

<div class="group block rounded-3xl border border-white/6 bg-white/[0.03] overflow-hidden
  hover:border-[#1477F8]/30 transition-all duration-500">
  <div class="w-11 h-11 rounded-xl flex items-center justify-center"
       style="background:#1477F815;border:1px solid #1477F825"><Icon size={20} strokeWidth={1.5}/></div>
</div>

glass-card · tag · success stateServices · TechStacks · Contact

.glass-card

Stack

Next.js + NestJS

tag

ReactTypeScriptPrisma

success

✓

.glass-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(8px); }

<span class="tag" />  →  rounded-full bg-white/4 border border-white/6 text-[11px] text-[#A0AEC0]
<div class="w-14 h-14 rounded-full bg-[#10B981]/15 border border-[#10B981]/25" />

Navbarlinks con underline animado + CTA

estado scrolled — bg-[#071423]/90 backdrop-blur-md

NEXO SD Servicios Demos Nosotros Contacto

<nav class="fixed top-0 inset-x-0 z-50 transition-all duration-300 bg-[#071423]/90 backdrop-blur-md border-b border-white/5">
  <a class="text-sm text-[#A0AEC0] hover:text-white relative group">Servicios
    <span class="absolute -bottom-0.5 left-0 w-0 h-px bg-[#25C6DA] group-hover:w-full transition-all duration-300" />
  </a>
  <a class="px-5 py-2.5 rounded-lg bg-[#1477F8] hover:bg-[#1477F8]/90 text-white text-sm font-medium">Contacto</a>

Proyecto 02

SIGE ERP

ERP escolar para CESP (cliente). Paleta institucional provista por el cliente (navy / crimson / gold + neutros bone / slate / mist). Superficie clara, sin modo oscuro por decisión explícita.

sige-cesp/App/frontend/ Next 16 · pnpm Tailwind v4 (:root + @theme inline) Headless UI · sonner · motion

Semánticos derivados. La paleta del cliente no trae verde ni ámbar — se agregaron success / warning (+ -bg / -border) calibrados al mismo peso tonal. error reutiliza crimson. navy-deep / gold-deep son shades para hover / contraste.

Fundamentos

Paleta institucional (6 colores del cliente)

navy

#1b2a4a

Color primario: botones, sidebar, headers, border-l de cards

navy-deep

#101a30

Hover / active de navy; texto sobre claro

crimson

#8c1d2b

Alertas fuertes, estado BAJA, notificaciones

bone

#f7f6f3

Fondo global (--background)

slate

#3a4256

Texto principal (--foreground)

gold

#b8985e

Firma visual: tick del item activo del sidebar, focus ring

mist

#dce1ea

Bordes, separadores, skeletons, segmentos vacíos

Semánticos (derivados ad-hoc)

success

#2f6f52

bg #eaf3ee · border #bfddcb

warning

#8a6d3a

bg #fbf3e4 · border #e9d3a5

error-bg

#f7e8e9

border #e3b8bd · texto = crimson

Tipografía

Fraunces · 600 · tracking-[0.14em] · uppercase — wordmark / display

SIGE · CESP

Public Sans · 400 — cuerpo / UI

Gestión de alumnos, maestros y grupos por sede.

Public Sans · 500 — labels, botones

Registrar alumno

Public Sans · text-xs — metadatos, badges

Última actualización: hace 3 h

Radios y sombras

rounded

skeletons

rounded-md

tooltip

rounded-lg

inputs, botones, cards, paneles

rounded-full

badges de estado

shadow-sm

tiles, cards

shadow-md

tooltip

shadow-lg

dropdowns, toasts, modales

Componentes

Buttonbg-navy — default / hover / disabled

default

hover → bg-navy-deep

disabled

<button class="inline-flex items-center justify-center gap-2 rounded-lg bg-navy px-3 py-2
  text-sm font-medium text-white transition-colors hover:bg-navy-deep disabled:opacity-50">…</button>

InputINPUT_CLASS (estilos.ts) — default / focus / disabled

default

Nombre completo

focus → ring navy/20

Nombre completo

disabled

CURP

export const INPUT_CLASS =
 'mt-1 w-full rounded-lg border border-mist px-3 py-2 text-sm text-slate
  focus:border-navy focus:ring-2 focus:ring-navy/20 focus:outline-none disabled:opacity-50';
export const LABEL_CLASS = 'block text-sm font-medium text-slate/80';

Select (Headless UI Listbox)botón cerrado + panel abierto

cerrado — placeholder

abierto

Maestro

Coordinador administrativo

Director de sede

<ListboxButton class="${INPUT_CLASS} flex items-center justify-between gap-2 text-left">…</ListboxButton>
<ListboxOptions class="absolute z-20 mt-1 max-h-60 w-max min-w-full max-w-xs overflow-y-auto
  rounded-lg border border-mist bg-white py-1 text-sm shadow-lg">
  <ListboxOption class="cursor-pointer px-3 py-2 ... [focus] bg-navy/10 [selected] font-semibold text-navy" />

Badges de estadoEstadoActivoBadge · EstatusEmpleadoBadge

Usuario activoActivo

Baja lógicaInactivo

Empleado · ACTIVOActivo

Empleado · LICENCIALicencia

Empleado · BAJABaja

// activo / ACTIVO
<span class="inline-flex items-center rounded-full border border-success-border bg-success-bg
  px-2.5 py-0.5 text-xs font-medium text-success">Activo</span>
// inactivo / LICENCIA → border-warning-border bg-warning-bg text-warning
// BAJA               → border-error-border  bg-error-bg  text-crimson

Tooltipchip propio (portal), no title nativo

bg-navy · text-bone · flecha rotate-45

<span role="tooltip" class="pointer-events-none z-50 max-w-xs rounded-md bg-navy
  px-2.5 py-1.5 text-xs font-medium text-bone shadow-md">
  {label}
  <span class="absolute left-1/2 size-1.5 -translate-x-1/2 rotate-45 bg-navy -bottom-0.5" />
</span>

Skeleton · Stat tileanimate-pulse bg-mist · tiles con border-l-4

SkeletonLines

SkeletonStatTiles

Stat real (border-navy)

1 248Alumnos activos

Stat real (border-crimson)

17Bajas este mes

<div class="animate-pulse rounded bg-mist h-4 w-full max-w-40" />

<div class="rounded-lg border-l-4 border-navy bg-white p-6 shadow-sm">   // border-crimson en la variante alerta
  <b class="font-display text-2xl text-navy">1 248</b>
</div>

PasswordStrengthMeter5 segmentos · crimson → warning → success

débil

Contraseña débil

fuerte

Contraseña fuerte

✓ Más de 12 caracteres
✓ Una mayúscula
· Un símbolo
✓ Sin secuencias obvias

<div class="h-1.5 flex-1 rounded-full transition-colors ${i < puntaje ? COLOR_POR_NIVEL[nivel] : 'bg-mist'}" />
// COLOR_POR_NIVEL: muy-debil|debil → bg-crimson · media → bg-warning · fuerte|muy-fuerte → bg-success

Sidebar NavLinkAdminShell — activo (tick gold) / idle / hover

<Link class="group relative flex items-center gap-3 rounded-lg py-2 px-3 text-sm font-medium
  focus-visible:ring-2 focus-visible:ring-gold
  ${activo ? 'bg-white/10 text-bone' : 'text-bone/60 hover:bg-white/5 hover:text-bone'}">
  <span class="absolute left-0 h-5 rounded-r-full bg-gold ${activo ? 'w-[3px] opacity-100' : 'w-0 opacity-0'}" />

Toast (sonner) · Paginación--normal-bg bone · --normal-border mist

toast default

Alumno registrado correctamente.

paginación

[data-sonner-toaster] { --normal-bg: var(--bone); --normal-border: var(--mist); --normal-text: var(--slate); }

Proyecto 03

SIGE Landing

Landing pública de CESP. Comparte la paleta institucional exacta con SIGE ERP pero con otra jerarquía: crimson + gold protagonizan los CTAs sobre fondo bone; Fraunces para titulares.

cesp-landing/src/ Next 16 · React 19 Tailwind v4 + config v3 legacy framer-motion · react-spring

Wiring. La paleta se declara en tailwind.config.ts (estilo v3, auto-detectado por el modo compat de Tailwind v4); los componentes aplican los colores con clases nombradas (bg-navy, text-[#8C1D2B]) y hex inline, sin capa de tema.

Fundamentos

Paleta (misma que SIGE ERP)

navy

#1B2A4A

Texto, logo, links, header, CTA mobile

crimson

#8C1D2B

Fondo del CTA primario, acento de titulares

bone

#F7F6F3

Fondo de secciones

slate

#3A4256

Texto de cuerpo

gold

#B8985E

Texto del CTA primario, líneas de eyebrow, glows

mist

#DCE1EA

Declarado en config; poco usado en componentes

Tipografía

Fraunces · 600 · text-4xl→6xl · leading-tight — headline

¿Listo para comenzar tu carrera profesional?

Inter (font-body) · 700 · text-base/lg — nav

Programas · Sedes · Nosotros

Inter · 400 · text-base/lg — cuerpo

Cuéntanos qué quieres estudiar. Sin compromiso, sin letras pequeñas.

Inter · text-xs · tracking-[0.2em] · uppercase · #8C1D2B — eyebrow

Da el siguiente paso

Radios y sombras

rounded-sm

CTA mobile

rounded-md

items de sede

rounded-lg

dropdown mega-menú

rounded-xl

botones CTA

card / header

0 2px 20px rgba(27,42,74,.06)

CTA hover (gold)

0 10px 40px -8px rgba(184,152,94,.45)

Componentes

Buttonprimario crimson+gold · secundario outline · CTA mobile

primary — default

primary — hover

secondary

CTA mobile

<a class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-[#8C1D2B]
  hover:bg-[#8C1D2B]/90 border border-[#B8985E]/25 text-[#B8985E] font-body font-semibold
  hover:shadow-[0_10px_40px_-8px_rgba(184,152,94,0.45)]">Solicitar información</a>

<!-- secondary --> border border-[#1B2A4A]/20 text-[#1B2A4A] hover:bg-[#B8985E]/10 hover:border-[#B8985E]
<!-- mobile   --> bg-[#1b2a4a] text-white rounded-sm shadow-md

Nav link · Eyebrowunderline animado 2px · eyebrow con líneas gold

nav link — hoverProgramas

eyebrow Da el siguiente paso

<span class="relative py-2 font-body text-base font-bold text-[#1b2a4a] group">Programas
  <span class="absolute -bottom-1 left-0 h-[2px] w-0 bg-[#1b2a4a] group-hover:w-full transition-all duration-300" />
</span>

<span class="w-8 h-px bg-[#B8985E]" /> <span class="text-xs text-[#8C1D2B] tracking-[0.2em] uppercase">…</span>

Dropdown mega-menú · Cardbg-white/95 backdrop-blur-md shadow-2xl

dropdown "Sedes"

card

Ingeniería Civil

Modalidad escolarizada · 9 cuatrimestres · RVOE vigente.

<div class="bg-white/95 shadow-2xl rounded-lg border border-[#1b2a4a]/10 p-6 backdrop-blur-md">
  <a class="flex items-start gap-2 p-2.5 rounded-md hover:bg-[#1b2a4a]/5 transition-colors group">…</a>
</div>

Headerestado scrolled — bg-white/60 backdrop-blur-xl

scrolled

Centro de EstudiosSuperiores Peninsular

Programas Sedes

<header class="fixed top-0 inset-x-0 z-50 border-b border-[#1b2a4a]/10 py-4 transition-all duration-300
  bg-white/60 backdrop-blur-xl shadow-[0_2px_20px_rgba(27,42,74,0.08)]">…</header>

Proyecto 04

diecast-house

SaaS de colección de diecast (producto propio). Dirección de arte: “atelier automotriz de ultra lujo” — negro casi puro, acentos metálicos, un único rojo Pagani usado con moderación extrema, esquinas angulares.

diecast-house/src/ Next 16 · Supabase · PWA Tailwind v4 primitivas propias (cn + variantes)

Fuente. Los valores de esta sección salen de docs/DESIGN-SYSTEM.md, la especificación completa del sistema; los componentes se renderizan aquí tal como esa guía los define.

Fundamentos

Base — fondos y superficies

bg-primary

#0A0A0A

Body, páginas

bg-secondary

#121212

Cards, paneles

bg-tertiary

#1A1A1A

Inputs, navbars, superficies elevadas

bg-elevated

#222222

Modales, dropdowns, tooltips

surface

#181818

Tarjetas en grid

Texto y metálicos

text-primary

#F5F5F5

Nunca blanco puro

text-secondary

#A3A3A3

Metadatos, descripciones

text-tertiary

#666666

Deshabilitado, placeholders

metal-bright

#C4C4C4

Iconos, líneas finas, bordes activos

metal-mid

#8E8E8E

Bordes de card, hover

metal-dark

#3A3A3A

Bordes sutiles

metal-line

#2A2A2A

Cuadrículas, blueprint, borde por defecto

Acento signature + semánticos

accent

#A6192E

Pagani Rosso — solo CTAs primarios y estados clave

accent-hover

#C41E35

Hover del acento

accent-muted

#7A1120

Fondo de badges accent

success

#1A7A4A

“Conseguido”, “completado”

warning

#B87333

Cobre/bronce — “pendiente”

error

#8B1A1A

Rojo oscuro opaco

info

#2A5A7A

Azul acero (raro)

Escala tipográfica

display-lg · Playfair Display · 3rem / 1.15 / -0.01em — page titles

Mi Garaje

display-md · 2rem / 1.2 — section headers

Colección 2024

display-sm · 1.5rem / 1.25 — card & modal titles

Pagani Huayra R

body · Inter · 0.9375rem / 1.6 — texto estándar

Escala 1:18 · edición limitada de 500 piezas · acabado en fibra de carbono real.

label · 0.75rem / tracking 0.08em / UPPERCASE — labels, badges, nav

Número de serie

mono · JetBrains Mono · 0.875rem — datos técnicos

SN 042 / 500 · 2024

Espaciado · Radios · Sombras · Easing

xs · 4px

sm · 8px

md · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 64px

4xl · 96px

radius-none · 0

cards, paneles

radius-sm · 2px

inputs, botones

radius-md · 4px

badges

radius-lg · 8px

modales

shadow-card

0 4px 20px rgba(0,0,0,.5)

shadow-card-hover

+ borde metálico

shadow-modal

0 24px 64px rgba(0,0,0,.8)

ease-luxury cubic-bezier(0.65, 0, 0.35, 1) — todas las transiciones de UI, lentas y deliberadas (>300ms). Nunca sombras de color.

Componentes

Buttonprimary · secondary · ghost · danger — sizes sm/md/lg · loading

primary / md

primary / hover

secondary

ghost

danger

size sm

size lg

disabled

<button class="inline-flex items-center justify-center rounded font-medium uppercase tracking-[0.08em]
  transition-all duration-200 ease-luxury disabled:opacity-50
  bg-accent text-text-on-accent hover:bg-accent-hover shadow-button   // primary
  px-6 py-3 text-label">…</button>
// secondary: bg-transparent text-metal-bright border border-metal-dark hover:border-metal-mid hover:bg-bg-tertiary
// ghost: text-metal-mid hover:text-text-primary · danger: text-error border border-error/30 hover:bg-error/10

Badge6 variantes — rect (2px) / pill

accentCompletada

successEn garaje

warningPendiente

defaultSerie

errorAgotada

infoPreventa

roundedPill

<span class="inline-flex items-center font-medium uppercase tracking-[0.08em] px-3 py-1 text-label rounded-sm
  bg-accent-muted text-accent border border-accent/30">…</span>
// success/warning/error/info: bg-{color}/10 text-{color} border border-{color}/30
// default: bg-bg-tertiary text-text-secondary border border-metal-line

Input · Selectbg-bg-tertiary · border metal-line · focus metal-mid

default

Modelo

focus

Modelo

error

AñoAño inválido

select

Escala

<label class="block text-label font-medium text-text-secondary mb-2 uppercase tracking-[0.08em]">Modelo</label>
<input class="w-full bg-bg-tertiary border border-metal-line rounded-sm px-4 py-3 text-body text-text-primary
  placeholder-text-tertiary focus:outline-none focus:border-metal-mid transition-colors duration-200" />
// error → border-error + <p class="mt-1 text-body-sm text-error">

Carddefault / elevated / surface + Card.Title / Content / Footer

default — hover

Pagani Zonda F

Clubsport · 1:18 · AUTOart · adquirida 2023.

surface

Serie Hypercars

7 de 12 piezas conseguidas.

<div class="rounded-none border border-metal-line shadow-card transition-all duration-200 ease-luxury
  hover:shadow-card-hover hover:-translate-y-0.5 bg-bg-secondary p-6">
  <h3 class="text-display-sm font-display font-semibold text-text-primary">…</h3>
  <div class="text-body text-text-secondary">…</div>
  <div class="mt-6 flex gap-3">…</div>
</div>   // elevated: border-metal-dark/50 · surface: bg-bg-tertiary border-metal-line/50

Modal · Spinner · EmptyStatebg-elevated · overlay bg-black/80 backdrop-blur-sm

modal

spinner

empty state

▢

Tu garaje está vacío

Aún no has añadido ninguna pieza a tu colección.

// overlay
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
  <div class="bg-bg-elevated border border-metal-dark rounded-lg shadow-modal max-h-[90vh] overflow-y-auto">
    <div class="flex items-center justify-between p-6 border-b border-metal-dark/50">
      <h2 class="text-display-sm font-display font-semibold">…</h2>

Texturas de marcacarbon-fiber · metal-brushed · blueprint-line

.carbon-fiber

.metal-brushed

.blueprint-line

.carbon-fiber { background-image: linear-gradient(45deg, rgba(255,255,255,.01) 25%, transparent 25%) …; background-size: 20px 20px; }
.blueprint-line { height: 1px; background: linear-gradient(90deg, transparent 0%, #2A2A2A 20%, #2A2A2A 80%, transparent 100%); }

Proyecto 05

Portafolio

Portfolio personal (stack legacy). No usa Tailwind: MUI 5 + Emotion + un SCSS con botones de hover “fancy”. Poca estructura de tokens — un azul de marca, Montserrat, y efectos box-shadow en cascada.

portafolio/ Next 12 · React 18 MUI 5 · Emotion SCSS (styles/styles.scss)

Distinto al resto. Sin design system formal: el tema MUI (Hooks/ThemeHook.tsx) define fuente, primario y modo claro/oscuro; el resto son estilos sueltos en SCSS. Se incluye por completitud — no como referencia de patrón.

Fundamentos

Colores

primary

#0092ff

palette.primary.main (light + dark), cursor ball, --hover de botones

purple

#360A5C

--color del botón .offset

link

#0000EE

Enlaces (FooterLink), visited #551A8B

bg dark

#232323

background.default modo oscuro (light: #ffffff)

#292929

Color de h2 (dark #b9b9b9)

#737373

Color de h3 (dark #a7a7a7)

divider

#d6d6d6

palette.divider (dark #353535)

#0e76a8

Icono social

Tipografía

Montserrat · fontFamily global · fontSize base 16

Sebastián Ávila

h2 · color #292929 · line-height 1.3em

Ingeniero en Software

h3 · color #737373 · line-height 1.3em

Proyectos seleccionados

enlace — a { color:#0000EE } · visited #551A8B

ver repositorio ya visitado

Radios

.br

6px · cards

3px

sueltos

button

5000px · MUI theme (pill)

50%

cursor ball

Componentes

MUI ButtonborderRadius 5000px (pill) — contained / outlined / text

contained

contained — hover

outlined

text

// ThemeHook.tsx
button: { borderRadius: '5000px' }
palette.primary.main: '#0092ff'
<Button variant="contained">Contáctame</Button>

Botones "fancy" (SCSS)box-shadow inset animado · --hover #0092ff

.fill

.raise

.up

.slide

.close

.pulse

.offset (--color #360A5C)

button { background: none; border: 2px solid; color: var(--color); transition: 0.25s; }
button:hover { border-color: var(--hover); color: #fff; }
.fill:hover  { box-shadow: inset 0 0 0 2em var(--hover); }
.raise:hover { box-shadow: 0 0.5em 0.5em -0.4em var(--hover); transform: translateY(-0.25em); }
.slide:hover { box-shadow: inset 6.5em 0 0 0 var(--hover); }
.offset { box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); }  // --color: #360A5C

MUI TextField (outlined) · Card .br · cursor ballMui/Input.tsx

default

Nombre

focus (border 2px #0092ff)

Nombre

multiline

Mensaje

.br card

diecast-house

SaaS de colección · Next.js + Supabase.

.ball (cursor)

<TextField variant="outlined" label={label} multiline={multi} rows={multi ? 5 : undefined}
  sx={{ width: '100%', input: { color }, textarea: { color } }} />

.br { border-radius: 6px; }
.ball { width: 20px; height: 20px; border: 3px solid #0092ff; border-radius: 50%; position: fixed; pointer-events: none; }

Transversal

Comparativa

Paletas y tipografías de los cinco proyectos, lado a lado.

Colores por rol

Rol	NEXO SD	SIGE ERP	SIGE Landing	diecast-house	Portafolio
Fondo base	#071423	#f7f6f3	#F7F6F3	#0A0A0A	#ffffff
Primario / acción	#1477F8	#1b2a4a	#8C1D2B	#A6192E	#0092ff
Acento secundario	#25C6DA	#b8985e	#B8985E	#C4C4C4	#360A5C
success	#10B981	#2f6f52	n/d	#1A7A4A	n/d
warning	n/d	#8a6d3a	n/d	#B87333	n/d
error	n/d	#8c1d2b	n/d	#8B1A1A	n/d
Texto principal	#FFFFFF	#3a4256	#3A4256	#F5F5F5	#000000

Tipografía

NEXO SD

Poppins

Inter — cuerpo

display 400–900 · body Inter · mono Geist Mono

SIGE ERP

Fraunces

Public Sans — cuerpo

Fraunces 500/600 · Public Sans · Geist Mono

SIGE Landing

Fraunces

Inter — cuerpo

Fraunces 400–600 · Inter

diecast-house

Playfair

Inter — cuerpo

Playfair 400/600/700 · Inter · JetBrains Mono

Portafolio

Montserrat

Montserrat — todo

Una sola familia · MUI theme

SIGE ERP y SIGE Landing comparten los 6 hex institucionales exactos (navy / crimson / bone / slate / gold / mist) — la paleta CESP es la base común entre ambos.

Un kit, cinco identidades.

NEXO SD

SIGE ERP

SIGE Landing

diecast-house

Portafolio

NEXO SD

Fundamentos

Paleta

Tipografía

Radios y superficies

Elementos decorativos (definidos en globals.css)

Componentes

NEXO Hotel

NEXO Dental

SIGE ERP

Fundamentos

Paleta institucional (6 colores del cliente)

Semánticos (derivados ad-hoc)

Tipografía

Radios y sombras

Componentes

SIGE Landing

Fundamentos

Paleta (misma que SIGE ERP)

Tipografía

Radios y sombras

Componentes

Ingeniería Civil

diecast-house

Fundamentos

Base — fondos y superficies

Texto y metálicos

Acento signature + semánticos

Escala tipográfica

Espaciado · Radios · Sombras · Easing

Componentes

Eliminar pieza

Tu garaje está vacío

Portafolio

Fundamentos

Colores

Tipografía

Radios

Componentes

diecast-house

Comparativa

Colores por rol

Tipografía

NEXO SD

SIGE ERP

SIGE Landing

diecast-house

Portafolio