diff --git a/CLAUDE.md b/CLAUDE.md index 8546812..fe84f3f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -13,7 +13,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co - `README.md` — full development plan, confirmed tech stack, Justfile reference, and technical warnings - `analysis/analisis-funcional.md` — complete functional specification (domain model, use cases, data models, business rules) - `plan/fase-*.md` — phase-by-phase implementation plans (Fase 0 through Fase 5) -- `design/DESIGN.md` + `design/*/screen.png` — "Monolith Editorial" direction + per-screen Stitch mockups (desktop + mobile variants). Consult before changing UI. +- `design/slate_collective/DESIGN.md` + `design/*/screen.png` — "Monolith Editorial" direction + per-screen Stitch mockups (desktop + mobile variants). Consult before changing UI. ### Fase 1 — what has been built diff --git a/README.md b/README.md index affe9a1..f182231 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Las fases ya cerradas (0, 1, 2a) reflejan este patrón retroactivamente: la secc **Total estimado: 10–15 semanas (con Fase 5 mobile)** -Los mockups de referencia viven en [`design/`](design/) (organizados por pantalla — ver `design/DESIGN.md` para la dirección "Monolith Editorial"). +Los mockups de referencia viven en [`design/`](design/) (organizados por pantalla — ver `design/slate_collective/DESIGN.md` para la dirección "Monolith Editorial"). --- diff --git a/design/DESIGN.md b/design/DESIGN.md deleted file mode 100644 index 3e4bda3..0000000 --- a/design/DESIGN.md +++ /dev/null @@ -1,191 +0,0 @@ -# Design System Specification - - - -## 1. Overview & Creative North Star: "The Monolith Editorial" - -The creative direction for this design system is **The Monolith Editorial**. We are moving away from the "busy" aesthetics of modern SaaS and toward a disciplined, high-end editorial experience. The goal is to create a sense of permanent, quiet authority. By stripping away all accent colors and relying on a monochromatic slate palette, we force the user to focus on content, structure, and intent. - - - -The "Template" look is avoided through **Intentional Negative Space** and **Tonal Depth**. We do not use lines to separate ideas; we use the weight of the typography and the shift of the background. It is a system that feels carved rather than assembled. - - - ---- - - - -## 2. Colors & Tonal Architecture - -The palette is strictly monochromatic, utilizing a "Slate" foundation to provide a cooling, sophisticated atmosphere. - - - -### Core Palette - -- **Background**: `#f7f9fb` (Light) / `#020617` (Dark) - -- **Primary (Action)**: `#000000` (Light) / `#ffffff` (Dark) — *Note: Primary actions invert the surface.* - -- **Destructive**: `#ba1a1a` (The only color allowed to break the monochrome seal). - - - -### The "No-Line" Rule - -**Explicit Instruction:** Designers are prohibited from using 1px solid borders to section off major UI areas. To define boundaries, you must use background shifts. - -- Use `surface-container-low` for secondary content areas. - -- Use `surface-container-highest` for high-priority nested components. - -- Sectioning is achieved via a 32px–48px vertical gap or a subtle change in the background hex, never a line. - - - -### Surface Hierarchy & Nesting - -Treat the UI as stacked sheets of gallery-grade paper. - -1. **Base Layer:** `surface` (The foundation). - -2. **Raised Layer:** `surface-container-low` (For subtle grouping). - -3. **Focus Layer:** `surface-container-lowest` (For cards and interactive modules to "pop" via tonal contrast). - - - ---- - - - -## 3. Typography: The Inter Hierarchy - -We use **Inter** exclusively. To achieve an editorial feel, we rely on extreme contrast between `headline-lg` and `label-sm`. - - - -| Level | Size | Weight | Case | Spacing | - -| :--- | :--- | :--- | :--- | :--- | - -| **Display-LG** | 3.5rem | 600 | Default | -0.02em | - -| **Title-LG** | 20px | 600 | Default | -0.01em | - -| **Header (Label-MD)** | 13px | 600 | Uppercase | +0.05em | - -| **Body-LG** | 16px | 400 | Default | Normal | - -| **Meta (Label-SM)** | 13px | 400 | Default | Normal | - - - -**Editorial Note:** Always pair an Uppercase Label-MD header directly above a Title-LG to create a "Masthead" effect for sections. - - - ---- - - - -## 4. Elevation & Depth: Tonal Layering - -Traditional drop shadows are largely forbidden. Hierarchy must be achieved through **Tonal Layering**. - - - -- **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` card on a `surface-container-low` background. The slight shift in slate value creates a "natural" lift. - -- **Ambient Shadows:** For floating elements like Sheets or Dialogs, use a "Ghost Shadow": `0px 20px 40px rgba(15, 23, 42, 0.06)`. It should feel like a soft glow, not a dark stain. - -- **Glassmorphism:** For the "Sticky Bottom Input," use a backdrop-blur of `12px` and a semi-transparent `surface` color (80% opacity). This ensures the content "flows" under the interface, maintaining a sense of depth. - - - ---- - - - -## 5. Components - -All components follow a 4px base grid and a `rounded-md` (0.375rem) corner radius. - - - -### Buttons (Inversion Logic) - -- **Primary:** `bg-slate-900 text-slate-50` (Light Mode). This "Inversion" is the signature interactive state. - -- **Destructive:** `bg-red-500 text-white`. Reserved only for irreversible actions. - -- **Ghost:** No background, `text-slate-500`. On hover, shift to `surface-raised`. - - - -### Input Fields & Sticky Input - -- **The Monolith Input:** A sticky bottom container with `backdrop-blur`. No border; only a subtle `surface-raised` background. - -- **Chips:** `rounded-full`, `bg-slate-200`. When active, they invert to `bg-slate-900 text-white`. - - - -### Lists & Swipe Actions - -- **Forbid Dividers:** Do not use lines between list items. Use 12px of vertical padding (`py-3`) to create separation through whitespace. - -- **Swipe-to-Delete:** The "Red Zone" emerges from behind the item. As the user swipes, the background transitions into `red-500` with a white Lucide `trash-2` icon. - - - -### Shopping Mode Components - -- **Large Tap Targets:** Increase minimum hit area to 56px. - -- **Presence Avatars:** 24px circles with a 2px `surface` border, overlapped horizontally to show collaboration. - - - ---- - - - -## 6. Do's and Don'ts - - - -### Do - -- **Do** use uppercase labels with letter-spacing for all category headers. - -- **Do** use `slate-500` for meta-text to create a visual "recession" of less important data. - -- **Do** maximize the use of the `2xl` max-width container on desktop to ensure the "Editorial" line lengths remain readable. - -- **Do** use Lucide icons at 1.5 stroke width to match the weight of Inter's medium-weight characters. - - - -### Don't - -- **Don't** use a 1px border to separate the sidebar from the main content. Use a background color shift. - -- **Don't** use any colors outside of the Slate and Red-500 palette. No "Success Green" or "Warning Orange." Use icons and text to convey state. - -- **Don't** use standard "drop shadows" on cards. If it doesn't pop via tonal shift, the layout needs more whitespace, not more shadow. - -- **Don't** use "Slate-900" for body text. Use "Slate-900" only for titles; use "Slate-800" or "Slate-700" for long-form reading to reduce eye strain. - - - ---- - - - -## 7. Layout Philosophy - -- **Desktop (lg+):** The left sidebar is a fixed Monolith. It stays `surface-raised` while the main content area remains `surface`. - -- **Mobile:** The bottom tab bar utilizes Glassmorphism. Navigation icons should be `slate-400`, switching to `slate-900` when active. No text labels on mobile tabs; the icons must be clear enough to stand alone. \ No newline at end of file diff --git a/plan/fase-5-mobile-ux.md b/plan/fase-5-mobile-ux.md index 751b219..6539622 100644 --- a/plan/fase-5-mobile-ux.md +++ b/plan/fase-5-mobile-ux.md @@ -1,7 +1,7 @@ ### Fase 5 — Rediseño UX Mobile ("Monolith Editorial") **Estado: ⏳ Plan propuesto** **Duración estimada: 1–2 semanas** -**Objetivo: reescribir la capa de presentación para que el app sea mobile-first, siguiendo las mockups de Stitch en `design/*/screen.png` y la dirección "Monolith Editorial" de `design/DESIGN.md`.** +**Objetivo: reescribir la capa de presentación para que el app sea mobile-first, siguiendo las mockups de Stitch en `design/*/screen.png` y la dirección "Monolith Editorial" de `design/slate_collective/DESIGN.md`.** Esta fase sigue TDD: **primero los tests, al final la verificación.** Toda la cobertura funcional actual (211 tests) debe seguir verde. Los nuevos tests cubren responsive breakpoints y el shell mobile.