Community social feed

# Community social feed

## Product direction

- **Page type:** application
- **Layout archetype:** social
- **Audience:** Members following a specialist creator community
- **Goal:** Keep discussion readable while making relevant people and topics easy to follow.
- **Tone:** Human, lively, and organized

## Visual system

- Use the semantic palette below; never use color without meaning.
- Heading: Inter, ui-sans-serif, system-ui, sans-serif; body: Inter, ui-sans-serif, system-ui, sans-serif; code: JetBrains Mono, ui-monospace, monospace.
- Density is comfortable; base radius is 12px; shadows are subtle.
- Icons: Lucide-style outline icons with consistent 1.75px strokes.
- Imagery: Use product-specific imagery only when it explains the workflow; never use decorative filler..

## Semantic palette

| Role | Value | Intended use |
| --- | --- | --- |
| Background | `#111318` | Page canvas and the deepest application layer |
| Surface | `#1b1e25` | Cards, panels, navigation, and raised regions |
| Text | `#f2f4f8` | Primary copy, labels, and high-emphasis content |
| Muted | `#9ba3b4` | Secondary copy, metadata, and inactive controls |
| Accent | `#7aa2f7` | Primary actions, focus, selection, and active state |
| Success | `#73daca` | Confirmed success and healthy state |
| Warning | `#e0af68` | Caution, pending review, and non-blocking risk |
| Danger | `#f7768e` | Errors, destructive actions, and blocking risk |

The optional `design-tokens.css` from the full export pack mirrors these values. This `DESIGN.md` remains complete when used on its own.

## Layout and content

1. Following feed
2. Topic channels
3. Featured discussion
4. Member notes
5. Saved posts
6. Compose

## Responsive and accessibility

- Collapse sidebars into an explicit drawer and preserve the primary task before secondary metadata..
- Meet WCAG AA contrast, preserve visible focus, and respect reduced motion.
- Do not reduce essential content or actions on mobile.

## Machine-readable OneLiners DesignBrief

<!-- oneliners-design-brief:v1 -->
```json
{
  "schemaVersion": "1",
  "name": "Community social feed",
  "pageType": "application",
  "layoutStyle": "social",
  "audience": "Members following a specialist creator community",
  "goal": "Keep discussion readable while making relevant people and topics easy to follow.",
  "tone": "Human, lively, and organized",
  "palette": {
    "background": "#111318",
    "surface": "#1b1e25",
    "text": "#f2f4f8",
    "muted": "#9ba3b4",
    "accent": "#7aa2f7",
    "success": "#73daca",
    "warning": "#e0af68",
    "danger": "#f7768e"
  },
  "typography": {
    "heading": "Inter, ui-sans-serif, system-ui, sans-serif",
    "body": "Inter, ui-sans-serif, system-ui, sans-serif",
    "mono": "JetBrains Mono, ui-monospace, monospace",
    "baseSize": 16,
    "scale": 1.2
  },
  "density": "comfortable",
  "radius": 12,
  "shadow": "subtle",
  "sections": [
    "Following feed",
    "Topic channels",
    "Featured discussion",
    "Member notes",
    "Saved posts",
    "Compose"
  ],
  "iconStyle": "Lucide-style outline icons with consistent 1.75px strokes",
  "imagery": "Use product-specific imagery only when it explains the workflow; never use decorative filler.",
  "mobileStrategy": "Collapse sidebars into an explicit drawer and preserve the primary task before secondary metadata.",
  "accessibility": {
    "contrastTarget": "WCAG AA",
    "reducedMotion": true,
    "visibleFocus": true
  }
}
```