Product Spec

Pulse — TradingView-Style Home Page Design

Target: pulse.youngle.au home pageReference: tradingview.com/markets/australiaCurrent: Nuxt 3 app (dark charcoal, rounded cards, brand-teal accent)Deliverable: Section-by-section layout spec for Min to fold into v1 → v2

Pulse — TradingView-Style Home Page Design

Target: pulse.youngle.au home page
Reference: tradingview.com/markets/australia
Current: Nuxt 3 app (dark charcoal, rounded cards, brand-teal accent)
Deliverable: Section-by-section layout spec for Min to fold into v1 → v2

1. Design Tokens (Override Current)

Replace current rounded/brand-teal system with these hard-edged, neon-green tokens.

Token	Value	Purpose
`--bg-primary`	`#0c0c0e`	Page background (deeper than current `bg-surface`)
`--bg-card`	`#131316`	Card / panel background
`--bg-card-hover`	`#1a1a1e`	Card hover state
`--bg-card2`	`#18181b`	Existing, keep
`--border-edge`	`#27272a`	Border, keep
`--border-edge-light`	`#3f3f46`	Border hover / active
`--accent`	`#39FF14`	Neon green — primary accent, replaces `brand-600`
`--accent-dim`	`#22c55e`	Muted accent (green-500)
`--accent-glow`	`rgba(57, 255, 20, 0.12)`	Background glow for accent elements
`--accent-subtle`	`rgba(57, 255, 20, 0.06)`	Very subtle accent bg
`--text-primary`	`#e4e4e7`	Primary text
`--text-dim`	`#a1a1aa`	Dim text
`--text-muted`	`#52525b`	Muted / meta text
`--green`	`#22c55e`	Positive change
`--red`	`#ef4444`	Negative change
`--radius`	`0`	No rounded corners anywhere (overrides all `rounded-*`)
`--radius-xs`	`2px`	Minimal radius for inputs only
`font-family`	`Inter, system-ui, -apple-system, sans-serif`	Keep Inter
`font-mono`	`'JetBrains Mono', 'SF Mono', monospace`	Tabular data, prices

2. Page Layout (Vertical Stack, Full-Width)

┌──────────────────────────────────────────────────────┐
│  HEADER (sticky, existing design, minor tweaks)      │
├──────────────────────────────────────────────────────┤
│  SECTION 1 — Major Indices Strip                     │
│  (All Ords · ASX 200 · ASX 300 · VIX)               │
├──────────────────────────────────────────────────────┤
│  SECTION 2 — Podcast Player Card                     │
│  (5 Minutes Market Pulse Brief with Eve)             │
├──────────────────────────────────────────────────────┤
│  SECTION 3 — Ask Eve Chat Banner                     │
├──────────────────────────────────────────────────────┤
│  SECTION 4 — Trends Tabs                             │
│  [Markets | Most Active | Gainers | Losers | News]   │
├──────────────────────────────────────────────────────┤
│  SECTION 5 — 3-Column Markets Data Grid              │
│  ┌──────────────┬──────────────┬───────────────────┐ │
│  │ Highest Vol  │ Bond Yields  │ Economy + RBA     │ │
│  │ (table)      │ (table)      │ (snapshot cards)  │ │
│  └──────────────┴──────────────┴───────────────────┘ │
├──────────────────────────────────────────────────────┤
│  FOOTER (minimal or existing)                        │
└──────────────────────────────────────────────────────┘

Max width: 1600px (keep current)
Gutter: px-4 sm:px-6 (keep current)
Section spacing: space-y-3 (tightened from current space-y-4/space-y-5 — TradingView density)

3. Section-by-Section Specs

HEADER (Existing, Minor Tweaks)

Keep: Sticky, backdrop-blur, logo, nav (Dashboard / Market Watch / Research / Podcast), search, date, sign-up button.

Changes:

Replace rounded-lg on search input with rounded-none (—radius override)
Replace rounded-lg on sign-up button with square corners
Replace bg-brand-600 with bg-[--accent] text-black font-bold (neon green button, black text for contrast)
Date badge: replace rounded-md with square corners
Remove the noise texture overlay (opacity-[0.03] div) — TradingView is clean, no grain

SECTION 1 — Major Indices Strip

Current state: Already exists as horizontal scroll strip with cards.

Changes:

Field	Current	Target
Card shape	`rounded-lg` border	Square, `border-l-[3px]` accent strip on left
Hover	`hover:border-edge-light`	`hover:bg-[--accent-glow]` + subtle border-left glow
Change colour	`text-red-400` / `text-brand-400`	`text-[--green]` / `text-[--red]`
Spacing	`gap-3`	`gap-2` (tighter)
Font size	`text-sm` prices	`text-sm` prices, `text-[11px]` labels (denser)
Extra data	—	Add Change (pts) after % change, e.g.: `▼ 0.25% (-23.4)`

Component structure (per index chip):

┌──────────────────────────────────┐
│▌ All Ords    ▲ 9381.4  +0.25%  │  ← 3px neon-green left border
│▌                        (+23.1) │
└──────────────────────────────────┘

Data fields per index:

Name (All Ords, ASX 200, ASX 300, VIX)
Last price (tabular-nums)
Change % (green/red)
Change pts (green/red, smaller)
Direction arrow (▲/▼)
Optional: sparkline mini-chart (SVG inline, ~60px wide, green/red line)

Mobile: Horizontal scroll, overflow-x-auto, same as current but tighter.

SECTION 2 — Podcast Player Card

Current state: Teal-bordered card with gradient bg, "Eve's Corner — Podcast" badge, title, description, link, audio player.

Changes:

Aspect	Current	Target
Corner	`rounded-xl`	Square (`border` only)
Border	`border-brand-700/30`	`border-l-[3px] border-[--accent]` — neon-green left accent
Background	`from-brand-600/5 to-card`	`bg-[--bg-card]` with `bg-[--accent-subtle]` top-right corner badge
Badge	`rounded-full` bg-brand-600/10	Square `px-2 py-0.5` with `border border-[--accent-dim]`
Badge dot	`rounded-full bg-brand-400`	`bg-[--accent]`
Title	`text-sm font-semibold text-zinc-200`	`text-base font-bold text-[--text-primary]`
CTA link	`rounded-lg` border	Square (`border` only, `hover:border-[--accent] hover:text-[--accent]`)
Audio player	`rounded` native controls	Square, custom-styled: `bg-[--bg-card2] border border-[--border-edge]`

Layout:

┌─────────────────────────────────────────────────────────┐
│▌                                                       │  ← 3px neon-green left border
│  ● Eve's Corner — Podcast                              │
│                                                        │
│  🎙️ 5 Minutes Market Pulse Brief with Eve             │
│  Five minutes. The market, then a breath.              │
│                                                        │
│  Episode 1 · 13 Aug · ~22 min    [▶▶───────────]  🔊   │
│                                                        │
│                                      [ Podcast → ]     │
└─────────────────────────────────────────────────────────┘

Data fields:

Episode title
Episode description/tagline
Episode number, date, duration
Audio progress bar (custom, accent colour)
Play/pause button
Link to /podcast

Important: Must render ABOVE Section 3 (Ask Eve). Confirm DOM order.

SECTION 3 — Ask Eve Chat Banner

Current state: Gradient card with "✦ Ask Eve" call-to-action, linking to /chat.

Changes:

Aspect	Current	Target
Corner	`rounded-xl`	Square
Border	`border-brand-700/30`	`border border-[--border-edge]` with `border-b-[3px] border-[--accent]` (bottom accent)
Background	`from-brand-600/10 via-card to-card`	`bg-[--bg-card]` with subtle `bg-[--accent-subtle]` overlay
"✦" icon	`rounded-xl bg-brand-600/15`	Square, `bg-[--accent] text-black font-bold`
Text "Ask Eve"	`text-brand-400`	`text-[--accent] font-bold tracking-wider`
CTA arrow	`text-brand-400`	`text-[--accent]`

Layout:

┌─────────────────────────────────────────────────────────┐
│  ✦  Ask Eve                                            │
│  ───────────────────────────────                       │  ← 3px neon-green bottom border
│  Chat with Eve — the market in plain words             │
│                                         Open chat →    │
└─────────────────────────────────────────────────────────┘

Data fields:

Icon (✦ or chat bubble SVG)
Section label: "Ask Eve"
Tagline copy
CTA link to /chat

SECTION 4 — Trends Tabs + Content Area

Current state: Tab bar (rounded-lg pills) with 5 tabs: Markets | Most active | Daily gainers | Daily losers | News. Below, a "Daily Brief" card and a news list.

Changes:

Aspect	Current	Target
Tab container	`rounded-xl border`	Square, `border-b border-[--border-edge]` (underline style, not pill)
Tab pills	`rounded-lg` bg on active	Square, active: `border-b-2 border-[--accent] text-[--accent] bg-none`
Tab hover	`hover:bg-white/[0.03]`	`hover:text-[--text-primary]` (no bg, just text + faint underline)
Content area	Mixed cards	Data table layout per tab (TradingView density)

Tab bar structure (underline navigation):

[ Markets ]  [ Most active ]  [ Gainers ]  [ Losers ]  [ News ]
───────────────────────────────────────────────────────────────  ← 1px border-edge

Active tab: border-b-2 border-[--accent] neon-green underline.

Tab content — Markets (default):

Replace the current "Daily Brief" card with a compact data table row.

┌──────────────────────────────────────────────────────┐
│  Sector           Last    Chg%     Chg       Vol     │
│  ─────────────────────────────────────────────────── │
│  Financials      7,842   +0.42%   +32.8    1.2M     │
│  Materials       16,231  -0.18%   -29.3    892K     │
│  Healthcare      22,418  +0.67%   +149.1   654K     │
│  Energy          9,873   -0.53%   -52.6    1.1M     │
│  Industrials     6,544   +0.09%   +5.9     441K     │
│  Tech            3,218   +1.24%   +39.4    387K     │
│  ... [Show more →]                                    │
└──────────────────────────────────────────────────────┘

Tab content — Most active: Same table format, ranked by volume descending.

Tab content — Gainers: Ranked by % change descending, green values.

Tab content — Losers: Ranked by % change ascending, red values.

Tab content — News: Keep existing news feed (links with source badges), but:

Square instead of rounded-lg
Remove bg-card2, use bg-transparent with border-b border-[--border-edge] for each item
Source badge: square, border border-[--accent-dim] text-[--accent-dim]

Data fields per table row:

Name / Ticker
Last price
Change %
Change (pts)
Volume (compact: 1.2M, 892K)

SECTION 5 — 3-Column Markets Data Grid

New section — does not exist in current Pulse. Highest volume, bond yields, economy+RBA in a 3-column grid.

Layout:

┌────────────────────────┬───────────────────────┬──────────────────────────┐
│   HIGHEST VOLUME       │   BOND YIELDS         │   ECONOMY + RBA          │
│                        │                       │                          │
│  Ticker   Vol   Price  │  Name         Yield   │  GDP Growth    3.2%     │
│  ────────────────────  │  ───────────────────  │  Unemployment  4.1%     │
│  BHP    2.1M   $42.80  │  AU 10Y      4.35%   │  CPI           2.8%     │
│  CBA    1.8M   $138.50 │  AU 3Y       3.89%   │  Cash Rate     4.10%    │
│  RIO    1.5M   $118.20 │  AU 2Y       3.72%   │  RBA Next      Nov 24   │
│  WBC    1.3M   $32.15  │  US 10Y      4.02%   │  RBA Bias      Neutral  │
│  NAB    1.2M   $37.90  │  US 2Y       3.88%   │  AUD/USD      0.6534   │
│  CSL    1.0M   $298.40 │  US 30Y      4.38%   │  ASX M.Cap    $2.8T    │
│  [More →]              │  [More →]             │                          │
└────────────────────────┴───────────────────────┴──────────────────────────┘

Grid behavior:

Desktop (lg): 3 equal columns (grid-cols-3)
Tablet (md): 2 columns (highest vol + bond yields stack, economy full width)
Mobile: 1 column, stacked

Column 1 — Highest Volume:

Field	Type	Notes
Rank	number	Auto
Ticker	string	Bold, accent on hover
Volume	compact string	e.g. "2.1M"
Last price	price string	Tabular-nums
Change %	percentage	Green/red

Column 2 — Bond Yields:

Field	Type	Notes
Name	string	e.g. "AU 10Y", "US 10Y"
Yield	percentage string	e.g. "4.35%"
Change (bps)	number	Green/red, e.g. "+3bp"
Chart	mini sparkline	Optional SVG inline

Key entries:

AU 10Y Government Bond Yield
AU 3Y Government Bond Yield
AU 2Y Government Bond Yield
US 10Y Treasury Yield
US 2Y Treasury Yield
US 30Y Treasury Yield

Column 3 — Economy + RBA Snapshot:

Field	Type	Notes
GDP Growth	percentage	e.g. "3.2%"
Unemployment Rate	percentage	e.g. "4.1%"
CPI (Inflation)	percentage	e.g. "2.8%"
RBA Cash Rate	percentage	e.g. "4.10%"
RBA Next Meeting	date	e.g. "Nov 2026"
RBA Bias	tag	Neutral / Hawkish / Dovish (coloured)
AUD/USD	price	e.g. "0.6534"
ASX Market Cap	compact string	e.g. "$2.8T"

Display as info cards (key-value pairs), not a table — gives it a dashboard feel.

4. Notes for Min (Implementation Guide)

Critical CSS overrides

/* Remove all rounded corners globally */
*, *::before, *::after {
  border-radius: 0 !important;
}

/* Keep minimal radius only on inputs for usability */
input, select {
  border-radius: 2px !important;
}

Accent colour swap

Find and replace in the codebase:

brand-600 → #39FF14 (neon green)
brand-700 → #22c55e (dim green)
brand-800 → #16a34a (muted green)
brand-400 → #39FF14 (accent text)
brand-300 → #86efac (light green text)

Or better: define CSS variables and remap Tailwind brand-* to the neon palette via tailwind.config.ts.

Component inventory to build

Component	New/Modify	Notes
`IndicesStrip.vue`	Modify	Remove rounding, add left accent border, add pts change
`PodcastCard.vue`	Modify	Switch to neon accent, square corners, left border accent
`AskEveBanner.vue`	Modify	Square corners, bottom accent border, neon theme
`TrendTabs.vue`	Rewrite	Underline style instead of pills, table content
`MarketTable.vue`	New	Reusable table component for tab content
`NewsFeed.vue`	Modify	Square items, divider borders instead of cards
`MarketsGrid.vue`	New	3-column grid with three sub-components
`VolumeTable.vue`	New	Highest volume list
`BondYields.vue`	New	Bond yield table with sparklines
`EconomyRba.vue`	New	Economy snapshot cards

Mobile considerations

Indices strip: horizontal scroll (keep current behavior)
Podcast player: stack vertically, audio player goes full-width
Ask Eve: full-width banner, tap-friendly CTA
Trends tabs: horizontal scrollable tab bar, table scrolls horizontally
3-column grid → single column on mobile
All touch targets min 44px height

Data sources (to wire up)

Data	Source	Refresh
Indices prices	ASX API / Yahoo Finance / polygon.io	Every 5 min
Most active	Market data feed	Daily
Gainers/losers	Market data feed	Daily
Bond yields	RBA / Treasury / FRED	End of day
Economic data	ABS / RBA	As released
Podcast episodes	Local CMS / audio files	On publish

5. Visual Mock (ASCII Wireframe)

┌─────────────────────────────────────────────────────────────────────┐
│  PULSE  | Dashboard | Market Watch | Research | Podcast            │
│  [🔍 Search ticker…]                     Thu, 13 Aug 2026  [Sign up]│
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ▌All Ords  ▲9381.4  +0.25%  ▌ASX 200  ▼9188.5  -0.23%            │
│  ▌ASX 300   ▼9118.2  -0.23%  ▌VIX      ▲14.68  +0.89%             │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ▌● Eve's Corner — Podcast                                         │
│  ▌🎙️ 5 Minutes Market Pulse Brief with Eve                        │
│  ▌Five minutes. The market, then a breath.                         │
│  ▌Episode 1 · 13 Aug · ~22 min  [▶▶═══════════]  🔊               │
│  ▌                                                   [ Podcast → ] │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ✦ Ask Eve                                                         │
│  ─────────────────────────────                                      │
│  Chat with Eve — the market in plain words       Open chat →       │
│  ─────────────────────────────────────────────────────────────      │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  [Markets]  [Most active]  [Gainers]  [Losers]  [News]             │
│  ──────────────────────────────────────────────────────────────     │
│                                                                     │
│  Sector       Last    Chg%     Chg      Vol                         │
│  ─────────────────────────────────────────────                     │
│  Financials  7,842   +0.42%   +32.8   1.2M    ▲  positive          │
│  Materials   16,231  -0.18%   -29.3   892K    ▼  negative          │
│  Healthcare  22,418  +0.67%   +149.1  654K                         │
│  ...                                                                 │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌───────────────┬──────────────────┬──────────────────────────┐   │
│  │ HIGHEST VOL   │ BOND YIELDS      │ ECONOMY + RBA            │   │
│  │               │                  │                          │   │
│  │ BHP   2.1M    │ AU 10Y   4.35%   │ GDP Growth     3.2%     │   │
│  │ CBA   1.8M    │ AU 3Y    3.89%   │ Unemployment   4.1%     │   │
│  │ RIO   1.5M    │ US 10Y   4.02%   │ CPI            2.8%     │   │
│  │ WBC   1.3M    │ US 2Y    3.88%   │ Cash Rate      4.10%    │   │
│  │ NAB   1.2M    │ US 30Y   4.38%   │ RBA Next       Nov 24   │   │
│  │ CSL   1.0M    │                  │ RBA Bias        ● Neutral│   │
│  │               │                  │ AUD/USD        0.6534   │   │
│  └───────────────┴──────────────────┴──────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

6. Acceptance Criteria

All corners are square (border-radius: 0) — no rounded-xl, no rounded-lg, no rounded-full badges
Accent colour is neon green (#39FF14) everywhere — buttons, borders, active states, badges
Podcast card renders above Ask Eve banner in DOM order
Indices strip shows all 4 indices with price, change %, AND change pts
Trends tabs use underline style (not pill), with active tab underlined in neon green
Tab content area shows a compact data table (not freeform cards)
3-column grid renders correctly at all breakpoints
Mobile: everything stacks, touch targets min 44px
Noise/grain texture removed from background
Audio player styled to match (square, dark, accent progress bar)
Sign-up button: neon green background, black bold text

Pulse Split — Sol Architect Review

Pulse V2 — Design Spec (Nova)

Companion to: PULSE-V2-SPEC.md (product spec, Min) · Status: v1.0 design layer Scope: wireframes, component tree, design tokens, interaction & feedback patterns, a11y Constraint honored: V1 tokens unchanged (dark #09090b, mint #16A34A) — V2 is a layout/data upgrade, not a rebrand.