Sistema de diseño · v1.0
Solnaris Styleguide
Fuente de verdad visual. Componentes, tokens, tipografía y brand assets.
Sección
Tipografía
display-2xl · 72/80 · 600
Claridad para operar.
display-xl · 60/68 · 600
Claridad para operar.
display-lg · 48/56 · 600
Claridad para operar.
h1 · 36/44 · 600
Infraestructura operativa moderna.
h2 · 30/38 · 600
Infraestructura operativa moderna.
h3 · 24/32 · 500
Infraestructura operativa moderna.
h4 · 20/28 · 500
Infraestructura operativa moderna.
body-lg · 18/28 · 400
Infraestructura operativa moderna para empresas medianas de LATAM.
body · 16/24 · 400
Infraestructura operativa moderna para empresas medianas de LATAM.
body-sm · 14/20 · 400
Infraestructura operativa moderna para empresas medianas de LATAM.
caption · 12/16 · 500
Infraestructura operativa
Sección
Paleta
Ink · primary dark
Base: ink-900 (#0E1216) — Solnaris Ink
Solar · accent
Base: solar-400 (#F5C04A) — Solar Pulse
Pewter · neutral
Base: pewter-500 (#5B6470)
Estados semánticos
Success
pine-500
#2E7D5B
Warning
clay-500
#E08B3F
Danger
brick-500
#C73E3E
Paper
paper
#FAFAF7
Sección
Tokens semánticos
Los componentes usan estos tokens, no los primitivos. Se adaptan automáticamente a dark/light.
Surface elevated
Texto secundario sobre superficie elevada.
Texto muted en body-sm.
Surface alt
Otro nivel de superficie para contraste sutil.
Usar para fondos de sección secundaria.
Sección
Brand Assets
5 variantes del logo en SVG. Todos con fondo transparente.
Wordmark · Default (sobre Ink)
Wordmark · Mono blanco (sobre cualquier dark)
Wordmark · Mono Ink (sobre fondos claros)
Mark · Símbolo S en distintos tamaños
32px · 48px · 96px · 192px
Lockup vertical · Wordmark + tagline
Componente
Button
Variantes
Tamaños
Estados
Componente
Badge
Variantes
Tamaños
Componente
Container
Componente estructural. Da max-width y padding consistentes a las secciones.
Tamaños
Container sm — max-w-3xl
Container md — max-w-5xl
Container lg — max-w-6xl (default)
Container full — max-w-7xl
Componente
Input
Estados
Usaremos este correo para enviarte la demo.
Este campo no se puede editar.
Disponible al completar el formulario anterior.
Formato inválido. Incluí el código de país.
Tamaños
Solicitar demo
Te contactamos en menos de 24 horas hábiles.
Aproximado, no necesita ser exacto.
Componente
Card
Variantes
Default
Card con fondo elevated y borde sutil. Default para la mayoría de casos.
Elevated
Card con sombra. Para destacar contenido importante.
Outlined
Solo borde, sin fondo. Para contenido secundario.
Paddings
Padding sm (p-4)
Padding md (p-6)
Padding lg (p-8)
Padding none
Para imágenes full-bleed
Clickeable (con href)
Ejemplo: pricing tier
Starter
$280
USD/mes
Para empresas de 5-25 empleados.
Growth
Recomendado$580
USD/mes
Para empresas de 25-100 empleados.
Scale
$950+
USD/mes
Para empresas de 100+ empleados.
Componente
StatCard
Default
Cierre contable
Promedio de nuestros clientes, antes tomaba 15.
Reducción trabajo manual
En conciliaciones y reportes después de migrar.
Implementación
Promedio, no 8 meses como SAP.
Highlighted
Cierre contable
Reducción manual
Implementación
Con prefix y trends
Plan Starter
Crecimiento Q3
Frente al mismo período del año anterior.
Churn anual
Bajamos del 12% al 8% en 6 meses.
Centradas (para hero)
Cierre
Menos manual
Setup
Componente
Nav
Navegación principal sticky con menú mobile. Para ver el comportamiento mobile, achicá la ventana del browser a menos de 768px de ancho.
Default (sticky en producción)
⚠️ Acá en el styleguide se muestra inline. En la landing real va al inicio del Layout y queda sticky.
Con links custom
Componente
Footer
Footer multi-columna con navegación, social, copyright y links legales.