Oier Bravo Urtasun
ee962991e1
- 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>
191 lines
5.9 KiB
Markdown
191 lines
5.9 KiB
Markdown
# 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. |