Consola — console.tuempresa.digital (design brief)
canonical· designer · updated 2026-09-05 · source
The operator's superadmin / internals console. A surface distinct from the client-facing
admin (app.tuempresa.digital) and from client apps. This doc is the design source of
truth for Frontend to implement off (design-routing.md); Paper artboards on the hub file
carry the pixel-exact reference.
Companion specs:
console-structure-spec.md— the big-picture IA + reusable-component design (two-level platform/org IA, the GLOBAL/ORG/MODULE config taxonomy, the module system, and the reusable sections/views/components over@tedos/core+@tedos/ui).console-overview-spec.md— the focused org Overview screen.console-nav-ia-spec.md— the org-context nav resolution (modules vs operator tools, theOperador ▾dropdown, module sub-nav, routing; supersedes §3's flat tab list for org context).console-memoria-spec.md— the "Memoria & IA" (ex-"Datos & Memoria") concept + screen.
Source: issue #643 (Designer handoff). Decided direction: Clerk-faithful operator dashboard,
Aurea Ink matiz — the warm-dark promotion of the existing brand ink panel into a full
environment, with a black top-bar as the console's signature. Foundation: @tedos/admin-ui
(Geist, Grid v2, HugeIcons, the data-table family). Net-new chrome + an ink token layer are
the Designer decisions below.
Accent ratified (the operator, 2026-06-22): the console's signature hue is warm Amber / Halide — now the third reserved matiz in
color-scope.md(Cian = admin · Azafrán = brand mark · Amber = console). One amber moment per screen (G17).Canonical home: the normative rule for accent / surface-hue ownership (which hue belongs to which surface, and the exclusivity contract) lives in
.claude/rules/color-scope.md. This doc is the console design rationale, not the rule of record — on any conflict,color-scope.mdwins.
1. North-star
The console is a control room, not a product — the operator already lives in the Clerk
dashboard daily, so the console mirrors its proven structure (black top-bar, primary tabs,
data-dense tables, KPI + activity charts, right detail side-panels, a Configure area with its
own left sub-nav) for zero learning curve. The dark is not an observability reflex: it
promotes the existing brand ink panel (--color-ink #0f0e0c, the auth-screen dark side)
from "one side of a login" into the whole environment, making the console a legitimate third
Aurea matiz (brand.md §5 — one core, many surfaces). The chrome stays quiet on warm ink so
data is loud; the one warm spark is the console's own accent (see §2). Density and speed beat
novelty (Purpose, Simplicity); the ink top-bar vs the admin's Cian sidebar makes "which mode am
I in" legible at a glance — the visual split is the mental-model split (Familiarity).
Principle trade-off named (design-principles.md): Familiarity vs Craft/Delight — mirroring
Clerk risks looking generic; answered by the warm ink + the console accent (not cliché
neon-on-near-black) and one-accent discipline (G17). The AI-slop "dark-blue observability
reflex" test is the bar this must clear at review.
2. The black top-bar chrome
The console's signature, the inverse of the admin's left-sidebar Cian shell. Two stacked bars
on near-black warm ink, edge-to-edge (no centered cap — Grid v2 G5 anti-stretch, G6
overflow-x: clip on the page). Total h-26 (two rows). position: sticky; top: 0; z: var(--z-topbar).
Row 1 — Switcher / context bar (h-12)
| Slot | Contents |
|---|---|
| Left | SeedMark (brand, pergamino on ink, never restyled) + wordmark lockup consola (lowercase, Geist Mono, --console-fg) — the brand moment, the only place "consola" appears as a label (grafted from B) |
| Switchers | [Plataforma ▾] (workspace, always Plataforma for superadmin) · [Proyecto ▾] (the cross-client scope picker: "Todos los proyectos" or a single client — the console's org-switcher equivalent; re-scopes god-view + the Datos & Memoria section) · [Env ▾] (Producción / Preview + a status dot: success/warning) |
| Right | ⌘K command pill (reuse the admin command-pill pattern, themed ink) · notifications bell · operator avatar menu |
Switchers are ghost chips: transparent → --console-bar-hover (ink-fg at ~8% alpha) on
hover, 1px hairline border, chevron, pill radius. Popovers scale from trigger
(transform-origin), --duration-enter / --ease-out.
Row 2 — Primary tabs (h-14)
The IA top-level sections as a horizontal tab row (Geist Mono, uppercase-tracked labels). Active
tab = brighter --console-fg text + a 2px under-rule in --console-accent — the ONE
accent moment of the chrome (G17). Inactive = --console-fg-muted → --console-fg on hover.
The under-rule slides between tabs via translateX (clip-path tabs technique), 180ms
--ease-out; never animate width/left. A right-aligned "Buscar / ⌘K" hint sits at the end of
the row on wide screens.
Responsive
- ≥lg — both rows full.
- md — switchers collapse to icon+chevron; tabs stay; ⌘K hint drops. Tab overflow: keep
the first 5 tabs visible, collapse trailing tabs into a
Más ▾menu (grafted from B) — this keeps G6 overflow-x discipline clean rather than relying on a scroll-strip. - sm — Row 1 keeps brand + Proyecto switcher + ⌘K; Row 2 becomes a
Sección ▾dropdown. (A horizontal-scroll strip with edge-fade is the fallback only if the dropdown reads poorly; the strip is the single scroll-x-allowed island per G6.)
The chrome is the console's identity at every size; it never becomes the admin's sidebar.
Tokens — the .console ink scope (new)
Net-new design surface, not a reuse of the admin's light tokens. Define a parallel
.console token scope (sibling to the admin's :root/.dark); every fg/border/status is
re-verified for AA on the dark surface before Frontend builds (the admin's light tokens fail on
dark) (grafted from B — bake the AA-on-dark pass into the spec). No raw hex in TSX — propose
these tokens for globals.css/@theme of the console app. Derived from the existing brand ink
family, never invented from scratch; all neutrals warm-tinted toward Aurea (chroma toward the
brand hue, never pure #000 — same warm-ink discipline as the shipped warm shadows).
| Token | Role | Seed |
|---|---|---|
--console-bg | near-black canvas | = --color-ink (#0f0e0c) family |
--console-surface | panels, tables (one step up) | warm ink +1 |
--console-elevated | cards, top-bar Row 2 | warm ink +2 |
--console-sunken | table header, code/JSON blocks | warm ink −1 |
--console-fg | primary text | = --color-pergamino (#f5f4ef) family |
--console-fg-secondary | secondary text | — |
--console-fg-muted | meta, inactive | = --color-ink-fg-muted (#a8a097) |
--console-border-subtle / -default / -strong | hairlines on ink | low-chroma warm grays, non-text AA ≥3:1 (mirrors the input-border fix #492) |
--console-accent (+ -hover -soft -border -text) | the one warm spark | see accent decision below — -text AA ≥4.5:1 on ink, -soft = low-alpha tint for active rows |
--console-chrome-edge | row + chrome hairline | pergamino at ~8% alpha |
status: success/warning/danger/info/ai (+ -soft) | state | re-derived from existing hues, AA-tuned on ink |
chart: --console-chart-1…5 | data viz | neutral series in muted pergamino/warm-gray; highlighted series = accent |
Accent decision — two options to present in Paper, operator signs off (color-scope.md is a hard rule and this adds a non-Cian, non-Azafrán system hue):
- Halide amber — a warm gold-amber that sits in the Aurea warm family (honors the core) yet reads as "internal control room"; distinct from admin-Cian and brand-Azafrán-on-light.
- Cool steel/halide (the SAFE fallback, grafted from C) — a non-brand system hue that fully satisfies color-scope without ratifying a third RESERVED brand hue. If the operator rejects amber, steel is the no-regret path: it reads "system/internal" and never competes with Azafrán's brand reservation.
Either way the accent appears only as: the active top-tab under-rule, the single primary
action per screen, and active-row tints (-soft). Status colors live outside the accent
family; --color-ai (violet) stays the isolate hue for AI/memory surfaces only, never sharing a
group with the accent (color-scope.md).
3. IA / sections
Tabs are driven by the operator's jobs, not product nouns (IA framing grafted from C):
| Tab | Job |
|---|---|
| God-view (landing) | "Is the whole platform healthy right now?" — cross-client health + KPIs |
| Proyectos | All client tenants (god-view table): status, plan, MRR, health, next report |
| Builder | The Plan Engine — efforts, roadmap, bounties, mi trabajo, Aportar al kit (the operator building tedos itself) |
| Datos & Memoria | Per-client data / memory / connectors platform (ADR-007), scoped by the Proyecto switcher |
| Finanzas | Billing across clients (platform→client subscriptions, MRR, receivables) |
| Infra 🔒 | Fly/Vercel deploy health, superadmin-only, read-only |
| Logs | System + audit event log (table + right detail side-panel) |
| Configurar | Configure area with its OWN left sub-nav: Sistema, Feature flags, Cuenta, API keys, Billing setup |
4. Screen-by-screen direction
Every screen: Grid v2 canvas (base-8, target-width columns 4–20, anti-stretch); 4 states
(loading skeletal/shimmer · empty · inline error via an ink-themed read-error · success);
one accent moment per screen/group (G17); HugeIcons only, pergamino/muted on ink, stroke 1.5.
God-view (landing) — Clerk Overview, re-aimed
The Clerk cohort chart is not cloned. The hero answers the operator's real question with a
per-client HEALTH MATRIX (grafted from C): one row per client × columns
Deploy / Data-sync / Connectors / Billing, each a status dot (success/warning/danger —
never the accent). Surrounding bands keep A's structure: top band (constant) = 4 KPI tiles
(MRR · Clientes activos · Nuevos este mes · En riesgo) on --console-elevated, big tabular Geist
Mono number, overline label, sparkline, count-up on mount (--duration-count); middle band
(live) = the health matrix; bottom band (fresh) = a platform-activity chart (efforts/deploys
per week — recharts on --console-chart-*, accent = the active series, never violet/Cian) + a
"Qué hay de nuevo" card (Clerk's bottom-right news pattern). Bars enter staggered scaleY
(transform-origin bottom, --stagger-band), reduced-motion = instant.
Borrows: Clerk Overview KPI cards + activity chart.
Proyectos — Clerk Users/Organizations table
The console's front door. DataTable (reuse data-table, ink-themed, compact default): columns
= Proyecto (brand mark + name + domain) · Estado (badge) · Plan · MRR (tabular-nums) · Salud
(health dot/bar) · Próximo reporte · ⋯ row menu. Toolbar = search + Columns popover + Filters +
Nuevo proyecto (the one accent moment — provisions a tenant). Row click → the reusable
DetailPanel (project summary, quick health, Entrar al proyecto → deep-links to
app.tuempresa.digital/p/[id], Ver datos & memoria → Datos section scoped to that client).
Borrows: Clerk tables + Create button + detail side-panel.
Builder (Plan Engine) — board + tables
Sub-tab strip under the primary tab: Estado · Roadmap · Bounties · Mi trabajo · Aportar al kit.
Estado = efforts board (columns Backlog/En progreso/En revisión/Hecho), cards = efforts (parent
issue title, sub-issue count/progress ring, role label as a neutral/info badge NOT accent,
PR/deploy link chips in mono). Roadmap = a lane/timeline view. GraphQL view over GitHub issue
data (effort-model.md), read-only first. One accent = the single In-Progress/focused effort
(G17). Cards drag-snap to columns (Grid v2 C2: transform: scale(1.02) lift, ghost dotted-ink
preview, animate transform only). Empty = "Sin efforts abiertos".
Datos & Memoria (ADR-007) — tables + panels, calm matiz allowed
Scoped by the Proyecto switcher (single client → section comes alive; "Todos" → a client
chooser). Sub-tabs: Registros (the client's data tables, mono IDs) · Memoria (a list +
graph toggle; the phyllotaxis-echo node view is a brand-fit delight beat, but data-first) ·
Conectores (status cards: conectado/error/sin-configurar via info/success/danger; the
AI-violet --color-ai used ONLY here for AI/memory-generated surfaces, never beside the accent in
one group; reserve the accent for the single Conectar primary). Per-screen graft from C:
this is the most product-like console surface — evaluate whether the content canvas falls back
to the admin's calmer matiz here while chrome + side-panels stay ink (don't force all-black
where density doesn't need it). Highest restraint of any console screen.
Finanzas — Clerk Billing area, honest empty
Top: KPI panels (MRR total · Cobrado este mes · Por cobrar/receivables · Churn — mono numerals).
Below: a subscriptions table (Cliente · Plan · Estado de pago badge · Próximo cargo · Importe
tabular-nums) + a receivables/overdue table (danger-toned rows). When Clerk Billing lands, a
setup-cards block mirrors Clerk's "Setup billing" (Stripe connect + config toggle rows reusing
Switch). Pre-Clerk-Billing = a branded, honest empty/setup state (grafted from B):
"Conecta la facturación" with the seed mark + one accent CTA — never fake data. A per-tab
beta/nuevo micro-pill (grafted from B, rhymes with Clerk's "Billing Beta") rides this
tab until Billing is live. One accent = the primary billing action per screen.
Infra 🔒 — status grid, restraint by design
Superadmin-only, read-only deploy health. Grid of service health cards (Vercel admin · Vercel api
· Fly api · DB · Engine): status dot (success/warning/danger), last deploy, region, latency
sparkline. Below: recent-deploys table (service · commit sha mono · status badge · time ·
duration). Row → DetailPanel (full deploy log, env, rollback as the only place danger
appears as a button; confirm inline, never modal-first). No accent here — pure status reading,
restraint by design. HugeIcons lock marker in the tab + a "Solo superadmin" pill.
Logs — Clerk Logs, faithful
Dense event-log table (Tipo de evento · Sujeto · Proyecto/tenant · Fuente · Timestamp tabular
mono) + a left filter rail (Event type · Subject · Project · Source) + search + a "Última
día/Últimos 7d" range control. Row click → DetailPanel (right) showing the raw event payload as
a syntax-tinted JSON block (--console-sunken bg, Geist Mono, copy button). Selected row =
--console-accent-soft tint (the one accent, as an active-row indicator). Virtualize the table
and make selection instant — no per-row tween (grafted from C; high-frequency surface, perf
gate). Empty = "Sin eventos en el rango". Live-tail toggle = a single quiet pulsing dot (the only
loop).
Configurar — Clerk Configure, the one left sub-nav
The ONLY console screen with a left sub-nav (faithful to Clerk's Configure), nested INSIDE one
console tab — proving the console is top-bar-driven and the left-nav is local, not global chrome.
Left rail grouped: Sistema → General, Feature flags, API keys · Cuenta → Perfil, Sesiones ·
Plataforma → Billing setup, Dominios. Content = setting rows (label + helper text + a trailing
Switch, ink-themed; the locked "Siempre activo" variant where applicable) and form cards
(label above, error below, gap-2). Feature flags = a table with per-client override toggles.
Low-frequency: no entrance animation on toggles beyond the thumb translateX; instant feedback.
5. The admin ↔ console split
Superseded in part (ADR-017, 2026-08-31).
apps/adminis now FROZEN — no new development. The per-client operational work this section assigns to admin below is migrating toapps/portal(the new primary tenant surface); the console/platform half of this split still holds. Treat the ADMIN half below as historical context, not current architecture.
Decided by mental model, not topic. Rule of thumb: running the platform → console (ink, top-bar); running a client's business → admin (Cian, sidebar). The two chromes encode "which mode am I in."
CONSOLE (console.tuempresa.digital, black top-bar, ink matiz, superadmin-only):
- God-view / Vista general (cross-client KPIs + health) — the platform "today".
- Builder / Plan Engine (efforts, roadmap, bounties, mi trabajo, kit) — moves OUT of the
admin's
/builder/*INTO the console (explicit graft from C; answers the brief's note that the admin currently carries Builder). It is the operator building tedos itself = internals. - Infra 🔒 — Fly/Vercel health — moves OUT of the admin INTO the console (was already 🔒).
- Finanzas across clients (platform→client billing/MRR/receivables) — cross-tenant money = internals.
- Datos & Memoria & Conectores per client (ADR-007 substrate) — operator-side management, scoped by the Proyecto switcher. The client never sees this.
- Logs / audit (system-wide) · Configurar (system config, flags, API keys, operator account).
ADMIN (app.tuempresa.digital, left-sidebar two-level Cian shell, FROZEN — ADR-017):
- Proyectos as the client-management front door +
Entrar al proyecto. - Level 2 — full project context (Resumen, Alumnos, Inscripciones, Pagos & CFDI, Offerings, Certificates, Leads) — all per-client operational work.
- The client portal (Comprender staff roles) entirely.
The seam (no duplication): Proyectos appears in both with different jobs — in the console
it's the god-view table (health/MRR/status, provision tenants, manage the substrate); in the
admin it's the operational front door (enter a client). The console's project DetailPanel
deep-links to app.tuempresa.digital/p/[id]; the admin can deep-link a client's Datos/Conectores
back to the console.
6. Motion + new tokens/components for @tedos/admin-ui
Motion — reuse the shipped tokens, transform/opacity only: --ease-out
(cubic-bezier(0.23,1,0.32,1)), --ease-spring (0.32,0.72,0,1), --duration-press 120ms,
--duration-enter 220ms, --duration-exit 160ms, --duration-count 300ms, --stagger-band
60ms. Tab under-rule slides (translateX); widget rows stagger on mount (per-band
--stagger-band); press feedback scale(0.97); DetailPanel slides via translateX (220ms
--ease-out, never animate width/right, interruptible CSS transition). prefers-reduced-motion
gate (already in the system) kills transforms/loops, keeps ≤200ms opacity crossfades. Restraint
governs ornament, not joy: a single delight beat in the Memoria graph + a seed-head mark in empty
states — never clutter.
New tokens to ratify (the .console ink scope, §2) — chrome/surface/elevated/sunken,
fg/border family, the accent family (amber or steel — operator sign-off), status-on-ink,
chart-on-ink. AA-on-dark verification is a build gate, not polish: every text token ≥4.5:1,
every non-text token ≥3:1 against its console surface before Frontend builds.
New / extended components for @tedos/admin-ui (add to the components/ui inventory in the
same PR that builds each):
<DetailPanel>(grafted from C) — a single reusable right-side slide-in panel (translateX,--ease-out, interruptible, transform/opacity only), used identically across Logs / Proyectos / Infra / Finanzas. One component, four screens.- Ink theming of existing primitives —
data-table(+ toolbar/columns-menu/pagination),Switch,Segmented,command-pill,badge,empty-state,read-error, KPI/sparkline cards: all re-skinned via the.consolescope, not re-authored (extraction rule: skin, don't fork). - Health-matrix / status-dot grid — the god-view hero (status dots only, no accent).
- Tab-bar with sliding under-rule +
Más ▾overflow — the Row-2 primary nav. - Per-tab
beta/nuevomicro-pill (grafted from B) — accent-soft, for surfaces that light up later (Finanzas).
Assumptions to confirm (per plan-mode — assumed, not decided)
- Accent hue — Halide amber vs cool steel (§2). color-scope.md is a hard rule; adding a third system hue needs operator sign-off. Both go in the Paper exploration.
- ADR-007 is referenced but not yet in repo — Datos & Memoria is shaped from the brief, not a spec; revisit when the ADR lands.
- Proyectos-in-both — confirm the operator accepts the shared-screen/different-job seam vs a single home.
Next step: Paper exploration on the hub file — anchor screens top-bar + God-view + Proyectos table + Logs side-panel, with the amber/steel accent shown side by side. Frontend implements off this spec; Designer reviews the rendered result against the 8 principles before close.