No es una impresión: está en packages/ui/src/styles/color-variables.css. La escala
"Brand" del producto es la paleta Emerald de Tailwind (#059669) — y la paleta real del manual
ya vive en el mismo archivo, arrinconada como "Brand Accent" de marketing (#012030, #13678A,
#45C4B0). El login lo muestra a pantalla completa: el logo con la cruz petroleo→menta junto a un
botón esmeralda que no le pertenece.
| Token | Hoy | Propuesta | Dónde se ve |
|---|---|---|---|
| --primary (brand-600) | #059669 emerald | #13678A petroleo | botones, links, focus, switches |
| --admin-sidebar (brand-800) | #065F46 | #012030 noche | el sidebar completo del admin |
| --admin-sidebar-primary | #059669 | #13678A | ítem activo del nav |
| --admin-sidebar-accent | #047857 | #16394C noche-soft | hover del nav |
| --sidebar-accent (claro) | #ECFDF5 | #D9EAF2 petroleo-soft | sidebars claros (client) |
| --colors-secondary-500 | #5590DC azul ajeno | #2E9A89 menta-deep | estados info, chips secundarios |
| --ring (brand-500) | #10B981 | #2E9A89 menta-deep | focus visible |
| dark · --background | gris neutro | #001420 noche-deep | modo oscuro tintado a marca |
Parkinsans hace todos los papeles
layout.tsx declara Parkinsans como --font-sans y
como --font-mono. El manual dice otra cosa: Parkinsans es de los
títulos; los párrafos, tablas y datos son de Inter. Un panel denso leído 8 horas
al día se merece la tipografía de lectura.
Lemon Milk Pro sigue cargando
fonts.css declara 17 @font-face de "Lemon Milk Pro" — una fuente del
template original que ninguna pantalla usa. Se elimina el archivo y nadie lo nota, salvo el
bundle.
Restos de gritos
Quedan uppercase en las fichas del paciente (citas, resumen, documentos, antecedentes) y botones en Title Case ("Iniciar Sesión"). La voz del manual es minúscula cómoda: "Iniciar sesión", labels sin tracking gritado.
Todo bebe de tokens
Botones, sidebar, badges, focus: todo referencia --colors-brand-* y derivados. Retintar la escala en un archivo re-viste el panel completo — la misma jugada que hicimos con postmark/_layout y los 16 correos.
La escala completa 25→950, derivada del petroleo real con la noche como extremo profundo. El 600 (el peso que usan botones y links) cae exactamente en #13678A del manual; el 950 es #012030. Los pasos intermedios están interpolados en el mismo matiz — nada inventado fuera de la familia.
De izquierda a derecha: 25 · 50 · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 · 950. El 100 de la propuesta es #D9EAF2 — el petroleo-soft del sistema de diseño, así que las superficies suaves (hover de tablas, chips) quedan automáticamente en la familia. La menta #45C4B0 no entra en la escala: conserva su rol de acento (éxito, highlights, el "activo" de un badge) igual que en los correos.
Con los ítems reales del nav (Panel, Profesionales, Pacientes, Citas, Clínicas…). A la izquierda el esmeralda de hoy; a la derecha la propuesta: noche de fondo, hover en noche-soft, el ítem activo con rail y placa petroleo, contadores en menta, y el grupo rotulado en minúscula sin tracking gritado.
Tres decisiones finas: el ítem activo lleva un rail menta de 3px a la izquierda (la venda como señal, no como relleno); los rótulos de grupo pasan de mayúsculas trackeadas a minúscula en muted; y el avatar del usuario usa el degradado de marca — el único degradado de toda la pantalla.
Panel de administración
Titulares de página, títulos de cards y dialogs, números grandes de los KPI, botones. El carácter geométrico de la marca donde la voz manda.
María González · V-12.345.678
Párrafos, tablas, formularios, breadcrumbs y metadata — con tnum para que las cifras de las tablas alineen. El rol --font-mono deja de ser Parkinsans y pasa a Inter con cifras tabulares.
En la práctica: layout.tsx del admin declara Inter como --font-sans
y Parkinsans como --font-display; una regla global pone el display en
h1–h4, .card-title y los botones. Los componentes
no se tocan — heredan.
Tintadas a noche, anillo menta
Las sombras neutras pasan a rgba(1,32,48,…) — frías, de la familia — y el focus visible al anillo menta-deep #2E9A89, como en el sistema de diseño. Se ve igual de sobrio, se siente de la casa.
Noche en vez de gris
El dark actual es gris neutro de shadcn. Propuesta: fondos #001420 / superficies #0A3A50, tinta #BFD8DC — el modo oscuro deja de ser genérico y se vuelve Amedi de noche.
10px está bien — se queda
El --radius: 0.625rem actual armoniza con la geometría redondeada del wordmark. No se toca: cambiarlo movería cada esquina del panel sin ganancia real.
Sentence case, sin uppercase
"Iniciar Sesión" → "Iniciar sesión". Barrido de los uppercase que quedan en las fichas del paciente (la misma limpieza que ya se hizo en los labels del admin: 159df056).
| Paso | Qué se toca | Qué re-viste |
|---|---|---|
| 1 | color-variables.css | La escala brand 25→950 al petroleo (los 12 hex de la sección 02) + secondary a menta-deep. Un archivo, todo el panel — y de paso el client y el consultorio, que beben de los mismos tokens. |
| 2 | globals.css | Los 8 tokens del sidebar admin (noche/noche-soft/petroleo/rail menta), el dark tintado a noche, sombras y ring. |
| 3 | apps/admin/app/layout.tsx | Inter como sans, Parkinsans como display, mono → Inter tnum. Y borrar fonts.css de Lemon Milk. |
| 4 | Barrido de voz | uppercase de las fichas del paciente y Title Case de botones — greps quirúrgicos, sin tocar lógica. |
El paso 1 retinta la escala compartida — el verde esmeralda también desaparecería del client y del consultorio. Si el verde del producto paciente se quiere conservar por ahora, la alternativa es duplicar la escala (--colors-admin-*) y retintar solo el panel. Mi recomendación: una sola escala para todos — es exactamente la enfermedad que acabamos de curar en los correos.
El panel se usa 8 horas al día: que se sienta de la casa.
El equipo de Amedi vive en el admin más que en ninguna otra superficie. Hoy trabaja dentro de una paleta de framework; con tres archivos tocados, trabaja dentro de la marca — el mismo noche del manual, el mismo petroleo de los correos, la misma menta del récipe.
Ninguno funcional. Tokens y fuentes; cero markup, cero lógica.
El paso 1. Un archivo retinta botones, links, badges y sidebar de una vez.
El sidebar noche con el rail menta — la marca presente sin gritar.
Si la escala nueva aplica a todas las apps o solo al admin.