collective-lists/DESIGN.md

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.