Sensa Design System

Productos Sensa

Todos los productos que utilizan este sistema de diseño

🔐

App

app.sensa.co

Landing page con keypad de acceso

🔑

Auth

auth.sensa.co

Single Sign-On con Authelia

📚

Docs

docs.sensa.co

Wiki de documentación con Outline

✏️

Notes

notes.sensa.co

Editor colaborativo Markdown con HedgeDoc

🧠

AI

ai.sensa.co

Interfaz de chat AI con OpenWebUI

📊

Status

status.sensa.co

Monitoreo y uptime con Kuma

🎨

System

system.sensa.co

Design System (estás aquí)

Design Tokens

Variables de diseño fundamentales que definen la identidad visual de Sensa

Colores Base

bg-primary

#ffffff / #000000

bg-secondary

#f7f7f7 / #191919

text-primary

#37352f / #e3e2e0

text-secondary

#787774 / #9b9a97

Colores de Acento

accent-primary

#2383e2

accent-secondary

#529cca

accent-hover

#1a6cbf

Colores Semánticos

success

#4caf50

warning

#ff9800

error

#ff4444

info

#2196f3

Familias de Fuentes

Sans-Serif (Principal)

The quick brown fox jumps

-apple-system, BlinkMacSystemFont, Segoe UI...

Monospace (Código)

const hello = "world";

SF Mono, Monaco, Cascadia Code...

Escala Tipográfica

5xl / 48px - Headlines

4xl / 36px - Page Titles

3xl / 30px - Section Titles

2xl / 24px - Card Titles

xl / 20px - Subtitles

lg / 18px - Large Body

base / 16px - Body Text (Default)

sm / 14px - Small Text

xs / 12px - Captions & Labels

Escala de Espaciado (Base 4px)

space-1 (4px)

space-2 (8px)

space-3 (12px)

space-4 (16px)

space-6 (24px)

space-8 (32px)

space-12 (48px)

space-16 (64px)

Border Radius

sm (2px)

md (6px)

xl (12px)

full (circle)

Elevaciones

shadow-sm

0 1px 3px rgba(0,0,0,0.08)

shadow-md

0 4px 12px rgba(0,0,0,0.1)

shadow-lg

0 8px 32px rgba(0,0,0,0.12)

shadow-xl

0 20px 60px rgba(0,0,0,0.15)

Componentes

Componentes reutilizables construidos con los design tokens

Botones

<button class="sensa-btn sensa-btn-primary">Primary</button>
<button class="sensa-btn sensa-btn-secondary">Secondary</button>

Inputs

<input type="text" class="sensa-input" placeholder="Placeholder...">

Cards

Card Title

This is a basic card component with header and body sections.

Interactive Card

Hover over this card to see the interactive effect.

With Badge

Active

Badges

Default Primary Success Warning Error

Alerts

This is an informational alert message.

Your changes have been saved successfully!

Please review your input before proceeding.

An error occurred while processing your request.

Keypad (app.sensa.co)

1

2

3

4

5

6

7

8

9

←

0

Service Links

docs notes ai

Code

Use inline code for short snippets.

// Code block example
const greeting = "Hello, Sensa!";
console.log(greeting);

Loading States

Guía de Uso

Cómo implementar el design system en tus productos

1. Importar Tokens

<link rel="stylesheet" 
  href="https://system.sensa.co/tokens/design-tokens.css">

2. Importar Componentes

<link rel="stylesheet" 
  href="https://system.sensa.co/components/components.css">

3. Usar Variables CSS

.my-element {
  color: var(--sensa-text-primary);
  background: var(--sensa-bg-secondary);
  padding: var(--sensa-space-4);
}

4. Usar Componentes

<button class="sensa-btn sensa-btn-primary">
  Click me
</button>

Tip: Todos los componentes soportan dark mode automáticamente mediante prefers-color-scheme.