F2-L Technical Redesign Plan

F2-L Technical Redesign Implementation Plan

For Gemini: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Re-design the entire application into a “Technical Data Dashboard” using the F2-L Pizarrón Terminal system (JetBrains Mono, 24px grid, 0px radius).

Architecture: Transition from a SaaS landing page layout to a high-density, centered 1600px dashboard. The homepage becomes an “entryway” for data exploration with a Pulse Bar and a Live Viz Header.

Tech Stack: Astro, TailwindCSS, JetBrains Mono.

---

Task 1: Update Global Styles & Design Tokens

Files:

• Modify: src/styles/global.css

Step 1: Replace design tokens and base styles

• Import JetBrains Mono.
• Update @theme to use F2-L colors and fonts.
• Set border-radius to 0px globally.
• Implement the 24px background grid on the body.

Step 2: Update utility classes

• Add .reading-column for the 1600px centered dashboard.
• Update prose styles to match the terminal look.

Step 3: Commit

git add src/styles/global.css
git commit -m "style: implement F2-L design tokens and 24px grid"

Task 2: Re-structure Base Layout (Centered Dashboard)

Files:

• Modify: src/layouts/Base.astro

Step 1: Update the layout structure

• Implement a 1600px max-width centered container.
• Update Nav to be sticky (56px) with a Teal 2px bottom border.
• Implement the “Reticula” (dot-grid logo) in the Nav.
• Update Footer to be a single-row dark band.

Step 2: Commit

git add src/layouts/Base.astro
git commit -m "layout: transition to 1600px centered dashboard"

Task 3: Update Data Story Card Components

Files:

• Modify: src/components/DataCard.astro
• Modify: src/components/DataCardFeatured.astro
• Modify: src/components/DataCardCompact.astro

Step 1: Update DataCard.astro

• Remove all border-radius.
• Update typography to JetBrains Mono.
• Use Teal-border for separators.
• Implement hard offset hover state.

Step 2: Update DataCardFeatured.astro

• Convert to a 2-column grid inside the card.
• Larger metrics and bold titles.

Step 3: Update DataCardCompact.astro

• Dense grid layout (80px viz | content).

Step 4: Commit

git add src/components/DataCard.astro src/components/DataCardFeatured.astro src/components/DataCardCompact.astro
git commit -m "feat: redesign story cards with F2-L terminal specs"

Task 4: Re-design Homepage as “Application Entryway”

Files:

• Modify: src/pages/index.astro
• Create: src/components/PulseBar.astro

Step 1: Create PulseBar component

• A 4-column grid showing city vitals (PM2.5, Contracts, Budget, etc.).

Step 2: Re-structure index.astro

• Replace marketing hero with a “Live Viz Header” (interactive feel).
• Add PulseBar below the header.
• Implement a dense 4-column grid of Story Cards.
• Remove redundant landing page sections.

Step 3: Commit

git add src/pages/index.astro src/components/PulseBar.astro
git commit -m "feat: restructure homepage as a technical dashboard"

Task 5: Final Visual Polish & Grid Alignment

Files:

• Modify: src/styles/global.css

Step 1: Align all spacings to 24px multiples

• Ensure all margins, paddings, and heights align with the background grid.
• Implement the “Major Lines” (120px) where appropriate for structural emphasis.

Step 2: Commit

git add src/styles/global.css
git commit -m "style: final grid alignment and F2-L polish"