Files

Oier Bravo Urtasun ee962991e1 docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")

- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
    5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
    5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
    5.2 ScreenMasthead + px-4/md:px-6 pass
    5.3 /lists mobile cards
    5.4 /lists/[id] rows + red-zone swipe-delete
    5.5 undoQueue store + UndoToast
    5.6 scrollable frequency chips
    5.7 tasks/notes/search shell + masthead
    5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
    (no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
  plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
  typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
  the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-13 13:36:52 +02:00

5.9 KiB

Raw Blame History

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.

Base Layer: surface (The foundation).
Raised Layer: surface-container-low (For subtle grouping).
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.

| :--- | :--- | :--- | :--- | :--- |

| Display-LG | 3.5rem | 600 | Default | -0.02em |

| Title-LG | 20px | 600 | Default | -0.01em |

| Header (Label-MD) | 13px | 600 | Uppercase | +0.05em |

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.

5.9 KiB Raw Blame History Unescape Escape