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 framed listing window: a title bar with the muted command ($ ls -la ./projects), then rows split by dashed rules on 12 sub-columns: muted permissions on 1, muted size on 2–3, the name in the accent at step 1 on 4–7, the muted note on 8–12. At phone width permissions and size hide.
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 framed window whose title bar holds the muted command (`$ ls -la ./projects`), then the listing on 12 sub-columns, rows split by dashed 1 px rules: muted permissions on 1, muted size on 2–3, the name at step 1 in bold accent on 4–7, the muted note on 8–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.