Guía interna

Estilos de Planotek3D

Esta página define el sistema visual de Planotek3D: colores, tipografías, espaciado, radios, botones, cards, uso de imágenes y contrastes. Es una página interna de referencia, no está pensada para posicionar, sino para que todas las páginas se parezcan entre sí y se diferencien de la home sin perder coherencia.

Instrucciones: cuando crees nuevas páginas (servicios, sectores, procesos), reutiliza estos estilos. Si algo no encaja, primero revisa esta guía antes de inventar un nuevo estilo.

Si en producción ves algo distinto a lo que hay aquí, la guía manda. Ajusta la página de contenido para que vuelva al sistema.

Fundamentos

Paleta de color Planotek3D

Colores alineados con el estilo actual de la principal: fondo cálido, primario teal profundo, acento suave para detalles y un oscuro técnico para fondos y texto.

Fondo de página

Usar como fondo general (body). Evitar blanco puro salvo en módulos muy concretos.

Superficie clara

Fondos de secciones, cards y cajas de contenido principal.

Fondo alterno

Secciones alternas para crear ritmo visual sin parecer una landing.

Primario

Botones principales, enlaces clave, iconos y detalles destacados.

Acento suave

Detalles de logo, líneas finas, pill-tags y pequeños acentos en gráficos.

Fondo oscuro

CTAs finales, bandas hero específicas y secciones donde el contenido vaya en claro sobre fondo oscuro.

/* Tokens de color recomendados (puedes pegarlos en :root de tu CSS global) */
:root {
  --color-bg-page: #f6f4ef;
  --color-bg-surface: #fbfaf7;
  --color-bg-alt: #efebe4;
  --color-bg-dark: #12263f;

  --color-primary: #0f4f61;
  --color-primary-soft: #96d0de;
  --color-accent: #123d4b;

  --color-text-main: #12263f;
  --color-text-muted: #607080;
  --color-border-soft: rgba(18,38,63,0.12);
}

Fundamentos

Tipografía y jerarquía de texto

Noto Serif para títulos (como en el logo y la home) e Inter para cuerpo y UI. Todo con tamaños fluidos usando clamp() para evitar textos pequeños o gigantes según pantalla.

H1 · Páginas interiores

Escaneado 3D para arquitectura

Uso: título principal de cada página interior. Evitar copiar tal cual el H1 de la home. Máximo 2 líneas.

H2 · Secciones

Servicios técnicos digitales

Uso: títulos de secciones dentro de páginas (Proceso, Entregables, Sectores, FAQ...).

H3 · Cards y pasos

Escaneado láser 3D

Uso: títulos de cards de servicio, sectores o pasos del proceso.

Kicker de sección

Uso: etiquetas pequeñas sobre H2 (“Servicios técnicos digitales”, “Proceso”, “Entregables”). Siempre en mayúsculas y con tracking alto.

No generes cada vez tamaños “a ojo” en Bricks. Intenta mapear H1, H2, H3, body y small a variables de la escala para mantener consistencia.

/* Tipografía fluida usando clamp() */
:root {
  --font-size-base: clamp(1rem, 0.96rem + 0.3vw, 1.1rem);
  --font-size-h1: clamp(2.3rem, 1.5rem + 2.5vw, 3.8rem);
  --font-size-h2: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  --font-size-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
}

body { font-size: var(--font-size-base); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

Fundamentos

Espaciado y secciones con clamp()

Usa una escala simple de espaciado, pero haz que se adapte al ancho de pantalla con clamp() para evitar secciones apretadas en móvil y exageradas en escritorio.

Tokens de espacio

XS –
: detalles, chips, separación pequeña.
S –
: gaps entre textos breves.
M –
: padding estándar de cards.
L –
: separación entre bloques.
XL/XXL –
,
: padding vertical de sección.

Secciones

Regla: cada sección importante (bloque de contenido) debería tener entre 3.5rem y 5rem de padding vertical en función de la pantalla.

Esto lo resuelve bien un clamp() aplicado a la clase de sección.

:root {
  --space-xs: clamp(0.4rem, 0.3rem + 0.3vw, 0.6rem);
  --space-s:  clamp(0.7rem, 0.6rem + 0.4vw, 1rem);
  --space-m:  clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
  --space-l:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --space-xl: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem);
  --space-xxl:clamp(3.5rem, 3rem + 2vw, 5rem);
}

.section {
  padding-block: var(--space-xl);
}

Componentes

Botones y llamadas a la acción

Un sistema de 3 tipos de botones es suficiente: primario, secundario y ghost. Cambia el copy, no el estilo.

Botón primarioBotón secundarioBotón ghost

En móvil, los botones clave deberían ocupar todo el ancho del contenedor para facilitar el tap. En desktop, pueden ser más compactos.

/* Botones base (clamp en altura y padding) */
.btn {
  min-height: clamp(2.6rem, 2.2rem + 0.8vw, 3rem);
  padding-inline: clamp(1rem, 1.1rem + 0.4vw, 1.6rem);
}

Componentes

Cards, recuadros y radios

Casi todos los recuadros y fotos comparten esquinas redondeadas. Usa una pequeña variación según jerarquía: S para chips, M para cards pequeñas, L/XL para bloques grandes y fotos.

Escaneado láser 3D

Card típica de servicio. Mantener el mismo radio en todo el catálogo de servicios y en las secciones relacionadas.

Arquitectos

Card de sector. Usa el mismo estilo de card, cambiando solamente iconos y textos, no el sistema visual.

.card {
  border-radius: var(--radius-l); /* mismo para servicios, sectores, notas */
  padding: var(--space-m);
  background: rgba(251,250,247,0.96);
  border: 1px solid rgba(18,38,63,0.09);
  box-shadow: var(--shadow-soft);
}

/* Chips y pill-tags */
.chip {
  border-radius: 999px;
  font-size: var(--font-size-xs);
}

Imágenes y contraste

Fotos enmarcadas y texto legible

Aquí definimos cómo se deben mostrar las fotos y cómo garantizar el contraste del texto sobre ellas. Esto es importante porque has tenido problemas de contraste en fondos e imágenes.

Foto enmarcada (sin texto encima)

Captura in situ

Uso: mostrar una captura representativa sin texto encima. El label sirve como contexto (“Captura in situ”, “Nube de puntos”, etc.).

Imagen con overlay y texto (contraste)

Escaneo 3D arquitectónico en la Costa del Sol

Ejemplo de texto sobre imagen con overlay oscuro para garantizar contraste mínimo 4.5:1 en cuerpo y 3:1 en titulares grandes.

Hero técnico

Regla: siempre que haya texto sobre foto, aplica un overlay oscuro (degradado o sólido) como en este ejemplo, hasta que el contraste sea suficiente según WCAG.

Textos sobre imágenes deben respetar un contraste mínimo aproximado de 4.5:1 para cuerpo y 3:1 para titulares grandes. Si dudas, oscurece un poco más el overlay o mueve el texto a una banda sólida.

/* Overlay para asegurar contraste (texto claro sobre fondo de imagen) */
.image-frame--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.55) 100%
  );
  mix-blend-mode: multiply;
}

Accesibilidad

Sección de contrastes

Reglas concretas para textos sobre fondos claros, oscuros, acentos y fotos. Aquí puedes venir cuando dudes si “esto se lee bien o no”.

Texto sobre fondo claro

Texto principal:
sobre fondos
Nunca texto gris muy claro sobre fondo cálido claro; se pierde.
Links: mismo color que primario, con subrayado al hover si hace falta más contraste.

Texto sobre fondo oscuro

Texto principal: blanco (#ffffff) o muy claro sobre
Kickers: puede usar
pero siempre mantener legibilidad.
Evitar grises medios sobre fondo oscuro; usar siempre contraste alto.

Texto sobre acentos

Si el fondo es
, el texto debe ser oscuro (
).
Solo usar fondos acento para chips, badges o pequeños bloques, no para grandes bloques de texto.

Texto sobre fotos

Con overlay oscuro, como el ejemplo anterior.
Colocar el texto en zonas menos “ruidosas” de la imagen.
Si hay dudas, usa un recuadro sólido semiopaco detrás del texto (strip o banda).

Ejemplos

Mini secciones de referencia

Dos ejemplos de cómo deberían verse secciones basadas en la principal: una de servicios y otra de proceso, ya respetando radios, espaciado y contrastes.

Servicios técnicos digitales

Sección tipo para páginas de servicios o interiores:

Kicker + H2 + párrafo de 2–3 líneas.
Debajo, grid de cards de servicio con el mismo radio y sombras.
Opcional: imagen lateral enmarcada con label.

Proceso en cuatro fases

Sección de metodología que evita replicar el bloque de la home:

Fases en timeline o grid, no cuatro cajas idénticas tipo home.
Posible diagrama visual sencillo, con los mismos radios y colores.

IA · Stitch

Prompt actualizado para Stitch

Prompt pensado para que Stitch entienda este sistema: fuentes, colores, radios, imágenes enmarcadas, contrastes y uso extensivo de clamp().

You are designing an internal STYLE GUIDE page for "Planotek3D", a B2B architectural laser scanning and BIM documentation service.

GOAL
- Create a comprehensive design system page (not a marketing homepage) with:
  - Color palette (warm light background, deep teal primary, soft teal accent, dark blue-gray text, soft borders).
  - Typography: serif for H1/H2 (similar to Noto Serif), sans serif for body (similar to Inter).
  - Spacing scale using clamp() for section padding and gaps.
  - Buttons (primary, secondary, ghost) with pill shape and subtle shadows.
  - Cards with consistent corner radius and shadows.
  - Image frames with rounded corners, labels and contrast-preserving overlays.
  - A dedicated contrast section explaining text over light backgrounds, dark backgrounds, accent blocks and photos.
  - Example sections for "Services overview" and "Process", consistent with the main homepage but clearly inner-page style.

STYLE
- Tone: premium, technical, editorial, Mediterranean architecture.
- No playful blobs, no neon gradients.
- Use clamp() for font sizes and spacing where possible.
- Ensure high contrast (approx. WCAG 2.1 AA) for text on all backgrounds, especially over images (use dark overlays, strips or solid blocks behind text).

OUTPUT
- One canvas that clearly shows:
  - Foundations: colors, type, spacing, radius tokens.
  - Components: buttons, cards, chips, image frames.
  - Contrast guidelines (text over light/dark/accent/image).
  - Example interior sections built from these components.