viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
beadboard/docs/plans/2026-02-16-industrial-redesign.md
zenchantlive 395f90ed2a feat(ui3): elegant earthy task feed redesign
2026-02-16 23:20:47 -08:00

2.9 KiB
Raw Blame History

📋 Implementation Plan: "Industrial Sci-Fi" Social View Redesign

## Approach

We will transform the current "standard grid" interface into a Mission Control Rig. The goal is to make the user feel like an operator managing a complex system, not just a project manager looking at cards.

Concept: "The Operator's Rig"

  • Tactile: Elements feel like physical modules plugged into a chassis.
  • Data-Dense: Information is presented with technical precision (monospaced, labeled).
  • Dark & Matte: Deep, flat grays (#1e1e1e) with high-contrast functional color (Teal, Amber, Rose).

## Visual Language

  • Containers: "Trays" and "Slots" instead of divs. Use shadow-inner to create recessed areas.
  • Cards: "Modules" or "Cartridges". Chamfered corners (or tight 4px radius), top-edge status indicators ("LED bars"), technical markings (rivets, scanlines).
  • Typography: JetBrains Mono (or system mono) for all IDs, stats, and labels. Inter (or system sans) for human-readable titles.
  • Motion: "Slotting in" animations (slide up + fade).

## Steps

  1. Foundational Assets (10 min)

    • Create ModuleCard primitive: The base building block. Dark, matte background, top status bar, technical borders.
    • Create PortItem component: For dependencies. Looks like a connector/chip.
    • Define "Industrial" tokens in globals.css (if needed, or use specific Tailwind classes).

  2. SocialCard Redesign (20 min)

    • Header: Technical ID (Mono, Teal) + Status (Uppercase, Tracking-Wide).
    • Body: High-contrast title.
    • Ports Grid: Replace lists with a 2-column grid of PortItems. Labels: "INPUTS" (Blocked By) / "OUTPUTS" (Blocking).
    • Footer: "Pilot Slot" for avatars. Technical tool buttons.

  3. SocialPage Layout (The "Rack") (15 min)

    • Top (The Horizon): Frame the 4x2 Grid as a recessed "Rack" or "Monitor Tray".
    • Bottom (The Console): A large, empty "Screen" area awaiting signal. Styled with scanlines or a "NO SIGNAL" placeholder.
    • Custom Scrollbar: Thin, high-contrast rail.

  4. Polish & "Wow" Details (15 min)

    • Add "rivets" (small dots) to corners of cards.
    • Add hover effects: Border glow (shadow-[0_0_15px_rgba(...)]).
    • Add a subtle scanline overlay to the entire Social View.

## Timeline

Phase Duration
Foundation (ModuleCard) 10 min
Card Redesign (SocialCard) 20 min
Page Layout (SocialPage) 15 min
Polish ("Wow" factor) 15 min
Total 1 hour

## Rollback Plan

Revert to commit 9c70307 (fix: truncate SocialCard dependencies...).

## Security Checklist

  • Input validation (titles)
  • No sensitive data exposed in UI
  • Error handling for empty states

## NEXT STEPS

# Ready? Approve this plan and run:
/cook @beadboard/docs/plans/2026-02-16-industrial-redesign.md