uiw.tf — Design Document

1. Visual Theme & Atmosphere

uiw.tf is a design portfolio or UI showcase with the confident minimalism of a creative studio that has nothing to prove. The foundation is pure white (rgb(255, 255, 255)) with ink-black text (rgb(20, 22, 23)) — one of the most committed black-on-white palettes in the space. The single moment of brand expression is a neon mint-green (rgb(27, 255, 205)) appearing on copyable labels — a tooltip-like badge that announces its own interactivity. Inter carries all the type. The atmosphere is studio-grade: precise, unadorned, and aware that every added element costs something.

2. Color Palette & Roles

The palette is as stripped as it gets: white, two values of black, and one electric accent. The neon mint (rgb(27, 255, 205)) is the only color decision on the page, and it earns that right by appearing only where something is interactive and copyable. It functions as a UX signal, not a brand color.

3. Typography Rules

Typeface: Inter — universal, neutral, optimized for screen rendering at every size.

Unlike most Inter implementations, uiw.tf applies no negative letter-spacing on headings — the 48px/700 title stands unmodified. This gives the display text a slightly wider, more open presence than tightly-tracked peers. The 0.1px button tracking is a micro-detail that slightly opens up label legibility. Body text at 14px/24px (p) is a dense but comfortable reading rhythm.

4. Component Styling

Buttons are transparent with black borders — ghost-style throughout, no fills except for the neon mint copyable badge. Links render in pure black with a white background context, making them indistinguishable from body text until hovered. The rgba(0,0,0,0.12) 0px 8px 30px shadow is the sole elevation tier — smooth, wide-spread, used to lift cards off the page gently. The main content has substantial side margins (260px), creating a focused content column. No border-radius data was explicitly extracted, suggesting standard browser defaults or Tailwind’s rounded (~4px) values.

5. Layout Principles

The main element carries 64px padding with 260px horizontal margins — centering content into a controlled reading column on wide screens. Footer margins mirror this at ~266px. This is a deliberately narrow content area on desktop, rejecting the full-width grid approach. Breakpoints at 600px and 640px indicate a single responsive inflection: the wide margins collapse to standard mobile padding below 600px. The layout prioritizes focused reading over spatial generosity.

6. Depth & Elevation

One shadow tier handles all elevation: rgba(0, 0, 0, 0.12) 0px 8px 30px. It is a single, soft, downward-casting shadow — no horizontal offset, no secondary layer. The transparency level (12% black) keeps it airy and non-dramatic. No inner shadows, no border-radius compound shadows, no color-tinted elevation. The neon mint badge likely has no shadow of its own — its color carries all the visual weight needed.

7. Do’s and Don’ts

Do:

• Use rgb(27, 255, 205) exclusively for interactive copy/reveal elements
• Apply the single shadow (rgba(0,0,0,0.12) 0px 8px 30px) only to card-level elements
• Let headings breathe with default letter-spacing — no negative tracking here
• Keep links black on white without color differentiation; hover states carry the signal
• Maintain 260px desktop margins to preserve the focused column feel

Don’t:

• Introduce a second accent color alongside the neon mint
• Use the neon mint as a section background or decorative fill
• Apply color to text links in their default state
• Add more than one shadow tier — the single soft shadow is the entire depth vocabulary
• Override button backgrounds with fills (except the copy badge)

8. Responsive Behavior

Two breakpoints (600px, 640px) define the sole responsive transition. Below 600px, the 260px margins collapse and the single-column layout fills the viewport. The 64px content padding likely reduces to 24px or 16px on mobile. The design is intentionally simple to adapt: with no multi-column grids, no complex navigation, and no image carousels, the responsive system is minimal by design.

9. Agent Prompt Guide

Build a UI portfolio/showcase in the style of uiw.tf. White background #ffffff, text rgb(20,22,23), buttons and borders in pure black rgb(0,0,0). Inter typeface throughout: 48px/700 for display headings (no letter-spacing adjustments), 14px/400/24px for body. Single accent: neon mint rgb(27,255,205) for copyable/interactive label badges only. One shadow tier: rgba(0,0,0,0.12) 0px 8px 30px for card elevation. Desktop layout in a focused column with 260px side margins. Two breakpoints: 600px and 640px.

Generated by Sparkbites — extracted from live CSS analysis