Documentación

Sistema de diseño Apunto

Referencia para marketing y para asistentes de IA: tokens de color, tipografía, espaciado, radios y componentes. El archivo descargable incluye el mismo contenido en Markdown.

Descargar Markdown (.md) Recursos de marca

Overview

Apunto se lee como un SaaS logístico moderno y confiable: superficies claras, navy de marca para profundidad, rosa como color de acción y mint como acento positivo. Una sola familia tipográfica (Inter) en display y cuerpo, tarjetas con borde suave y radios amplios.

Colores

Tipografía

Familia: Inter (display + cuerpo). Fallback monoespaciado para datos numéricos.

Token Tamaño / Interlineado Peso Muestra
display1 60 / 60 700 Apunto
h1 32 / 38 600 Apunto
h2 28 / 34 600 Apunto
h3 24 / 30 600 Apunto
h4 20 / 26 600 Apunto
p1 18 / 26 400 Apunto
p2 16 / 24 400 Apunto
caption1 14 / 20 400 Apunto

Layout y formas

Grid

Ancho máximo de contenido 1200px (max-w-grid). Contenedores: 16px mobile / 24px desktop.

Radios

rounded-10 10px, rounded-20 20px, rounded-40 40px. Botones usan 8px (rounded-lg).

Profundidad

Tarjetas con borde 1px sobre fondo claro; sombras suaves solo en hover.

rounded-10
rounded-20
rounded-40

Componentes

Botones

Primario Secundario Acento

Badges

Rosa Éxito Próximamente Info

Feature card

Título de tarjeta

Texto de ejemplo dentro de una feature card con icono, borde suave y radio amplio.

Do's & Don'ts

Do

  • Reserva el rosa (#da456e) para CTAs y énfasis.
  • Usa Inter en peso 600–700 para headlines.
  • Delimita tarjetas con borde 1px en vez de sombras fuertes.

Don't

  • No introduzcas un segundo color de marca como CTA.
  • No mezcles otra familia tipográfica con Inter en el mismo bloque.
  • No abuses de sombras pesadas en superficies de marketing.
Apunto

Apunto

Disponible