`list.terminal-ls-listing` · ls -la listing

A list pattern from Terminal Mono, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3. Give the section root data-pattern="list.terminal-ls-listing". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule: A dense directory listing on 12 sub-columns: muted permissions on 1, muted size 2–3, the name in the accent 4–6, the muted date or note 7–12; the command as a muted header line. Permissions and size hide at phone width.
Slots: sectionLabel, items[4..12]
Grid areas: perms 1-1 · size 2-3 · name 4-6 · date 7-12 (12-column grid, 1-based inclusive spans)
Tokens: bg #0B0F0C · text #C8D3C5 · heading #E6F0E3 · accent #3DDC84 · accent2 #279558 · JetBrains Mono / JetBrains Mono · radius 0px · space unit 4px (full list in design/tokens.json)

Pattern notes

A muted command line (`$ ls -la ./projects`) then the listing, rows packed tight (1-unit gap), on 12 sub-columns: muted permissions on 1, muted size on 2–3, the name in the accent on 4–6, the muted date or note on 7–12. At phone width permissions and size hide.

Index

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

Positioning workshop

A day with your leadership to agree on one story.

Identity design

Logo, type, colour, motion and a working toolkit.

Website

Strategy, copy, design and build in Webflow or Next.js.

Launch support

Training, templates and a month of on-call design.

Retainer

A senior designer embedded two days a week.