# ui.land — Design Document ## 1. Visual Theme & Atmosphere ui.land presents itself as a curated design resource directory — and the design reflects exactly that identity. The atmosphere is warm, almost parchment-like: an off-white background (`rgb(253, 253, 252)`) rather than pure white, paired with a near-black text (`rgb(27, 27, 24)`) that reads as ink on paper. There are no shadows on the page. No gradients, no decorative motifs. The restraint is absolute. This is a site where the content — links, tools, resources — is the entire point, and the interface dissolves to let it through. Inter as the sole typeface underscores the utilitarian commitment: this is not a site trying to be beautiful, but rather one that achieves beauty through clarity. --- ## 2. Color Palette & Roles | Role | Value | Usage | |---|---|---| | Background | `rgb(253, 253, 252)` | Page background — warm off-white | | Body text | `rgb(27, 27, 24)` | All text, borders, icons | | Surface (cards/buttons) | `rgb(249, 249, 248)` | Slightly lifted surface for buttons/inputs | | Border | `rgb(238, 238, 236)` | Component edges — warm gray | | Header bg | transparent | Header sits on the page background | The palette is monochromatic in practice — three values of the same warm white-to-near-black axis. No accent color was detected. The entire chromatic vocabulary is achieved through temperature and lightness shifts within a single warm neutral. This is a deliberate choice: adding an accent would feel like an intrusion. --- ## 3. Typography Rules **Typeface:** Inter — the standard-bearer of modern interface typography. Selected for legibility at small sizes and for its neutrality in a resource-listing context. | Context | Size | Weight | Leading | Tracking | |---|---|---|---|---| | Display headline (h1) | 48px | 600 | 48px | -1.07px | | Section label (h2) | 16px | 600 | 16px | -0.18px | | Body / prose (p) | 13px | 400 | 16.9px | -0.04px | | Links (a) | 14px | 400 | normal | normal | | Buttons | 14px | 600 | normal | normal | | Inputs | 14px | 400 | 21px | normal | The use of 13px body text is unusually compact — optimized for information density. Negative letter-spacing is applied consistently across sizes, even at small values, giving the typography a cohesive tightness that reads as intentional craftsmanship. The `h2` at 16px/600 is the same size as body text but distinguished purely by weight — a minimal hierarchy system. --- ## 4. Component Styling Buttons and inputs share the same surface color (`rgb(249, 249, 248)`) and border color (`rgb(238, 238, 236)`), visually unifying the interactive layer. Buttons are medium-weight (600) at 14px, not aggressive. No shadows appear anywhere in the extracted data — ui.land achieves component distinction entirely through color tone and border, not elevation. Border radii were not extracted, suggesting default values around 4–6px (standard Inter-era defaults). The result is a flat, borderline skeuomorphic-subtle component style: like index cards sorted neatly on a warm desk. --- ## 5. Layout Principles The header has `40px` top margin and `16px` side padding — breathing room without drama. Breakpoints at `600px`, `680px`, and `1060px` define three states: mobile single-column, a mid-range two-column, and a full desktop multi-column resource grid. The narrow breakpoint spread (600–680px) handles a specific transition in the top navigation. No explicit container max-width was detected, but the small number of breakpoints suggests a deliberately simple responsive system. --- ## 6. Depth & Elevation No shadows were detected. This is the defining technical choice of ui.land's design system: **zero elevation**. Components do not lift. Pages do not layer. The entire interface exists on a single plane — a deliberate flat design that relies entirely on color tone (`rgb(249,249,248)` vs `rgb(253,253,252)`) and border contrast (`rgb(238,238,236)`) to distinguish interactive from static. In an era of layered UIs and ambient shadows, this zero-elevation approach is a statement. --- ## 7. Do's and Don'ts **Do:** - Use `rgb(253, 253, 252)` as the page background — not pure white - Apply negative letter-spacing even at small sizes (-0.04px at 13px is detectable and meaningful) - Distinguish headings from body with weight (600 vs 400) rather than dramatic size jumps - Keep all surfaces within the warm neutral range; never introduce a cool gray - Embrace zero-shadow flatness; elevation is not part of this language **Don't:** - Add an accent color — the absence of color is the design - Use font sizes below 13px for body content - Add box shadows or card elevation effects - Use text-transform: uppercase — the hierarchy lives in weight, not case - Make buttons visually dramatic; they should feel like the rest of the interface --- ## 8. Responsive Behavior Three breakpoints define the layout: `600px`, `680px`, `1060px`. The tight gap between 600 and 680 manages a navigation-specific reflow, likely collapsing a multi-item menu to a compact bar. The main content shifts from single-column (mobile) to a multi-column resource grid above `1060px`. The header's `40px` top margin likely collapses on mobile. No complex responsive patterns — the simplicity of the layout makes responsive adaptation straightforward. --- ## 9. Agent Prompt Guide > Build a resource directory interface in the style of ui.land. Background is warm off-white `rgb(253,253,252)`, text is warm near-black `rgb(27,27,24)`. No accent color. Typography is Inter: 48px/600/-1.07px for display headings, 13px/400/-0.04px for body text. Buttons and inputs share the same `rgb(249,249,248)` surface with `rgb(238,238,236)` borders. No shadows anywhere — the entire interface is flat, distinguished only by tone and border. Breakpoints at 600, 680, and 1060px. Minimal, warm, zero-drama. --- *Generated by Sparkbites — extracted from live CSS analysis*