# Responsive Layout Notes — aicodingpricing leaderboard

Date: 2026-05-28
Design truth:
- Desktop HTML: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/llm-leaderboard-desktop.html`
- Mobile HTML: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/llm-leaderboard-mobile.html`
- Interaction-state HTML: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/recommender-calculator-transition-desktop.html`

## Breakpoints

| Width | Layout | Rule |
|---:|---|---|
| 1440+ | full dashboard | nav + split hero + filter rail + recommender grid + table |
| 1024–1439 | compact desktop | keep table; reduce column padding; allow horizontal table scroll only inside table wrapper |
| 768–1023 | tablet | hero stacks 60/40 → single; recommender becomes 2 columns; table can remain scrollable |
| 390–767 | mobile | no full table; render model rows as cards; filters become horizontal chips |
| <390 | narrow mobile | keep 44px touch targets; truncate long model names only after first full line |

## Desktop hierarchy

1. Nav: existing-site links, not a standalone product nav.
2. Hero: decision-engine positioning + “decision stack” visual.
3. Short answer: centered statement, before filters.
4. Filter rail: sticky candidate if page is long.
5. Recommender cards: four workflow entry points.
6. Leaderboard table: dense, source-led, crawlable HTML.
7. Methodology blocks: close to the table, not buried in footer.
8. Calculator transition: model/workflow prefill CTA.
9. FAQ/footer.

## Mobile hierarchy

1. Header + hamburger + primary CTA.
2. H1 + subhead + short answer above fold.
3. Filter chips: horizontal scroll, selected chip visible.
4. Recommender cards: stacked; caveat and confidence visible.
5. Model cards: one model per card. Required visible fields:
   - model + provider
   - benchmark evidence or `not publicly benchmarked`
   - input/output price or `not disclosed`
   - cache status
   - context or `not disclosed`
   - best_for tag(s)
   - data_status + source_confidence
   - caveat
   - source link/last checked
   - row CTA
6. Methodology accordion/cards.
7. Calculator bridge.

## State coverage

| State | Desktop behavior | Mobile behavior | Must not hide |
|---|---|---|---|
| default | table sorted by safe default, no absolute rank claim | stacked cards | caveat/source/status |
| filter active | chip active; table/cards filtered; recommender copy changes | selected chip stays visible | method caveat |
| insufficient data | show empty state: “insufficient public data for this filter” | full-width empty card | unknown policy |
| row partial evidence | amber/outline badge + caveat visible | badge in model card header | source note |
| price not disclosed | blank calculator price field + label | blank input + helper | do not use 0 |
| speed unknown | `not disclosed` / exact source missing | same | no inferred speed |
| calculator prefill | model/workflow prefilled; numeric prices only if source-backed | single-column form | estimate caveat |
| error | red/amber inline message; keep data visible | same | source/caveat |
| loading | skeleton rows/cards, no fake sample values unless clearly “example” | skeleton cards | no invented numbers |

## Table-to-card mapping

Desktop table columns:
- Model
- Provider
- Benchmark evidence
- Input $/1M
- Output $/1M
- Cache
- Context
- Speed
- Best for
- Data status
- Caveat
- Source
- CTA

Mobile card grouping:
- Header: Model, Provider, data_status badge
- Evidence row: Benchmark + source confidence
- Economics row: Input, Output, Cache
- Capability row: Context, Speed, Best for
- Caveat block
- Source/freshness line
- CTA button

## Accessibility

- Use semantic table markup on desktop.
- Use list/cards with `aria-label` for mobile model cards.
- Filter chips are buttons with `aria-pressed`.
- Unknown-value badges need text labels, not color only.
- CTA buttons must be 44px minimum on mobile.
- Avoid hover-only caveats; mobile and keyboard users need inline text.

## Visual constraints

- Dark background #0B0F14; surface #111821 / #1B252E; text #D7E2EA.
- Evidence green #7CFFB2 is for verified/source-backed fields only.
- Amber #FFB454 is for partial/source-needs-recheck.
- Red #EA6B66 is for estimate caveats or missing unsafe assumptions.
- Do not introduce purple/blue SaaS gradients.
- Do not use provider logos unless asset rights are already handled; text provider names are safer for P0.