Dashboard

Daylight Ledger

A hairline-ruled forum index where reply counts warm from gray to burnt orange

A well-kept library index card turned forum: pure white paper, 1px hairline rules and a single cyan-blue accent. A 283px sidebar sits beside a dense thread ledger with no hero and no cards. The signature is heat-scale numerals: reply and view counts shift from neutral to brown to burnt orange as engagement rises. Add a five-avatar strip, category-tinted sidebar icons, a pale-cyan notice banner and a floating fresh-threads pill. Ideal for forums, communities and any dense, scan-first index.

Included with Pro · Buy individually for ¥19 · Updated · Live demo

Signature details

  • Counts shift gray to brown to burnt orange by heat
  • Five-avatar strip, 24px circles at 28px pitch, cyan ring
  • Category-tinted sidebar icons act as the legend
  • Pale-cyan banner and floating fresh-threads pill

Page sections

  1. Header
  2. Sidebar
  3. Notice Banner & Filters
  4. Table Head & Fresh Pill
  5. Topic Rows
  6. Infinite Scroll Loader

Palette

  • Paper White #FFFFFF — background
  • Ledger Gray #F2F2F2 — surface
  • Hairline #E9E9E9 — border
  • Ink #222222 — text
  • Quiet Gray #646464 — text-muted
  • Porch Blue #0088CC — accent
  • Pale Cyan Wash #D1F0FF — accent-wash
  • Burnt Orange #B04400 — heat

Typefaces

  • Inter — display / body
  • JetBrains Mono — mono

Prompt outline

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

How to use this style

Copy the full prompt into any AI; or download it as an agent skill / Cursor rule / AGENTS.md; or, in any MCP-connected tool, say: “Build this page in the daylight-ledger-forum style from ui-atlas”.

Free preview

# Daylight Ledger — Community Forum Index Page

You are a senior product designer and front-end engineer with an obsessive eye for typography, spacing and numeric alignment.
Build a logged-out "latest threads" home page for a fictional neighborhood-hobby forum called **"Porchlight"** in the **Daylight Ledger** style described below. Treat every value in this brief as a spec, not a suggestion.

## 1. Design Intent

Calm, dense, trustworthy. Picture a well-kept library index card, or a spreadsheet that learned to be friendly. White paper, hairline rules, one cyan-blue accent, and numbers that heat up as threads get busier. The audience is regulars who scan 25 threads in seconds. The first viewport should read as an app shell (sidebar plus ledger) with no hero, no cards and no imagery except tiny avatars.