# Design Language for hil.st ## Aesthetics and Tone A highlist curation tool -- "hil.st" reads as "hilist" or "highlight," suggesting a platform for curated lists of highlighted content. The design is a clean, utility-focused list-making interface that elevates the humble list into a design object. The aesthetic is list-craft: each list item is a carefully composed row with precise alignment, consistent rhythm, and satisfying visual weight. Think of a well-organized personal notebook digitized with Dieter Rams-level attention to functional beauty. Neutral backgrounds, a single accent color (electric blue), and systematic spacing create order without sterility. The tone is precise-utilitarian -- efficient, focused, and satisfying in its orderliness. ## Layout Motifs and Structure The layout uses a **list-stack** architecture -- the entire page is organized as nested lists, with the layout itself demonstrating the product's purpose. **List System:** - Single centered column, 680px max-width - Every content section is a numbered or bulleted list - List items have consistent 48px row height with content vertically centered - Items separated by 1px borders (#e4e4e8) - Numbering is prominent: large numbers (1.5rem) in electric blue aligned left, content right **Section Flow:** 1. **The First List (Hero):** "hil.st" displayed as item #1 in a list format: "1. hil.st -- highlight what matters." The entire hero is a single list item, dramatically scaled. 2. **Features List:** Numbered items describing capabilities, each on its own 48px row with blue number, bold title, and one-line description. 3. **Example Lists:** Sample curated lists (books, tools, ideas) displayed in the product's own format, demonstrating by showing. 4. **The Meta List (Footer):** Links, credits, and contact information arranged as a final numbered list. ## Typography and Palette **Typography:** - **Numbers:** "Tabular Oldstyle" via "Inter" (Google Fonts) -- using Inter's tabular number feature for perfectly aligned list numbers. Used at 1.2rem-3rem, weight 700, color: electric blue. - **Body:** "Inter" at 0.95rem, weight 400, line-height 1.6 for list item descriptions. - **Headlines:** "Inter" at 1.2rem, weight 600 for list item titles. - **Meta:** "Inter" at 0.75rem, weight 400, for metadata, counts, and labels. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background | Clean white | #ffffff | Page background | | Surface | Light gray | #f8f8fa | Alternate row backgrounds | | Electric Blue | Primary accent | #2563eb | Numbers, links, highlights | | Blue Light | Tinted blue | #eff6ff | Hover backgrounds | | Text Primary | Near-black | #1a1a1a | Titles, primary text | | Text Secondary | Medium gray | #64748b | Descriptions, body text | | Text Muted | Light gray | #94a3b8 | Metadata, counts | | Border | Subtle border | #e4e4e8 | Row separators | ## Imagery and Motifs **Numbered Row Rhythm:** The primary visual motif is the consistent 48px rows with prominent blue numbers. The repetition of this pattern creates a satisfying visual rhythm -- like a well-organized spreadsheet or a beautifully typeset index. **Highlight Stripe:** Active or featured list items gain a 3px left border in electric blue (#2563eb) and a #eff6ff background tint, visually "highlighting" them. **Checkbox Toggles:** Some list items include a CSS-drawn checkbox (16x16px square, 2px border in #2563eb, border-radius: 3px). Checked items show a blue fill with a white checkmark (::after content with clip-path). **Counter Badges:** Small inline count indicators (e.g., "12 items") displayed in rounded pills (border-radius: 10px, background: #eff6ff, color: #2563eb, padding: 2px 8px). **Zero Decoration Policy:** No shadows, no gradients, no border-radius on cards (there are no cards), no images. The entire visual identity comes from typography, color, and spacing. ## Prompts for Implementation Build the page as the ultimate list experience. Every element should reinforce the concept that lists are beautiful when well-crafted. The consistent 48px row height creates a metronome-like visual rhythm that should feel deeply satisfying. Blue numbers aligned in a consistent left column create a strong vertical axis. Hover states are subtle but functional: row background shifts to #eff6ff, providing clear interaction feedback. The hero section treats the product name as "item #1" in its own list, collapsing the meta-level between content and interface. The entire page should load instantly -- no animations, no delays. This is a tool for people who value efficiency and clarity. AVOID: decorative elements, animations, dark themes, complex layouts, serif fonts, rounded cards, hero images, marketing fluff. ## Uniqueness Notes 1. **List-as-layout architecture:** The entire page being organized as nested lists collapses the boundary between content and interface. 2. **Prominent numbered row rhythm:** The 48px row system with large blue numbers creates a distinctive visual identity from pure structure. 3. **Zero-decoration design philosophy:** Achieving visual identity through typography and spacing alone, without any decorative elements, is a bold and rare approach. 4. **Precise-utilitarian tone:** The efficient, satisfaction-in-orderliness voice matches the product's utility focus. Document chosen seed/style: aesthetic: list-craft, layout: list-stack, typography: ui-system, palette: electric-minimal, patterns: row-hover, imagery: none, motifs: numbered-rhythm, tone: precise-utilitarian Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)