Sistema de diseño

Logo y símboloSVG para descargar

2 tipografíasExposure y ABC Oracle

3 paletas de color31+ tonos

6 variantes de botón18 combinaciones

26 ilustracionesCoby · PNG

Logo

Logo – positivo (SVG)

Descargar

Logo – negativo (SVG)

Descargar

Logo – negro (SVG)

Descargar

Logo – blanco (SVG)

Descargar

Símbolo

Símbolo – color (SVG)

Descargar

Símbolo – negro (SVG)

Descargar

Símbolo – blanco (SVG)

Descargar

Coby illustrations

26 assets · PNG

Paleta de colores

Haz clic en un color para copiarlo.

Purple – primary color

Primary brand color for call-to-action buttons and interactive elements

#F7F3FF

purple-50

100

#EBE0FF

purple-100

200

#D6C2FF

purple-200

300

#C2A3FF

purple-300

400

#AD85FF

purple-400

500

#9966FF

purple-500

600

#7A52CC

purple-600

700

#5C3D99

purple-700

800

#3D2966

purple-800

900

#1F1433

purple-900

Pink – secondary color

Secondary accent color for highlights and visual interest

#FFF2F6

pink-50

100

#FFDEEA

pink-100

200

#FFBDD5

pink-200

300

#FF9CC0

pink-300

400

#FF7AAB

pink-400

500

#FF5996

pink-500

600

#CC4778

pink-600

700

#99355A

pink-700

800

#66243C

pink-800

900

#33121E

pink-900

Deep blue – warm neutrals

Warm grey tones as the foundation of the design system

#FAF9F4

deep-blue-50

#F4F2EB

deep-blue-75

100

#EDEAE1

deep-blue-100

200

#E8E6DE

deep-blue-200

300

#D4D1C7

deep-blue-300

400

#A8A59B

deep-blue-400

500

#7C7970

deep-blue-500

600

#5C5950

deep-blue-600

700

#3D3B35

deep-blue-700

800

#2A2925

deep-blue-800

900

#1A1918

deep-blue-900

Fondos

Cream

#FAF9F4

bg-cream

Main page background

Cream dark

#F4F2EB

bg-deep-blue-75

Alternating section background

Secciones oscuras

Encabezado en sección oscura

text-white

Texto corrido en sección oscura.

text-deep-blue-300

border-deep-blue-800

Empezar

Integración con la barra de navegación: data-dark-section cambia la barra de navegación al modo claro.

Tipografía

Exposure para encabezados, ABC Oracle para texto corrido. Escalado responsive.

Exposure – Encabezados

Aa-20

Aa-10

Aa0

Aa10

Aa20

Eje EXPO: -100 a +100 (negativo = más pesado, positivo = más ligero)

ABC Oracle – Texto corrido

Line Height

1.2

EXPO

-3

Lead paragraph text for introductions and emphasis

Tag

lead

Size

1.125rem

Line Height

1.7

Weight

400

Body text for main content and paragraphs

Tag

body

Size

1rem

Line Height

1.6

Weight

400

Small text for captions and supporting information

Tag

small

Size

0.875rem

Line Height

1.5

Weight

400

CAPTION TEXT

Tag

caption

Size

0.75rem

Line Height

1.4

Weight

600

Espaciado y layout

Anchos de contenedor

max-w-7xlExtra grande (80rem / 1280px)

max-w-6xlGrande (72rem / 1152px) – Estándar

max-w-5xlMediano (64rem / 1024px)

max-w-4xlPequeño (56rem / 896px)

max-w-3xlArtículo/cuerpo de texto (48rem / 768px)

max-w-2xlExtra pequeño (42rem / 672px)

Padding de sección

py-12 md:py-24

48px móvil → 96px escritorio

Secciones compactas

py-16 md:py-28

64px → 112px

Secciones con mucho contenido

py-16 md:py-32ESTÁNDAR

64px → 128px

Estándar para la mayoría de secciones

Padding horizontal

px-6 sm:px-8 lg:px-12

Padding del contenedor (responsive)

24px móvil → 32px tablet → 48px escritorio

p-8 md:p-12

Padding de tarjeta

32px móvil → 48px escritorio

Sombras

Sombras cálidas y discretas que crean profundidad.

Base shadow

shadow-warm

0 4px 6px -1px rgba(26, 25, 24, 0.08), 0 2px 4px -2px rgba(26, 25, 24, 0.04);

Large shadow

shadow-warm-lg

0 10px 25px -5px rgba(26, 25, 24, 0.1), 0 8px 10px -6px rgba(26, 25, 24, 0.06);

Extra large shadow

shadow-warm-xl

0 20px 40px -10px rgba(26, 25, 24, 0.12), 0 10px 20px -8px rgba(26, 25, 24, 0.08);

Componentes

Botones

CTAButton

PRIMARY

Empezar

Estándar (48px)

Empezar

Blob animation

animate-blob

Duración: 20s

Slow rotation

animate-spin-slow

Duración: 60s

Float

animate-float

Duración: 6s

Funciones de transición

transition-organic // cubic-bezier(0.16, 1, 0.3, 1)

btn-scale // Hover: scale(1.03), Active: scale(0.98)