# Writogram — Calm Modern Design System

## Brand voice
Thoughtful, quiet, premium. Writogram is a text-first writing & reading community. Visuals must respect words: generous whitespace, slow rhythm, no visual noise.

## Color tokens
- **bg** `#F7F7F5` — primary page background (soft warm off-white)
- **surface** `#FFFFFF` — cards, composer, modals
- **surface-2** `#EFEEEA` — subtle panels, hover states
- **ink** `#15171C` — primary text, near-black charcoal
- **ink-muted** `#4B5160` — secondary text, metadata
- **ink-faint** `#8A8F9A` — tertiary text, placeholders, timestamps
- **border** `#E6E4DE` — hairline dividers (1px)
- **accent** `#4F46E5` — primary actions, links, focus rings (indigo)
- **accent-hover** `#4338CA`
- **accent-soft** `#EEF0FF` — accent tinted backgrounds
- **success** `#0EA5A0` — verified, sent, delivered
- **warn** `#D97706` — drafts, edited markers
- **danger** `#DC2626` — reporting, delete

### Emotion chip palette (M4 — 13 emotions)
Each chip = soft tinted background + darker label. Use these EXACT pairs everywhere:
- Joy `#FEF3C7` / `#92400E`
- Sadness `#DBEAFE` / `#1E3A8A`
- Love `#FCE7F3` / `#9D174D`
- Anger `#FECACA` / `#991B1B`
- Fear `#E5E7EB` / `#374151`
- Hope `#D1FAE5` / `#065F46`
- Inspiration `#FDE68A` / `#78350F`
- Motivation `#FED7AA` / `#9A3412`
- Loneliness `#DDD6FE` / `#4C1D95`
- Gratitude `#FBCFE8` / `#831843`
- Nostalgia `#FEF3C7` / `#7C2D12`
- Confusion `#E0E7FF` / `#3730A3`
- Calm `#CFFAFE` / `#155E75`

## Typography
- **Headlines** Plus Jakarta Sans, weight 600–700, tight letter-spacing (-0.01em)
- **Body** Inter 16/24 weight 400, paragraph spacing 12px
- **Post body** Inter 17/28 weight 400 (slightly larger for readable thoughts)
- **Labels / meta** Inter 13/18 weight 500, ink-muted
- **Numerics** tabular figures for counts

## Shape & elevation
- Radius default 12px (cards, inputs, modals); 8px for chips/buttons; full for avatars
- Elevation: NO drop shadows by default. Use 1px border `#E6E4DE` for separation. Only modals get a soft shadow `0 8px 32px rgba(20,23,28,0.08)`.
- Cards have 24px internal padding; lists use 20px row padding.

## Layout
- Desktop canvas 1440×900. Content max-width 1200px centered.
- Three-pane app shell on most logged-in screens: left nav 240px · main feed 720px · right rail 320px. 24px gutters.
- Top bar 64px high, white, 1px bottom border.

## Components
- **Primary button** indigo bg, white text, 12px radius, 44px height, 16px horizontal padding, no shadow.
- **Secondary button** white bg, 1px border, ink text.
- **Ghost button** transparent, ink-muted text, hover surface-2.
- **Input** white bg, 1px border, 12px radius, 44px height, 14px horizontal padding. Focus = 2px indigo ring + border.
- **Card** white bg, 1px border, 12px radius, 24px padding. NO shadow.
- **Chip / Tag** rounded-full, 28px height, 12px label, 12px horizontal padding.
- **Avatar** circle, 1px white inner ring for stacking.
- **Signature** italic 13px ink-muted, prefixed by an em-dash `—`.
- **Nav item** 40px high, 12px radius, accent-soft bg + accent text when active.

## Iconography
Lucide icons, 20px stroke 1.75. Never use emoji as icons — reserved for user content and reactions.

## Reactions (M5.FR8 — fixed set V1)
Heart · Hug · Insightful · Resonates. Display as soft outlined chips with the count next to each. Active reaction = filled accent-soft bg.

## Empty states
Center-aligned, single light-stroke illustration (24px Lucide icon in a 64px circle of surface-2), a 18px headline, a 14px muted helper line, and one primary action.

## Don'ts
- No gradients on backgrounds.
- No bright colored buttons other than the indigo accent.
- No drop shadows on cards or feed items.
- No emoji as decoration in chrome (UI). Emojis live inside user content only.
- No ALL CAPS labels except the tiny eyebrow labels on auth/admin headers.
