Nuevo Diseño web personalizado para tu negocio · Ver ejemplos →
FOCUSWEBS
Crear Web
Referencia interna

Sistema de diseño FocusWebs.

Guía visual de tokens, componentes y patrones. Mantén cada nueva página alineada con el estilo del Home.

Explorar Tokens Ver Componentes

Paleta de Colores

Variables CSS definidas en global.css bajo :root y @theme.

Base

White
#ffffff

Black
#111111

Mint
#f2fce2

Brand Primary
#000000

Brand Secondary
#000000a8

Grises

Dark Grey
#333333

Grey
#666666

Light Grey
#e5e5e5

Lighter Grey
#f0f0f0

Lightest Grey
#f5f5f5

Lightestest Grey
#fafafa

Pastel (Animación de fondo)

Cool White
#eef4ff

Lavender
#f6eafd

Mint Pastel
#e6fcf2

Warm White
#fef5e6

Acento (Animación de texto)

Blue 600
#2563eb

Violet 600
#7c3aed

Emerald 600
#059669

Orange 600
#ea580c

Tipografía

Fuente principal: Manrope Variable (via @fontsource). Base: 18px / 1.6 line-height.

h1 · 4.5rem / 700 / 1.1

Heading One

h2 · 3rem / 700 / 1.15

Heading Two

h3 · 2rem / 700 / 1.2

Heading Three

h4 · 1.5rem / 700 / 1.3

Heading Four

h5 · 1.25rem / 700 / 1.4
Heading Five
h6 · 1.125rem / uppercase
Heading Six

Texto

p · 1.25rem / 400 / 1.6 / color: --dark-grey

Este es un párrafo de ejemplo con la configuración base del sistema. La longitud máxima es de 65 caracteres por línea para una lectura óptima.

a · 600 weight / transition opacity 0.3s

Esto es un enlace de ejemplo

strong · 700 / color: #000

Texto normal con texto en negrita intercalado.

Clases de texto especiales

.heading-xlarge · 5rem / 700 / 1.05

Extra Large

.text-size-large · 1.5rem / 400 / 1.5

Text Size Large para subtítulos y leads.

Espaciado y Layout

Convenciones de layout usadas en toda la web.

Contenedores

.container-large

max-width: 90rem · padding: 5% · margin: auto

max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8

Contenedor Tailwind estándar (80rem)

Secciones

.section

padding: 8rem 0 · flex column · items-center

.section.is-mint

Fondo mint (#f2fce2)

Grid Patterns

3 columnas (Benefits) · grid-cols-1 md:grid-cols-3 gap-16

Col 1
Col 2
Col 3

4 columnas (Services) · grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12

Col 1
Col 2
Col 3
Col 4

Botones

Todos los estilos de botón usados en la web.

Primario (CTA)

bg-black text-white rounded-lg px-8 py-4 hover:bg-gray-800

Pedir Presupuesto Nav CTA

Secundario (Outline)

bg-transparent border border-gray-300 rounded-lg hover:border-black

Ver Ejemplos

Text Link

border-b border-black pb-0.5 hover:text-gray-600

Ver todos los servicios ->

.w-button (Legacy)

Estilo heredado de Webflow. padding: 12px 24px, border-radius: 4px

Disabled

Formularios

Input, textarea y label con el estilo estándar de la web.

Especificaciones

  • Border radius: rounded-xl (0.75rem)
  • Fondo: bg-gray-50
  • Borde: border-gray-200 → focus: border-black
  • Ring: focus:ring-1 focus:ring-black
  • Padding: px-4 py-3

Cards y Contenedores

Patrones de tarjetas usados en la web.

Card Estándar

rounded-3xl · shadow-sm · border border-gray-200

Card Info

bg-gray-50 · rounded-3xl · border-gray-100

Card Dark

bg-black · text-white · rounded-3xl

CTA Card

¿Listo para empezar?

Convierte tu idea en una web que funciona.

Contacto

FAQ Accordion

Componente reutilizable <FAQ /> con Schema.org integrado.

Preguntas Frecuentes

¿Cuánto cuesta el diseño de una página web?
El coste varía según la complejidad del proyecto (número de páginas, funcionalidades a medida, idiomas). Ofrecemos presupuestos personalizados adaptados a las necesidades reales de tu negocio.
¿Cuánto tiempo tardáis en entregar el proyecto?
Una web corporativa estándar suele tardar entre 4 y 6 semanas. Proyectos más complejos como tiendas online pueden requerir de 8 a 10 semanas. Definimos un cronograma claro desde el inicio.
¿Mi web será autogestionable?
Sí. Entregamos las webs preparadas para que puedas editar textos, imágenes y crear nuevas entradas de blog sin necesidad de conocimientos técnicos.

Contact Block / CTA

Bloque de llamada a la acción principal, usado en páginas antes del footer.

Default State

¿Hablamos de tu proyecto?

Cuéntanos tus ideas y te ayudaremos a hacerlas realidad.

Contacto

Animaciones

Animaciones CSS definidas en global.css.

.animate-pastel-bg

pastelShift · 20s infinite alternate ease-in-out

Este fondo cambia entre Cool White → Lavender → Mint → Warm White

.animate-text-shift

textShift · 20s infinite alternate ease-in-out

Este texto cambia de color

Blue 600 → Violet 600 → Emerald 600 → Orange 600

Hover & Transitions

hover:scale-105

hover:text-black (nav link)
hover:scale-105 + bg

Iconos y Badges

Patrones de insignias e iconografía.

Numbered Badges

1
2
3

Pill Badges

Etiqueta neutral Sin fondo Idioma activo Idioma inactivo

Icon Buttons (CTA)

Contacto
WhatsApp

Utilidades

Clases helper definidas en global.css.

.text-balance

text-wrap: balance — Equilibra el texto para evitar viudas.

Este texto usa text-balance para que las líneas queden equilibradas y no haya palabras sueltas al final.

.nav-link

Manrope, 600, 1rem, color: --black

Ejemplo de nav-link

::selection

Seleccionar texto muestra fondo mint (#f2fce2) con texto negro.

Selecciona este texto para ver el efecto de selección mint.

border-radius

rounded → rounded-xl → rounded-2xl → rounded-3xl → rounded-full