v1.0 — Documentación viva

Sistema de Diseño PowerTech

Guía visual de componentes, colores, tipografía y patrones UI del sitio PowerTech. Cada elemento documentado usa las mismas clases Tailwind del template.

1. Colores

Paleta primaria, fondos, textos y strokes del sistema.

Paleta primaria

#5400F4 — Primario
#FF6B5F — Secundario

Fondos (bg-background-*)

bg-background-1
#3d4753
bg-background-3
#252a32
bg-background-4
#191d2a
bg-background-5
#11141d
bg-background-6
#0d1017 (body)
bg-background-7
#f8f9fa (texto claro)
bg-background-8
#f1f4f6
bg-background-9
#ebf0f3
bg-background-11
#dbe2e6
bg-background-12
#ced7de
bg-background-14
#12161f

Textos (text-white/XX)

text-white/90
Máxima opacidad
text-white/60
Texto secundario
text-white/50
Texto terciario
text-white/30
Mínimo contraste

Strokes (border-stroke-*)

border-stroke-1
#94aecf
border-stroke-3
#7c8ea5
border-stroke-3/20
Uso típico en cards

2. Tipografía

Montserrat para textos generales, Fira Code para código.

Montserrat (textos)

Montserrat Bold — 2.25rem

Montserrat Semibold — 1.25rem

Montserrat Medium — 1.25rem

Montserrat Regular — 1.25rem

Montserrat Regular body — 1rem — Usado en párrafos y textos generales del sitio.

Fira Code (código)

Fira Code Semibold — 1rem

Fira Code Medium — 1rem

Fira Code Regular — 1rem

Escala sora-heading (títulos)

text-sora-heading-1 — 4rem / 120% / -3.2px

Título principal

text-sora-heading-2 — 3rem / 120% / -2.4px

Título secundario

text-sora-heading-3 — 2.5rem / 120% / -1.6px

Título de sección

text-sora-heading-4 — 2rem / 130%

Subtítulo de sección

text-sora-heading-5 — 1.5rem / 140%

Título de card

text-sora-heading-6 — 1.25rem / 140%

Título pequeño

Escala tagline (etiquetas y cuerpo)

text-tagline-1 — 1.125rem / 150%

Tagline 1 — texto destacado

text-tagline-2 — 1rem / 150%

Tagline 2 — cuerpo principal

text-tagline-3 — 0.875rem / 150%

Tagline 3 — texto secundario

text-tagline-4 — 0.75rem / 150%

Tagline 4 — texto mínimo

3. Espaciado y Grid

Sistema de 12 columnas y escalas de padding/gap usadas en el template.

Grid de 12 columnas

1
2
3
4
5
6
7
8
9
10
11
12
col-span-3
col-span-6
col-span-3
col-span-4
col-span-4
col-span-4
col-span-12 (full width)

Padding y Gap

p-3 = 12px
p-5 = 20px
p-8 = 32px (cards)
p-10.5 = 42px
gap-6 = 24px
gap-8 = 32px
gap-x-8 = 32px horizontal
gap-y-10 = 40px vertical

4. Componentes

Botones, cards, formularios y patrones UI del template.

4.1 Botones

Botón primario Botón outline Botón disabled
<!-- Botón primario (CTA) --> <a href="#" class="inline-flex cursor-pointer items-center justify-center gap-[7px] rounded-full bg-linear-[90deg,#DBE2E6_0%,#FFF_71.63%] px-6 py-[13px] text-tagline-2 font-medium text-background-6"> <span>Hablar con un experto</span> <svg>...</svg> </a>

4.2 Cards

Service card

Plan Estratégico

Desde $450.000/mes

Pricing card
Marketing

Blog card title

Desarrollo Web

Team card

<!-- Service card --> <article class="bg-background-5 col-span-12 flex h-full max-h-[420px] min-h-[420px] w-full flex-col justify-between rounded-lg p-8 md:col-span-6 lg:col-span-3 lg:max-w-[298px]"> <span class="inline-flex text-[60px] text-white"> <svg>...</svg> </span> <h3 class="text-sora-heading-5 font-normal tracking-[-0.72px] text-white/90"> Desarrollo web y e-commerce. </h3> </article>

4.3 Tags / Chips

Marketing IA WordPress E-commerce Automatización

4.4 Acordeón FAQ (CSS-only)

¿Cómo funciona el proceso de trabajo?

Diagnosticamos su situación actual, diseñamos una estrategia a medida, ejecutamos las soluciones y medimos los resultados. Todo el proceso dura entre 2 y 4 semanas promedio.

¿Ofrecen soporte después de entregar el proyecto?

Sí. Todos nuestros planes incluyen soporte continuo con tiempos de respuesta garantizados según el plan contratado.

¿Qué incluye el Seguro WordPress™?

Monitoreo 24/7, actualizaciones automáticas, respaldos diarios y reparación ante cualquier incidente de seguridad.

4.5 Glowing Card + backdrop-blur

Glowing Card

Card con efecto de brillo usando blur + mix-blend-mode.

4.6 Formularios

Toggle (pricing switcher)

4.7 Gradientes y efectos

backdrop-blur
Gradient circles del magnetic button

5. Referencia rápida

Clases y patrones más usados en el sitio.

Layout

.main-container → contenedor central .grid grid-cols-12 → sistema de 12 col .md:col-span-6 → 6 col en tablet .lg:col-span-3 → 3 col en desktop .gap-y-8 lg:gap-x-8 → gaps responsive

Fondo y bordes

.bg-background-5 → card dark bg .bg-background-6 → page background .border-stroke-3/20 → card border .rounded-lg → 8px radius .rounded-full → pill shape

Tipografía

.text-sora-heading-{1-6} → heading scale .text-tagline-{1-4} → body/tagline scale .font-ibm-plex-mono → Fira Code .font-inter-tight → Montserrat .tracking-[-2.4px] → letter-spacing

Componentes comunes

<article class="bg-background-5 rounded-lg p-8"> → card base <span class="rounded-[100px] bg-[rgba(250,252,255,0.05)] px-3 py-1 text-tagline-4"> → tag/chip .glow-card + .bg-opai-blue .blur-[42px] → glowing effect