#111110Sistema de diseño Topcret
Sistema Topcret.
Una base editorial, precisa y material para construir la nueva web de forma coherente.
- Lenguaje
- Editorial
- Geometría
- Recta
- Color
- Mineral
- Contraste
- Objetivo AA
Fundamentos
Color basado en materia y contraste.
La interfaz se mantiene monocroma para que los espacios, las texturas y el producto aporten el color principal.
#1a1a18#3a3a36#8a8a82#f4f4f0#ffffffTokens semánticos
Los componentes consumen roles como superficie, texto, línea y acción. Nunca dependen de un hexadecimal aislado.
- Superficie
- --color-page
- Texto
- --color-text
- Divisor
- --color-line
- Acción
- --color-action
Contraste editorial, lectura precisa.
Playfair Display aporta carácter a los titulares. Roboto mantiene claros el contenido, la navegación y los controles.
Superficies continuas.
Una tipografía funcional para explicar materiales, aplicaciones y procesos sin competir con la fotografía.
Displayclamp(51, 116)Aa
Heading 2clamp(38, 76)Aa
Leadclamp(17, 20)Aa
Body16 / 1.7Aa
Una retícula estable con ritmo variable.
El sistema combina un contenedor de 1320 px, gutters fluidos y composiciones asimétricas que colapsan a una sola columna.
--space-28 px--space-416 px--space-624 px--space-832 px--space-1248 px--space-2080 pxLa fotografía muestra escala, luz y textura.
Cada imagen debe explicar una aplicación real. No se usan como relleno ni se incorporan sin procedencia conocida.
Componentes
Pocas piezas, estados completos.
Cada componente comparte tokens, geometría y foco. Los estados son parte del contrato, no un agregado posterior.
Acciones
Campos y mensajes
Indica una estimación para orientar el proyecto.
Revisa el formato del correo.
Contenido visual
Espacio residencial
Imagen protagonista, proporción controlada y texto concreto debajo.
Espacio comercial
El contraste se sostiene sin overlays ni etiquetas sobre la fotografía.
Acordeón nativo
¿Por qué usamos detalles nativos?
Funcionan con teclado y sin JavaScript, conservando semántica y estados comprensibles.
¿Cuándo crear un componente nuevo?
Solo cuando existe un patrón repetido con una responsabilidad y una API claras.
¿Qué ocurre con el movimiento reducido?
La interfaz elimina transiciones no esenciales y mantiene toda la información disponible.
Contenido y SEO forman parte del diseño.
La estructura, la metadata y el lenguaje se resuelven junto con el layout para evitar páginas visualmente correctas pero incompletas.
- Un H1 editorial y una jerarquía clara.
- Título, descripción y canonical únicos.
- Alt text basado en la imagen real.
- Contenido útil sin depender de JavaScript.
- Open Graph coherente con la página.
topcret.com/design-system/
Sistema de diseño Topcret | Fundamentos web
Fundamentos visuales, tokens, tipografía y componentes para construir la nueva experiencia digital de Topcret con Astro.
Reglas antes de sumar una página.
El objetivo es migrar menos, pero mejor: una decisión comprobable por vez y sin arrastrar residuos del intento anterior.
- InvestigarReunir ruta, contenido, SEO, responsive, interacciones y assets.
- DecidirSeparar lo observado de lo aprobado y preguntar lo que siga pendiente.
- ConstruirReutilizar tokens y componentes sin copiar la implementación histórica.
- VerificarValidar accesibilidad, SEO, rendimiento, móvil, escritorio y build.