Tu Empresa Digital OS — Screen Specifications (Phase 2)
historical· designer · updated 2026-06-17 · source
One canonical layout per screen. ASCII wireframes are intentionally rough — they capture geometry and hierarchy, not pixel positions. Pair with
tedos-design-system.mdfor tokens.
Layout modes (per plan rule 6):
center-scroll—max-w-2xl mx-auto px-8 py-10 space-y-8full-height-split—flex flex-col h-full overflow-hidden
Bilingual sample format: es-MX / en-US
0. Shell Frame (host for all in-app screens)
┌───────────────────────────────────────────────────────────────────┐
│ ◉ ◉ ◉ Tu Empresa Digital OS — Home ⌘K ─ ▢ ✕│ 44px titlebar (Tauri frameless, platform-aware)
├──────────────┬────────────────────────────────────────────────────┤
│ │ Topbar (44px) · screen title · status pills · ⌘K │
│ Sidebar ├────────────────────────────────────────────────────┤
│ 200px │ │
│ │ │
│ Home │ Content (scrollable) │
│ Apps │ Layout mode per AppConfig │
│ Assistant │ │
│ Connections │ │
│ │ │
│ ── PINNED ──│ │
│ · App A │ │
│ · App B │ │
│ │ │
│ ⚙ Settings │ │
│ JM José │ │
└──────────────┴────────────────────────────────────────────────────┘
Primitives: Titlebar, Sidebar, TopBar, Shell. Tokens: bg-canvas (sidebar + titlebar), bg-surface (content area boundary via border-subtle), border-default.
1. Login
Purpose: Pre-shell auth gate. Full-window, no sidebar.
Layout: Custom — centered card, bg-canvas.
┌───────────────────────────────────────────┐
│ │
│ │
│ ┌──────────────┐ │
│ │ TeDOS │ │ Wordmark, text-h2, fg-primary
│ └──────────────┘ │
│ │
│ Bienvenido de vuelta │ text-display, fg-primary
│ Tu espacio de trabajo te espera │ text-body, fg-secondary
│ │
│ ┌─────────────────────────────┐ │
│ │ Correo │ │ FormField — label above input
│ │ [_______________________] │ │
│ │ │ │
│ │ Contraseña ¿Olvidaste?│ │
│ │ [_______________________] │ │
│ │ │ │
│ │ [ Iniciar sesión →] │ │ Button primary, full-width
│ │ │ │
│ │ ── o ── │ │ Separator, fg-muted
│ │ │ │
│ │ ¿Necesitas ayuda? │ │ Button ghost
│ │ Contacta a soporte │ │
│ └─────────────────────────────┘ │
│ │
│ v0.1.0 · es-MX │ text-micro, fg-muted
│ │
└───────────────────────────────────────────┘
Primitives: Card (max-w-sm), FormField, Input, Button(primary, ghost), Separator.
States:
- empty → labels only, button enabled
- typing → live validation only on blur, not on keystroke
- submitting → button
loading, fields disabled, no shake - invalid-creds → inline error below password field (
fg-danger, 13px), no toast - rate-limited → banner above card ("Demasiados intentos. Intenta en 2 min." / "Too many attempts. Try in 2 min.")
- network-error → ConnectionGate-style retry card replaces form
Bilingual:
| es-MX | en-US |
|---|---|
| Bienvenido de vuelta | Welcome back |
| Tu espacio de trabajo te espera | Your workspace is ready |
| Iniciar sesión | Sign in |
| ¿Olvidaste? | Forgot? |
| Contacta a soporte | Contact support |
2. Suspended / Lock Screen
Purpose: Block on suspended | trial_ended | deactivated. Full-window. No shell.
┌───────────────────────────────────────────┐
│ │
│ ⊘ │ Phosphor `Prohibit`, 32px, fg-warning
│ │
│ Cuenta suspendida │ text-display
│ Tu acceso está pausado mientras │ text-body, fg-secondary, max-w 360
│ revisamos el estado de tu plan. │
│ │
│ Última verificación: hace 2 min │ text-caption, fg-muted, tabular-nums
│ │
│ [ Contactar soporte ] │ Button primary
│ [ Reintentar ] │ Button ghost (polling indicator)
│ │
│ ─────────────────────────── │
│ ⓘ Verificando estado... │ StatusDot + caption, animated dot
│ │
└───────────────────────────────────────────┘
Primitives: Card (max-w-md), Button(primary, ghost), StatusDot, Spinner (inline, after 200ms).
States:
- suspended → orange
Prohibiticon, "Cuenta suspendida" - trial_ended → blue
Clockicon, "Tu prueba terminó" - deactivated → red
XCircleicon, "Cuenta desactivada" - checking → ghost Button spins, "Reintentar" → "Verificando…"
3. Grace-Period Banner (in-shell, non-blocking)
┌────────────────────────────────────────────────────────────────────┐
│ ⚠ Tu pago no se pudo procesar. Resuélvelo antes del 5 may. [Resolver] [×]│
├────────────────────────────────────────────────────────────────────┤
│ Sidebar │ Topbar │
│ │ ... │
44px tall banner above Topbar. bg: warning-soft, border-bottom: 1px warning, text: fg-primary. WarningCircle icon 16px. Button subtle size sm. Close × is IconButton ghost. Persists until backend status clears or user dismisses for the session.
4. Home / Client Dashboard
Phase 3 update: Home is the client's dashboard. The Phase 2 "Resumen + Apps recientes + Actividad" sketch is superseded by the spec below — it absorbs that content and adds plan, usage, connections strip, and quick actions. There is no separate "/dashboard" route; landing IS the dashboard.
Purpose: First view on shell open. Answers four questions in one glance: am I OK on plan + usage, what did I last touch, is anything broken, what can I do right now?
Layout: center-scroll-wide (max-w-4xl).
┌──────────────────────────────────────────────────────────────────┐
│ Topbar — "Inicio" [● Claude] [● Sheets] [● Drive] [● Cal]│ Connections strip in topbar-right (chips, fg-secondary)
├──────────────────────────────────────────────────────────────────┤
│ │
│ Buen día, José [Pro · renueva 12 jun] │ Greeting text-display · plan Badge subtle right-aligned
│ Lunes 19 mayo · 09:24 │ text-body-sm, fg-secondary, tabular-nums
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ USO DE CLAUDE · CICLO ACTUAL │ │ UsageCard (MetricCard variant) — text-h3 eyebrow
│ │ 487,231 / 1,000,000 tokens 49% │ │ Big number tabular-nums (text-h1) + percent fg-secondary
│ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░ │ │ UsageBar — accent fill, bg-elevated rail
│ │ Quedan 14 días en el ciclo · Renueva el 3 jun │ │ Caption, fg-muted
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ Acciones rápidas │ text-h2
│ [✱ Abrir Asistente] [▢ Explorar apps] [⚙ Ajustes] │ Quick-action row — Button(subtle) chips, icon + label
│ │
│ ─ Tus apps ────────────────────────────────── Ver todas → │ Section · action right
│ ┌──────────────────────┬──────────────────────┐ │
│ │ ▶ Sheets reporter │ ✎ Notas rápidas │ │ AppCard (dashboard variant)
│ │ Última vez: hace 2 h │ Última vez: ayer │ │ last-used timestamp + pin toggle in corner
│ │ [Abrir] 📌│ [Abrir] ☆│ │
│ ├──────────────────────┼──────────────────────┤ │
│ │ ✱ Vibe coding │ + Agregar app │ │ Trailing card = "add" affordance, dashed border-default
│ │ Hace 3 días │ │ │
│ └──────────────────────┴──────────────────────┘ │
│ │
│ ─ Actividad reciente ──────────────────────────────────── │
│ ● 09:14 Asistente · Resumen mensual generado │ TimelineItem — StatusDot 8px + time + source · text
│ ● Ayer Sheets reporter · 3 hojas actualizadas │ Read-only timeline. Tabular-nums on time column.
│ ● Lun Conexión · Google Drive autorizado │ Max 8 items; "Ver más →" ghost link at bottom.
│ ● Dom Claude · 92K tokens consumidos │
│ │
└──────────────────────────────────────────────────────────────────┘
Primitives:
- new:
MetricCard(used for UsageCard),UsageBar,TimelineItem,PlanBadge,QuickActionChip - existing:
AppCard(gains "dashboard" variant: timestamp + pin slot),StatusDot,Button(subtle, ghost),Section,EmptyState
Layout decisions:
- Connections strip lives in the topbar (not the body) — it's status, not content. Keeps the body focused on actionable surfaces.
- No StatCard row (Phase 2 sketch had 3 stat tiles). UsageCard does the work; "apps installed" and "connections" counts were vanity metrics that compete with the usage figure.
- Plan badge is inline with greeting, not a separate card — one piece of identity glance, not two.
- Pinning lives on AppCard, not in a separate "Pinned" rail on this screen (sidebar's pinned section is still authoritative).
States:
- new-client (no apps, no usage) → EmptyState in body slot:
SquaresFour32px, "Tu shell está lista / Your shell is ready", description "Conecta Claude y agrega tu primera app para empezar", primary Button "Empezar / Get started" → launches onboarding step 1 - loading → UsageCard shows skeleton bar (pulsing, fixed width); app grid shows 4 muted card outlines; timeline 3 muted rows
- usage-warning (≥80% cap) → UsageBar fill color shifts
accent → warning; caption gets warning icon "Cerca del límite mensual" - usage-critical (≥95% cap) → UsageBar
danger; banner above the card "Bloquearemos nuevas peticiones al alcanzar 100%" - error (any section) → inline ErrorBoundary card in that section's slot only; other sections still render
- offline → connections strip all chips dim to outline state; usage card shows last-known value with caption "Actualizado hace 12 min"
Bilingual:
| es-MX | en-US |
|---|---|
| Buen día, José | Good morning, José |
| Uso de Claude · ciclo actual | Claude usage · current cycle |
| Quedan 14 días en el ciclo | 14 days left in cycle |
| Acciones rápidas | Quick actions |
| Abrir Asistente / Explorar apps | Open Assistant / Browse apps |
| Tus apps | Your apps |
| Última vez: hace 2 h | Last used: 2 h ago |
| Actividad reciente | Recent activity |
| Pro · renueva 12 jun | Pro · renews Jun 12 |
| Ver más | See more |
5. Apps Gallery
Purpose: Browse + launch micro apps.
Layout: center-scroll widened (max-w-4xl) for grid.
┌──────────────────────────────────────────────────┐
│ Apps │ text-display
│ Tu catálogo de micro apps │ text-body, fg-secondary
│ │
│ [🔍 Buscar apps...] [+ Agregar app]│ Input + Button primary sm
│ │
│ ─ Instaladas ───────────────────────────────── │
│ ┌──────────┬──────────┬──────────┐ │
│ │ AppCard │ AppCard │ AppCard │ │ 3-col grid
│ │ ▶ Sheets │ ✱ Vibe │ ✎ Notas │ │ Each: accent stripe-left (4px), icon, title, desc, requiredConnections badges
│ └──────────┴──────────┴──────────┘ │
│ ┌──────────┬──────────┬──────────┐ │
│ │ AppCard │ AppCard │ AppCard │ │
│ └──────────┴──────────┴──────────┘ │
│ │
│ ─ Disponibles ────────────────────────────── │
│ ┌──────────┬──────────┬──────────┐ │
│ │ AppCard │ AppCard │ AppCard │ │ Visually muted (fg-secondary title), CTA "Instalar"
│ │ (locked) │ (locked) │ (locked) │ │
│ └──────────┴──────────┴──────────┘ │
│ │
└──────────────────────────────────────────────────┘
AppCard structure:
┌─────────────────────────────┐
│ ▎ ▶ Sheets [v Conn] │ 4px accent stripe (from AppConfig.color) on left edge
│ │ Icon 18px + title (text-h2 size 16px) + status badge if connection missing
│ Genera reportes con │ Description, 2 lines max, text-body-sm fg-secondary
│ Claude desde tu hoja. │
│ │
│ Claude · Google Sheets │ Required connections, text-caption fg-muted
└─────────────────────────────┘
States:
- search-no-results → EmptyState centered in grid area,
MagnifyingGlassicon, "Sin resultados para '{query}'" - installing → AppCard shows inline Spinner + "Instalando…"
- locked (not entitled) → AppCard with lock icon overlay (subtle), CTA "Mejorar plan"
- empty-installed → only "Disponibles" section shown
Bilingual:
| es-MX | en-US |
|---|---|
| Buscar apps | Search apps |
| Agregar app | Add app |
| Instaladas / Disponibles | Installed / Available |
| Instalando… | Installing… |
| Sin resultados | No results |
6. Assistant (Chat)
Purpose: Claude conversation with context awareness.
Layout: full-height-split.
┌──────────────────────────────────────────────────┐
│ Topbar — "Asistente" [v Sonnet 4.5] [⚙] │ Model selector + context settings
├────────────┬─────────────────────────────────────┤
│ │ │
│ Contexto │ ─ Hoy ──────────── │
│ panel │ │
│ 240px │ ┌─────────────────────────────┐ │
│ collapsible│ │ Tú · 09:14 │ │
│ │ │ Genérame un resumen del... │ │ User MessageBubble, right-aligned, accent-soft bg
│ Archivos: │ └─────────────────────────────┘ │
│ ☑ me.md │ │
│ ☑ work.md │ ┌─ ✱ Claude · 09:14 ─────────┐ │
│ ☐ goals.md │ │ Markdown rendered content...│ │ AI MessageBubble, left, bg-surface, ai-color author chip
│ │ │ - bullet 1 │ │
│ Tokens: │ │ - bullet 2 │ │
│ 12.4K/200K │ │ ```ts │ │ Code block — bg-sunken, mono-sm
│ ▓▓▓░░░ │ │ const foo = bar() │ │
│ │ │ ``` │ │
│ │ └─────────────────────────────┘ │
│ │ │
│ │ [streaming...] │ Inline dot pulse during stream
│ ├─────────────────────────────────────┤
│ │ ┌───────────────────────────────┐ │
│ │ │ Pregúntale a Claude... │ │ Textarea (auto-resize), bg-elevated
│ │ │ │ │ Min 1 line, max 8 before scroll
│ │ │ [📎] [✱] [Enviar→]│ │ Attach icon · model badge · send Button
│ │ └───────────────────────────────┘ │
└────────────┴─────────────────────────────────────┘
Primitives: MessageBubble, MarkdownRenderer, Textarea, Button(primary), FileTree, Checkbox, Progress, Spinner.
States:
- empty → Centered EmptyState:
ChatCircle32px, "Empieza una conversación / Start a conversation", 3 starter-prompt Buttons (subtle) as chips - streaming → User bubble already placed; AI bubble has 3-dot pulse animation in author chip (
ease-in-out1.4s infinite), content fills in - error → Inline error card at end of message list (red border, "Reintentar" Button)
- token-limit → Banner above input: "Estás cerca del límite mensual / Approaching monthly limit", warning color
- streaming-interrupt → "Detener / Stop" Button replaces "Enviar" mid-stream
Bilingual:
| es-MX | en-US |
|---|---|
| Pregúntale a Claude | Ask Claude |
| Enviar | Send |
| Detener | Stop |
| Empieza una conversación | Start a conversation |
7. Connections
Purpose: Manage integrations (Claude, Google, custom).
Layout: center-scroll.
┌──────────────────────────────────────────────────┐
│ Conexiones │ text-display
│ Servicios conectados a tu shell │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ ✱ Claude [● ✓] │ │ ConnectionCard
│ │ Anthropic API · Sonnet 4.5 │ │ Provider · model meta
│ │ 487K input / 92K output este mes │ │ Usage line, tabular-nums
│ │ [Configurar] │ Button subtle
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ G Google [● ✓] │ │ ConnectionCard
│ │ Drive · Sheets · Calendar │ │
│ │ Conectado como jose@ramva.com │ │
│ │ [Configurar] │
│ └────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ ⊕ Notion [○] │ │ Disconnected — outline dot
│ │ No conectado │ │
│ │ [Conectar] │ Button primary sm
│ └────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────┘
ConnectionCard structure: 24px provider mark left, name + meta middle, StatusDot top-right, primary action bottom-right. Border border-default, hover → border-strong. No nested card inside.
States per connection:
- disconnected → outline StatusDot, "Conectar" primary Button
- connecting (OAuth in progress) → spinner StatusDot, "Esperando autorización…" caption
- connected → green StatusDot, last-sync caption, "Configurar" subtle Button
- token-expired → amber StatusDot, "Renovar acceso" warning Button
- error → red StatusDot, error caption, "Reintentar" Button
Bilingual:
| es-MX | en-US |
|---|---|
| Conexiones | Connections |
| Servicios conectados | Connected services |
| Conectar / Configurar | Connect / Configure |
| No conectado | Not connected |
| Renovar acceso | Renew access |
8. Command Palette (⌘K)
Purpose: Quick nav + action search. Layout: Overlay modal — no entry animation (Raycast rule).
┌────────────────────────────────┐
│ [🔍 Buscar... ESC]│ Input borderless, bg-elevated, mono badge for ESC
├────────────────────────────────┤
│ ─ NAVEGACIÓN ────────────── │ Section header text-h3
│ 🏠 Inicio ⌘1 │ Result row: icon + label + ⌘shortcut chip
│ ▢ Apps ⌘2 │
│ ✱ Asistente ⌘3 │ Active row → accent-soft bg, no animation
│ │
│ ─ ACCIONES ────────────────── │
│ + Agregar app │
│ ⚙ Configuración │
│ │
│ ─ APPS ────────────────────── │
│ ▶ Sheets reporter │
│ ✎ Notas rápidas │
└────────────────────────────────┘
↑↓ navegar · ↵ abrir · esc cerrar ← footer hint, text-micro fg-muted
Primitives: Modal (centered, no backdrop blur, w-[560px]), Input, custom result list.
Tokens: bg-elevated, border-default, shadow-lg, radius-xl. Backdrop rgba(0,0,0,0.4) no blur.
Behavior:
- Opens at 0ms (no scale, no fade). Raycast rule.
- ESC closes at 0ms.
- Arrow keys move selection. Selected row gets
accent-softbg instantly. - Empty state: "Sin resultados para '{query}'. Probar con otra palabra."
9. Settings
Purpose: Profile, theme, locale, notifications, licensing.
Layout: center-scroll.
┌──────────────────────────────────────────────────┐
│ Ajustes │
│ │
│ ─ Perfil ─────────────────────────────────── │ text-h3 section
│ Nombre [José Miguel Gutiérrez________] │ FormField rows
│ Correo jose@ramva.com │ Static value, fg-secondary
│ Idioma [Español (México) ▾] │ Select
│ │
│ ─ Apariencia ─────────────────────────────── │
│ Tema [Sistema ▾] ⊙ Oscuro ○ Claro │ Select (System/Dark/Light)
│ │
│ ─ Notificaciones ─────────────────────────── │
│ Errores y crashes [●─── ON ] │ Toggle
│ Uso anónimo [───● OFF] │ Toggle
│ │
│ ─ Plan ──────────────────────────────────── │
│ Pro · $89/mes │
│ Renueva el 12 jun │
│ [ Administrar plan → ] │ Button subtle, opens admin web
│ │
│ ─ Avanzado ───────────────────────────────── │
│ Versión v0.1.0 (build 2026.05.19) │ text-mono-sm, fg-muted
│ Canal [Estable ▾] │
│ [ Cerrar sesión ] │ Button danger (subtle)
└──────────────────────────────────────────────────┘
⚠️ Pricing is placeholder. "Pro · $89/mes" and the tier names above are unsigned recommendations (see
knowledge/tedos-product-decisions.md§4 — "Needs José sign-off"). Do not treat any price in this mock as final.
Primitives: FormField, Input, Select, Toggle, Button(primary, subtle, danger), SectionHeader.
States:
- default → values from current user
- saving → autosave indicator (small "Guardando…" text-caption, fg-muted, right of field)
- saved → "Guardado ✓" appears 1.2s, then fades over 200ms
- error → field gets danger border, inline error below
- logout-confirm → Modal "¿Cerrar sesión? / Sign out?" + danger Button
Bilingual:
| es-MX | en-US |
|---|---|
| Ajustes / Perfil / Apariencia | Settings / Profile / Appearance |
| Idioma / Tema | Language / Theme |
| Cerrar sesión | Sign out |
| Administrar plan | Manage plan |
10. Onboarding (post-login first run)
Purpose: Wire up Claude + first connection. 3-step flow inside the shell, sidebar visible but disabled.
Layout: center-scroll with progress chip in topbar.
Topbar: Bienvenida · 1 de 3 [Saltar]
Step 1: Conecta Claude
┌────────────────────────────────────────┐
│ Para empezar, conecta tu API de Claude.│
│ │
│ Pega tu llave o usa la compartida del │
│ plan Pro. │
│ │
│ [ Usar llave compartida ] │ Button primary
│ [ Pegar mi llave ] │ Button subtle
└────────────────────────────────────────┘
Step 2: Conecta Google (opcional)
Step 3: Instala tu primera app
3 dots progress bottom-center, accent for current, border-default for upcoming. Each step has a single primary CTA and a "Saltar" ghost button. Skipping any step still lands the user on Home.
11. Update Prompt
Purpose: New shell version available. Non-intrusive. Layout: Toast → Modal escalation.
- v available → toast "Versión 0.1.2 disponible · [Actualizar] [Después]" (sticky 8s)
- v downloading → toast morphs to progress bar
- v ready-to-restart → modal "Listo para actualizar. Reiniciaremos Tu Empresa Digital OS." + primary Button "Reiniciar ahora"
Cross-screen contract
Every non-trivial screen renders these 4 states (per plan §6 rule 9):
| State | Visual |
|---|---|
| loading | Skeleton lines (no spinning sun ray) OR inline Spinner if <200ms expected |
| empty | EmptyState primitive — icon, title, body, optional CTA |
| error | ErrorBoundary card — icon, title, body, retry Button |
| success | The content itself |
ConnectionGate replaces content entirely when requiredConnections missing. Banner replaces topbar's right region during grace period.