LakG/labre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rediseño visual UABC + Mulish + auditoría de BD (P0/P1)

Browse Source 
Rediseño visual:
- Nueva identidad UABC/editorial (DESIGN.md), tipografía Mulish, tokens
  verde/dorado/negro sobre bone-white, patrón de puntos verde en canvas,
  radios 8/12/30/9999, sin sombras, hairline 1px, tarjetas con leve
  transparencia + blur suave + borde verde muy sutil.
- 45 archivos .astro/.tsx alineados al nuevo sistema (Track A/B/C/D/E).
- Limpieza post-critique: eliminado triple CTA en home alumno, .card
  anidados en admin, aria-live decorativo, 26 aliases legacy en global.css,
  border-l verde en nav (patrón AI-slop), classList.remove obsoletos.

Auditoría de llamadas a BD (para 20-50 usuarios concurrentes):
- P0-1: middleware con cache in-memory de profile (30s) + is_banned (30s)
  por uid; exclusión de assets estáticos (/_astro/*, /audio/*, favicon).
  Invalidación en signout, PATCH /profile, baneos.
- P0-2: eliminado count pendientes duplicado en AppLayout; badge se
  hidrata client-side (BadgeSolicitudes con fetch inicial).
- P0-3: migración 0008 REPLICA IDENTITY FULL en solicitudes + delta
  preciso en BadgeSolicitudes (con fallback a refetch).
- P1: admin/index dedupe (4 queries → 2 con recientes.filter), catalogo
  reusa profile del middleware (3 queries → 1), inventario paralelo,
  estadisticas con cache 60s en RAM (stats-cache.ts), migración 0009
  con 3 índices (fecha, vencidos parcial, audit compuesto).

Fixes P0 de UI post-critique:
- estadisticas.astro: ReferenceError DIAS restaurado.
- solicitudes (3 vistas): error rendering sanitizado (no expone mensaje
  Postgres crudo al admin).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014xaxs8cGcQe9NwbMqA1gvn
This commit is contained in:
Amado Garcia Ramirez
2026-09-21 09:42:12 -07:00
parent a41d50ca62
commit ac3e7061ac
53 changed files with 2132 additions and 1576 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+234 -259
View File
@@ -1,228 +1,189 @@
# Ease Health — Style Reference
> Botanical greenhouse on cream paper
# UABC — Style Reference
> Identidad editorial institucional en clave monoespaciada
**Theme:** light
**Theme:** mixed
Ease Health uses a clinical-botanical language: a warm cream canvas layered with soft sage, keylime, and slate-blue panels that feel like a greenhouse rendered on paper. Typography carries the entire personality — weight 300 serif headlines (Faire Octave) paired against a humanist sans (Suisse Intl) create a hushed, editorial authority unusual for healthtech. A single deep forest green (#0f3e17) anchors every action and heading, reading like ink on watercolor. Surfaces are flat and shadowless; depth comes from layered tinted panels and generous padding, not elevation. Components are rounded (~14px) and pill-shaped for tags, keeping the whole system soft and approachable without losing clinical seriousness.
El sistema conserva la estructura editorial del original —bandas oscuras documentales alternadas con secciones claras de lectura— pero reemplaza por completo la paleta cromática por la colorimetría institucional de la UABC (verde principal, dorados y acentos complementarios) y unifica toda la tipografía en una sola familia monoespaciada, Azeret Mono, que trata la página como una hoja de especificación técnica: encabezados, cuerpo y controles de UI comparten la misma fuente y se diferencian solo por peso y tamaño. El Verde Institucional (#00723F) actúa como el único interruptor de acción —CTAs, enlaces, estados activos— mientras el resto de la paleta (verde claro, dorado, amarillo, verde jardín, azul) aporta soporte cromático secundario sin competir con el verde principal. Los componentes siguen siendo deliberadamente delgados: pills de radio completo, nav flotante translúcido, bordes de 1px, casi sin sombra — la interfaz se retira para que el contenido institucional lleve el peso visual.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Forest Ink | `#0f3e17` | `--color-forest-ink` | Primary action buttons, headings, links, icon strokes — deep botanical green reads as ink, the only saturated dark in the system |
| Sage Mist | `#b1dbb8` | `--color-sage-mist` | Mid-tone card backgrounds and decorative washes, panel-level surfaces |
| Keylime Wash | `#e1f4df` | `--color-keylime-wash` | Hero panel background, light card surfaces — the dominant tinted canvas tone |
| Mint Veil | `#cfe7d3` | `--color-mint-veil` | Accent card surfaces, soft section dividers between sage and keylime layers |
| Slate Hush | `#b6ced5` | `--color-slate-hush` | Cool counter-balance panel for product preview and feature blocks — breaks the green monotony with desaturated blue-gray |
| Cream Paper | `#fffefc` | `--color-cream-paper` | Page background, badge backgrounds, button text — warm off-white that softens every green |
| Charcoal | `#222222` | `--color-charcoal` | Navigation text and minor UI strokes — restrained secondary ink |
| Border Mist | `#efeeeb` | `--color-border-mist` | Hairline dividers and subtle borders throughout the layout |
| Forest Shadow | `#0c2f10` | `--color-forest-shadow` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color |
| Verde Institucional | `#00723F` | `--color-verde-institucional` | Color institucional principal (Pantone 356) — CTAs primarios, nav activo, íconos, acentos de enlace; el único color con función de "interruptor" en la UI |
| Verde Claro | `#50B848` | `--color-verde-claro` | Estados hover, contornos de acento suaves, eco desaturado del Verde Institucional (Pantone 369) |
| Dorado UABC | `#DD971A` | `--color-dorado-uabc` | Acento cálido secundario — bordes de tags, highlights, contraste cálido frente al verde (Pantone 131) |
| Amarillo Dorado | `#FEBE10` | `--color-amarillo-dorado` | Badges y estados destacados sobre fondo oscuro (Pantone 124) |
| Verde Jardín | `#024731` | `--color-verde-jardin` | Superficie oscura alterna, bordes fuertes sobre fondo oscuro (Pantone 3435) |
| Dorado Oscuro | `#B08208` | `--color-dorado-oscuro` | Fondo translúcido de nav, bordes de fuerza media, superficies UI mudas (Pantone 132) |
| Azul Institucional | `#20419A` | `--color-azul-institucional` | Acento informativo/enlaces alternos — distingue contenido secundario de las acciones primarias en verde (Pantone Reflex Blue) |
| Bone White | `#fffefb` | `--color-bone-white` | Lienzo de página en secciones claras, color de texto en secciones oscuras |
| Linen | `#f3f2ee` | `--color-linen` | Superficie secundaria cálida, fondo de tarjetas elevadas |
| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Bordes finos en tarjetas, imágenes, divisores y campos de formulario |
| Graphite | `#333833` | `--color-graphite` | Texto principal y encabezados sobre superficies claras |
| Negro Institucional | `#000000` | `--color-negro-institucional` | Lienzos de sección oscura (Pantone Process Black), texto de máximo contraste, scrims sobre imagen |
## Tokens — Typography
### Faire Octave — Display serif for all section headings and hero copy · `--font-faire-octave`
- **Substitute:** Cormorant Garamond, Playfair Display
- **Weights:** 300
- **Sizes:** 40px, 56px, 74px
- **Line height:** 1.05–1.35
- **Letter spacing:** -0.01em at 40px, -0.03em at 56–74px
- **Role:** Display serif for all section headings and hero copy
### Suisse Intl — Body, navigation, UI labels, buttons, captions — humanist sans at whisper weight for feature lists and normal weight for copy · `--font-suisse-intl`
- **Substitute:** Inter, Söhne, Helvetica Neue
- **Weights:** 300, 400, 600
- **Sizes:** 10px, 11px, 12px, 14px, 18px, 23px, 28px, 56px
- **Line height:** 1.00–1.61
- **Letter spacing:** 0.08em uppercase at 11px/600 (eyebrow labels); natural tracking otherwise
- **Role:** Body, navigation, UI labels, buttons, captions — humanist sans at whisper weight for feature lists and normal weight for copy
### Azeret Mono — Fuente única del sistema: encabezados, cuerpo y controles de UI. Al ser monoespaciada en todos los roles, la jerarquía se construye solo con peso y tamaño, reforzando la lectura de "hoja de especificación técnica" en toda la interfaz. · `--font-azeret-mono`
- **Fuente:** Fontsource (`@fontsource/azeret-mono` / fontsource.org/fonts/azeret-mono)
- **Substitute:** JetBrains Mono, IBM Plex Mono, o monoespacio del sistema
- **Weights:** 300 (encabezados y cuerpo), 500 (nav, botones, controles de UI)
- **Sizes:** 10px, 12px, 14px, 16px, 24px, 32px, 72px
- **Line height:** 1.10–1.83 según rol
- **Letter spacing:** -1.44px a 72px, -0.64px a 32px, -0.48px a 24px, -0.32px a 16px (cuerpo), +0.5px a 10px, +0.6px a 12px, +0.7px a 14px (micro/caption)
- **Role — Display/Heading:** peso 300, tamaños 24/32/72px. El peso liviano en tamaños grandes es no negociable — mantiene la autoridad editorial por contención en vez de volumen.
- **Role — Body:** peso 300, tamaños 14–16px, line-height 1.57–1.83. Trata el párrafo como salida de terminal, no como folleto de marketing.
- **Role — UI/Nav/Buttons:** peso 500, tamaños 12–16px. El salto de peso (300 → 500) es la única señal que distingue controles interactivos del texto editorial, ya que comparten la misma fuente.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.61 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.3 | — | `--text-subheading` |
| heading-sm | 23px | 1.5 | — | `--text-heading-sm` |
| heading | 40px | 1.35 | -0.4px | `--text-heading` |
| heading-lg | 56px | 1.2 | -1.68px | `--text-heading-lg` |
| display | 74px | 1.05 | -2.22px | `--text-display` |
| Role | Size | Line Height | Letter Spacing | Weight | Token |
|------|------|-------------|----------------|--------|-------|
| micro | 10px | 1.6 | 0.5px | 300 | `--text-micro` |
| caption | 12px | 1.63 | 0.6px | 300 | `--text-caption` |
| body-sm | 14px | 1.63 | 0.7px | 300 | `--text-body-sm` |
| body | 16px | 1.57 | -0.32px | 300 | `--text-body` |
| ui | 16px | 1.83 | -0.017em | 500 | `--text-ui` |
| heading | 24px | 1.3 | -0.48px | 300 | `--text-heading` |
| heading-lg | 32px | 1.3 | -0.64px | 300 | `--text-heading-lg` |
| display | 72px | 1.1 | -1.44px | 300 | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 8px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 7 | 7px | `--spacing-7` |
| 9 | 9px | `--spacing-9` |
| 11 | 11px | `--spacing-11` |
| 14 | 14px | `--spacing-14` |
| 18 | 18px | `--spacing-18` |
| 21 | 21px | `--spacing-21` |
| 28 | 28px | `--spacing-28` |
| 35 | 35px | `--spacing-35` |
| 42 | 42px | `--spacing-42` |
| 49 | 49px | `--spacing-49` |
| 56 | 56px | `--spacing-56` |
| 70 | 70px | `--spacing-70` |
| 76 | 76px | `--spacing-76` |
| 99 | 99px | `--spacing-99` |
| 156 | 156px | `--spacing-156` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |
| 152 | 152px | `--spacing-152` |
### Border Radius
| Element | Value |
|---------|-------|
| nav | 7px |
| cards | 14px |
| badges | 999px |
| buttons | 14px |
| sections | 9999px |
| nav | 30px |
| tags | 8px |
| cards | 12px |
| buttons | 9999px |
### Layout
- **Page max-width:** 1200px
- **Section gap:** 64-96px
- **Card padding:** 28-42px
- **Element gap:** 14-21px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 8px
## Components
### Primary Forest Button
**Role:** Filled CTA for demos, explores, and form submits
### Verde Pill CTA
**Role:** Botón de llamada a la acción primaria
Background #0f3e17, text #fffefc, 14px border-radius, padding 14px 21px, Suisse Intl 14px/400. Arrow icon in white at trailing edge. Hover transitions to #0c2f10.
Relleno con #00723F, texto blanco en Azeret Mono peso 500, 16px, 9999px de border-radius, 10px de padding vertical / 24px horizontal. Etiqueta de una sola línea. Sin sombra. La forma de pill es el único elemento con curvatura completa — hace que el CTA sea inconfundible como el interruptor de acción de la página.
### Large Forest Button
**Role:** Hero-scale CTA with generous breathing room
### Nav Flotante Translúcido
**Role:** Navegación superior de página
Same Forest Ink fill and white text, but padding scales to 42px all sides for hero placement. Rounded 14px corners. Used sparingly for maximum-weight calls to action.
Contenedor tipo pill a 30px de border-radius, Dorado Oscuro (#B08208) a baja opacidad sobre la página, conteniendo los enlaces en Azeret Mono peso 500, 12px.
### Pill Badge / Tag
**Role:** Category labels, CRM/EHR/RCM module tags, status indicators
### Mono Display Heading
**Role:** Encabezados de hero y de sección
Background #fffefc, text Forest Ink #0f3e17, 999px border-radius (full pill), padding 9px 14px, Suisse Intl 14px/400. Inverted cream-on-green relationship makes tags feel like paper labels.
Azeret Mono peso 300, 72px en hero, 32–24px en títulos de sección. Line-height 1.10–1.30. Letter-spacing según escala. Color Bone White (#fffefb) sobre secciones oscuras, Graphite (#333833) sobre secciones claras. El peso liviano es no negociable — engrosarlo rompe el efecto editorial.
### Sage Feature Card
**Role:** Heavier-tinted content panel for feature highlights
### Mono Body Block
**Role:** Copy de párrafo en secciones de contenido
Background Sage Mist #b1dbb8, 14px border-radius, 42px padding all sides, no shadow. Hosts illustration or product preview content. Flat surface — depth comes from color not elevation.
Azeret Mono peso 300, 14–16px, line-height 1.63–1.83, letter-spacing -0.32px a 16px. Color Graphite (#333833) sobre superficies claras, Bone White (#fffefb) sobre oscuras. Max-width ~480px para preservar la medida de "lectura de terminal".
### Keylime Soft Card
**Role:** Light-tinted content panel for secondary features
### Two-Column Editorial Section
**Role:** Layout de contenido: encabezado izquierda, cuerpo derecha
Background Keylime Wash #e1f4df, 14px border-radius, 28px padding, no shadow. Tighter padding than sage variant for compact content blocks.
Grid lado a lado con 48–64px de gap. Columna izquierda contiene el Mono Display Heading a 32px. Columna derecha contiene el Mono Body Block a 14–16px. Ambas alineadas arriba. Fondo: Bone White o Linen. Padding de sección: 64px horizontal, 64px vertical.
### Slate Product Panel
**Role:** Cool-toned container for product UI screenshots and demos
### Full-Bleed Documentary Image
**Role:** Banda de imagen atmosférica entre secciones de contenido
Background Slate Hush #b6ced5, 14px border-radius, 42px padding, no shadow. Provides cool visual counterpoint to warm green panels — the only non-green tinted surface.
Fotografía a sangre completa sobre fondo Negro Institucional (#000000). Scrim oscuro opcional (rgba(0,0,0,0.3–0.5)) para contraste de texto. Texto superpuesto en Bone White, Azeret Mono peso 300. Las imágenes son documentales/candid, no de stock pulido.
### Product Preview Card (Inner)
**Role:** White floating card within Slate Product Panel
### Vertical Sidebar Label
**Role:** Indicador de sección en el margen de la página
Background Cream Paper #fffefc, 14px border-radius, 28px padding, no border or shadow. Represents a product screen mockup (CRM, EHR, RCM). Sits on the Slate panel like a printed screenshot.
Texto rotado 90° en el margen izquierdo, posicionado 24–49px del borde. Azeret Mono 10–12px, letter-spacing 0.05em, mayúsculas o tal cual. Color: Graphite sobre secciones claras, Hairline Gray (#e5e7eb) o Bone White sobre oscuras. Funciona como marcador de sección, no como navegación.
### Navigation Bar
**Role:** Top-level site navigation
### Ghost Text Link
**Role:** Enlaces en línea dentro del cuerpo de texto
Transparent over cream canvas, text Charcoal #222222, Suisse Intl 14px/400, 7px radius on interactive items. 'Book a Demo' CTA pill on the right uses Forest Ink fill.
Sin fondo, subrayado de 1px en #00723F o Graphite según contexto. Azeret Mono a 14–16px. El hover aumenta opacidad o cambia a Verde Claro (#50B848).
### Eyebrow Label
**Role:** Section category tag above headings
### Hairline Divider
**Role:** Separador de sección
Suisse Intl 11px/600, letter-spacing 0.08em, uppercase, Forest Ink color. Tiny typographic marker that labels each section's theme (e.g. 'QUICK ANSWER').
1px sólido en #e5e7eb o #B08208, a todo el ancho o contenido. Sin ornamentación, sin degradado. La división entre secciones se implica por espaciado, no por líneas visuales — esto es un respaldo.
### FAQ Row
**Role:** Two-column question/answer layout
### Image Frame Card
**Role:** Tarjeta de contenido con imagen
Left column: Faire Octave 40px/300 in Forest Ink for question. Right column: Suisse Intl 14px/400 in Charcoal for answer. 1px Border Mist divider between rows.
Borde 1px sólido #e5e7eb, 12px de border-radius, interior Linen (#f3f2ee), 24px de padding. Imagen arriba con borde 1px en #e5e7eb. Texto de cuerpo en Azeret Mono 14px debajo. Elevación mínima — sin drop shadow.
### Investor Logo Strip
**Role:** Social proof row of VC logos
### Compact Pill Tag
**Role:** Badge de categoría o estado
Single horizontal row, monochrome treatment in Charcoal #222222 on cream canvas, generous vertical padding (42px+). No decorative borders — relies on whitespace for rhythm.
8px de border-radius (pill sutil, no curvatura completa), 4–8px de padding vertical / 8–12px horizontal, Azeret Mono peso 500 a 12px. Borde 1px en #e5e7eb o #DD971A. Fondo: Bone White o transparente. Color: Graphite, Verde Institucional o Dorado UABC.
## Do's and Don'ts
### Do
- Use Forest Ink (#0f3e17) for every CTA, heading, and primary link — it is the only saturated dark and must remain singular
- Set all display headings in Faire Octave weight 300 with tight tracking (-0.03em at 56–74px) — never bold the serif
- Pair serif questions with sans-serif answers in FAQ and feature blocks to create typographic contrast
- Layer surfaces using cream → keylime → mint → sage → slate in order to create depth without shadows
- Use 14px border-radius on all cards and buttons, 999px on all badges and tags — consistency is non-negotiable
- Apply 0.08em letter-spacing with uppercase and 600 weight for eyebrow labels only — nowhere else
- Keep the Slate Hush panel as the exclusive home for product screenshots — it provides the cool counterbalance to warm green panels
- Configura todos los CTAs primarios a 9999px de border-radius con relleno #00723F y texto Bone White en Azeret Mono peso 500, 16px.
- Usa Azeret Mono peso 300 para todo encabezado a 24px, 32px y 72px — nunca lo pongas en negrita.
- Escribe el copy de cuerpo en Azeret Mono peso 300 a 14–16px con line-height 1.63–1.83.
- Separa secciones con 64px de padding vertical, no con divisores ni solo cambios de color de fondo.
- Aplica bordes 1px sólidos #e5e7eb a todas las tarjetas e imágenes — nunca uses drop shadows para elevación.
- Usa #fffefb para lienzos claros y #000000 para bandas oscuras; deja que la fotografía llene las bandas oscuras a sangre completa.
- Reserva el Verde Institucional (#00723F) como el único color con función de acción primaria — el resto de la paleta (verde claro, dorado, amarillo, azul) es soporte cromático secundario, nunca compite con él en un mismo CTA.
### Don't
- Never add box-shadow to cards — the system communicates elevation through tinted layers only
- Don't use Forest Ink as a background tint — it is too dark for surface washes; reserve for text and action fills only
- Avoid mixing multiple heading weights — everything is weight 300 in Faire Octave; bold would break the hushed editorial tone
- Don't place colored borders on cards — depth comes from fill contrast, not strokes
- Never use more than one serif at a time — Faire Octave owns display, Suisse Intl owns everything else
- Don't introduce new accent hues — the palette is strictly botanical greens + slate; any other color breaks the greenhouse metaphor
- Avoid tight padding under 21px on cards — generous 28–42px padding is essential to the soft, breathing-room aesthetic
- Don't use the sage or keylime tones for text — they are surface colors only and fail contrast for copy
- No uses pesos negrita (600–700) en encabezados Azeret Mono — el peso 300 es la firma del sistema.
- No introduzcas drop shadows para elevar tarjetas; usa el color de superficie Linen (#f3f2ee) y bordes hairline en su lugar.
- No mezcles otra familia tipográfica proporcional o serif en ningún rol — la unificación en una sola mono es la decisión que define el sistema.
- No apliques el Verde Institucional a fondos, bandas de sección o elementos decorativos — es solo de acción.
- No uses valores de radio fuera de los cuatro tokens: 8px (tags), 12px (cards), 30px (nav), 9999px (buttons).
- No rompas el ritmo de lienzo de dos tonos — no insertes un tercer color de fondo de sección (además de Bone White y Negro Institucional).
- No uses fotografía de stock, ilustraciones o renders 3D — la imaginería debe ser documental y candid.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Cream Paper | `#fffefc` | Base page background — warm off-white dominates the canvas |
| 1 | Keylime Wash | `#e1f4df` | Primary tinted panel — hero left column, light feature blocks |
| 2 | Mint Veil | `#cfe7d3` | Mid-tone section surface between keylime and sage |
| 3 | Sage Mist | `#b1dbb8` | Heavier tinted panels — hero accents, feature highlights |
| 4 | Slate Hush | `#b6ced5` | Cool counter-panel for product showcases and visual contrast |
| 1 | Bone Canvas | `#fffefb` | Secciones claras de lectura, fondo de página por defecto |
| 2 | Linen Card | `#f3f2ee` | Bloques de contenido elevados, paneles secundarios |
| 3 | Dorado Nav | `#B08208` | Superficie de navegación flotante translúcida |
| 4 | Negro Institucional | `#000000` | Secciones documentales oscuras, lienzos de banda de imagen |
## Elevation
The system deliberately avoids shadows entirely — boxShadow=none on all card variants. Depth and hierarchy are communicated through layered tinted surfaces (cream → keylime → sage → slate) rather than elevation. This keeps the interface feeling like watercolor paper rather than glassmorphic UI, matching the botanical-greenhouse metaphor.
El sistema evita deliberadamente los drop shadows. La elevación se expresa mediante cambios de color de superficie (Bone White → Linen) y bordes hairline (#e5e7eb a 1px). El único valor cercano a sombra es un box-shadow tenue teñido con #f3f2ee en botones — apenas perceptible. La interfaz debe sentirse impresa, no flotando.
## Imagery
Imagery is product-first and UI-native: floating product screenshots (CRM cards, EHR patient views, RCM revenue graphs) rendered as crisp white cards on Slate Hush panels. No lifestyle photography, no stock imagery. Iconography is minimal stroke-based, rendered in Forest Ink. Illustrations, where present, use the same sage/keylime palette to stay on-system. The visual density is text-dominant with product mockups serving as proof, not decoration.
Fotografía documental y candid: espacios universitarios, actividad académica real en lugar de stock corporativo escenificado. Las imágenes corren a sangre completa como bandas de sección, a menudo con un scrim oscuro para superposición de texto. Llevan un grado de color apagado y ligeramente desaturado que combina con la paleta institucional. Sin ilustraciones, sin renders 3D, sin capturas de producto — la fotografía ES el contenido visual. La iconografía es mínima: íconos de línea de peso mono en Graphite o Verde Institucional, nunca decorativos.
## Layout
Max-width 1200px centered container with 64–96px vertical section gaps. Hero is a two-column split: left panel tinted Keylime Wash with serif headline + body + CTA; right panel tinted Slate Hush housing three product preview cards (CRM, EHR, RCM) in a row. Below the hero, sections alternate between cream canvas and tinted panels in a botanical rhythm. FAQ uses a two-column text grid (serif question left, sans answer right). The investor logo strip is a single full-width row on cream. Navigation is minimal — left-aligned logo, centered text links, right-aligned CTA pill — no sticky behavior or mega-menu. The overall page rhythm is generous and editorial rather than dense.
La página alterna entre dos estados de lienzo: bandas documentales oscuras a sangre completa (Negro Institucional #000000 con foto) y secciones claras de lectura (Bone White #fffefb). El contenido está centrado a 1200px de max-width. El hero es una imagen oscura a pantalla completa con encabezado Azeret Mono centrado y CTA verde. Las secciones siguientes usan un split editorial de dos columnas — encabezado izquierda, cuerpo mono derecha — con gaps generosos de 64px. Las etiquetas verticales de sidebar se ubican en el margen izquierdo de la página como marcadores de sección. La navegación es una cápsula pill flotante, no una barra de ancho completo. La densidad general es espaciosa; la página está dominada por texto y fotografía, no por grillas de tarjetas.
## Agent Prompt Guide
**Quick Color Reference**
- Text/Heading: #0f3e17 (Forest Ink)
- Page background: #fffefc (Cream Paper)
- Hero/light panel: #e1f4df (Keylime Wash)
- Feature panel: #b1dbb8 (Sage Mist)
- Product showcase panel: #b6ced5 (Slate Hush)
- Border: #efeeeb
- primary action: #0f3e17 (filled action)
**Example Component Prompts**
1. Create a Primary Action Button: #0f3e17 background, #fffefc text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. **Feature card**: Sage Mist #b1dbb8 background, 14px border-radius, 42px padding all sides, no shadow. Eyebrow label in Suisse Intl 11px/600 uppercase with 0.08em tracking, Forest Ink color. Heading in Faire Octave 40px/300, Forest Ink. Body in Suisse Intl 14px/400, Charcoal #222222.
3. **Pill badge**: Background Cream Paper #fffefc, text Forest Ink #0f3e17, 999px border-radius, padding 9px 14px, Suisse Intl 14px/400. Place above section headings as a category tag.
4. **FAQ row**: Two-column grid. Left: Faire Octave 40px/300 question in Forest Ink. Right: Suisse Intl 14px/400 answer in Charcoal #222222. Separator: 1px solid Border Mist #efeeeb below each row.
## Type Pairing Philosophy
The serif/sans split is the system's defining typographic move. Faire Octave (or Cormorant Garamond as substitute) handles ALL headings at weight 300 — never bold. Suisse Intl (or Inter) handles ALL UI and body text. The whisper-weight serif creates editorial calm unusual in healthtech, where most competitors use bold geometric sans headlines. Tracking tightens as size grows: -0.01em at 40px, -0.03em at 56–74px. Body text uses natural tracking. The only uppercase treatment is 11px/600 eyebrows at 0.08em — these are navigational markers, not decorative caps.
## Similar Brands
- **Headspace** — Same botanical palette approach with sage greens and soft tinted panels, plus serif-leaning editorial calm and generous breathing room
- **Calm** — Nature-inspired muted greens against cream, generous whitespace, flat surfaces without shadows, and a serene clinical-adjacent tone
- **Mercury** — Deep single-color ink (#0f3e17 forest vs Mercury's near-black) against a warm off-white canvas with editorial serif display type at weight 300
- **Spring Health** — Behavioral health branding with green-dominant palette, soft panel layering, and humanist sans body type paired with serif accents
- **Grow Therapy** — Healthcare SaaS using sage and mint greens against cream, with rounded components and a botanical rather than clinical visual mood
Quick Color Reference:\n- text: #333833 (light) / #fffefb (dark)\n- background: #fffefb (light) / #000000 (dark)\n- border: #e5e7eb (hairline) / #B08208 (medium)\n- accent primario: #00723F (Verde Institucional — CTAs, enlaces, estados activos)\n- accent secundario: #DD971A (Dorado UABC — tags, highlights)\n- primary action: #00723F (acción rellena)
## Quick Start
@@ -231,150 +192,164 @@ The serif/sans split is the system's defining typographic move. Faire Octave (or
```css
:root {
/* Colors */
--color-forest-ink: #0f3e17;
--color-sage-mist: #b1dbb8;
--color-keylime-wash: #e1f4df;
--color-mint-veil: #cfe7d3;
--color-slate-hush: #b6ced5;
--color-cream-paper: #fffefc;
--color-charcoal: #222222;
--color-border-mist: #efeeeb;
--color-forest-shadow: #0c2f10;
--color-verde-institucional: #00723F;
--color-verde-claro: #50B848;
--color-dorado-uabc: #DD971A;
--color-amarillo-dorado: #FEBE10;
--color-verde-jardin: #024731;
--color-dorado-oscuro: #B08208;
--color-azul-institucional: #20419A;
--color-bone-white: #fffefb;
--color-linen: #f3f2ee;
--color-hairline-gray: #e5e7eb;
--color-graphite: #333833;
--color-negro-institucional: #000000;
/* Typography — Font Families */
--font-faire-octave: 'Faire Octave', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Font Family (única) */
--font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.61;
--text-body: 14px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.3;
--text-heading-sm: 23px;
--leading-heading-sm: 1.5;
--text-heading: 40px;
--leading-heading: 1.35;
--tracking-heading: -0.4px;
--text-heading-lg: 56px;
--leading-heading-lg: 1.2;
--tracking-heading-lg: -1.68px;
--text-display: 74px;
--leading-display: 1.05;
--tracking-display: -2.22px;
--text-micro: 10px;
--leading-micro: 1.6;
--tracking-micro: 0.5px;
--text-caption: 12px;
--leading-caption: 1.63;
--tracking-caption: 0.6px;
--text-body-sm: 14px;
--leading-body-sm: 1.63;
--tracking-body-sm: 0.7px;
--text-body: 16px;
--leading-body: 1.57;
--tracking-body: -0.32px;
--text-ui: 16px;
--leading-ui: 1.83;
--tracking-ui: -0.017em;
--text-heading: 24px;
--leading-heading: 1.3;
--tracking-heading: -0.48px;
--text-heading-lg: 32px;
--leading-heading-lg: 1.3;
--tracking-heading-lg: -0.64px;
--text-display: 72px;
--leading-display: 1.1;
--tracking-display: -1.44px;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-ui: 500;
/* Spacing */
--spacing-4: 4px;
--spacing-7: 7px;
--spacing-9: 9px;
--spacing-11: 11px;
--spacing-14: 14px;
--spacing-18: 18px;
--spacing-21: 21px;
--spacing-28: 28px;
--spacing-35: 35px;
--spacing-42: 42px;
--spacing-49: 49px;
--spacing-56: 56px;
--spacing-70: 70px;
--spacing-76: 76px;
--spacing-99: 99px;
--spacing-156: 156px;
--spacing-unit: 8px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-64: 64px;
--spacing-120: 120px;
--spacing-128: 128px;
--spacing-152: 152px;
/* Layout */
--page-max-width: 1200px;
--section-gap: 64-96px;
--card-padding: 28-42px;
--element-gap: 14-21px;
--section-gap: 64px;
--card-padding: 24px;
--element-gap: 8px;
/* Border Radius */
--radius-lg: 7.04px;
--radius-xl: 14.08px;
--radius-full: 999px;
--radius-full-2: 9999px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-3xl: 30px;
--radius-full: 9999px;
/* Named Radii */
--radius-nav: 7px;
--radius-cards: 14px;
--radius-badges: 999px;
--radius-buttons: 14px;
--radius-sections: 9999px;
--radius-nav: 30px;
--radius-tags: 8px;
--radius-cards: 12px;
--radius-buttons: 9999px;
/* Surfaces */
--surface-cream-paper: #fffefc;
--surface-keylime-wash: #e1f4df;
--surface-mint-veil: #cfe7d3;
--surface-sage-mist: #b1dbb8;
--surface-slate-hush: #b6ced5;
--surface-bone-canvas: #fffefb;
--surface-linen-card: #f3f2ee;
--surface-dorado-nav: #B08208;
--surface-negro-institucional: #000000;
}
```
### Fontsource — instalación de Azeret Mono
```bash
npm install @fontsource/azeret-mono
```
```javascript
// Importa los pesos usados por el sistema (300 y 500)
import '@fontsource/azeret-mono/300.css';
import '@fontsource/azeret-mono/500.css';
```
Si el proyecto no usa un bundler con soporte npm, se puede enlazar directamente el CSS servido por Fontsource (`https://cdn.jsdelivr.net/fontsource/fonts/azeret-mono@latest/latin-300-normal.css` y su equivalente `-500-`) en el `<head>` del documento.
### Tailwind v4
```css
@theme {
/* Colors */
--color-forest-ink: #0f3e17;
--color-sage-mist: #b1dbb8;
--color-keylime-wash: #e1f4df;
--color-mint-veil: #cfe7d3;
--color-slate-hush: #b6ced5;
--color-cream-paper: #fffefc;
--color-charcoal: #222222;
--color-border-mist: #efeeeb;
--color-forest-shadow: #0c2f10;
--color-verde-institucional: #00723F;
--color-verde-claro: #50B848;
--color-dorado-uabc: #DD971A;
--color-amarillo-dorado: #FEBE10;
--color-verde-jardin: #024731;
--color-dorado-oscuro: #B08208;
--color-azul-institucional: #20419A;
--color-bone-white: #fffefb;
--color-linen: #f3f2ee;
--color-hairline-gray: #e5e7eb;
--color-graphite: #333833;
--color-negro-institucional: #000000;
/* Typography */
--font-faire-octave: 'Faire Octave', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.61;
--text-body: 14px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.3;
--text-heading-sm: 23px;
--leading-heading-sm: 1.5;
--text-heading: 40px;
--leading-heading: 1.35;
--tracking-heading: -0.4px;
--text-heading-lg: 56px;
--leading-heading-lg: 1.2;
--tracking-heading-lg: -1.68px;
--text-display: 74px;
--leading-display: 1.05;
--tracking-display: -2.22px;
--text-micro: 10px;
--leading-micro: 1.6;
--tracking-micro: 0.5px;
--text-caption: 12px;
--leading-caption: 1.63;
--tracking-caption: 0.6px;
--text-body-sm: 14px;
--leading-body-sm: 1.63;
--tracking-body-sm: 0.7px;
--text-body: 16px;
--leading-body: 1.57;
--tracking-body: -0.32px;
--text-ui: 16px;
--leading-ui: 1.83;
--tracking-ui: -0.017em;
--text-heading: 24px;
--leading-heading: 1.3;
--tracking-heading: -0.48px;
--text-heading-lg: 32px;
--leading-heading-lg: 1.3;
--tracking-heading-lg: -0.64px;
--text-display: 72px;
--leading-display: 1.1;
--tracking-display: -1.44px;
/* Spacing */
--spacing-4: 4px;
--spacing-7: 7px;
--spacing-9: 9px;
--spacing-11: 11px;
--spacing-14: 14px;
--spacing-18: 18px;
--spacing-21: 21px;
--spacing-28: 28px;
--spacing-35: 35px;
--spacing-42: 42px;
--spacing-49: 49px;
--spacing-56: 56px;
--spacing-70: 70px;
--spacing-76: 76px;
--spacing-99: 99px;
--spacing-156: 156px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-64: 64px;
--spacing-120: 120px;
--spacing-128: 128px;
--spacing-152: 152px;
/* Border Radius */
--radius-lg: 7.04px;
--radius-xl: 14.08px;
--radius-full: 999px;
--radius-full-2: 9999px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-3xl: 30px;
--radius-full: 9999px;
}
```