Recent

Overview

Recent is a curation-driven design inspiration platform that celebrates the best design work on the Internet. It serves designers, creative directors, and design enthusiasts seeking high-quality reference material and trend signals. The aesthetic is rooted in **Typographic Minimalism**—a design philosophy that prioritizes clarity, hierarchy, and restraint, allowing content (design thumbnails and metadata) to speak without visual noise. The interface evokes a sense of calm professionalism: white backgrounds, generous whitespace, and a neutral gray palette create a gallery-like environment where curated design work becomes the focal point. The emotional response is one of discovery and inspiration—users feel they're browsing a carefully edited collection, not an algorithmic feed.

The brand voice is direct, editorial, and slightly authoritative. Recent speaks like a design publication: precise, confident, and free of marketing hyperbole. Vocabulary favors concrete terms ("curated," "recent," "design inspiration") over abstract ones. The tone is never breathless or trendy; instead, it's matter-of-fact and trustworthy. Example sentence in brand voice: "The best design inspiration on the Internet."

Colors

Recent's color system is anchored in a neutral, high-contrast foundation that prioritizes legibility and editorial clarity. **Primary (#202020)** is a near-black used for all text, interactive elements, and the most critical UI affordances—it commands attention without aggression. **On-Primary (#ffffff)** provides maximum contrast for text and icons on dark backgrounds. **Surface (#ffffff)** is the dominant background, creating a clean, gallery-like canvas. The surface stack progresses through subtle grays: **Surface-Container-Low (#f9f9f9)** and **Surface-Container (#f0f0f0)** are used for secondary backgrounds, filter pills, and hover states, providing visual separation without introducing color. **Outline (#bbb)** and **Outline-Variant (#d9d9d9)** define borders and dividers at 1px weig

Typography

Recent's type system is built on **Inter**, a humanist sans-serif that balances warmth with precision—ideal for a design-focused platform. The hierarchy spans eight levels, from **Display (60px, 700 weight, -0.04em tracking)** for hero statements down to **Label-SM (13px, 500 weight, 0.02em tracking)** for metadata and timestamps. **Headline-LG (40px, 600 weight)** anchors section titles, while **Body-MD (16px, 400 weight, 24px line-height)** serves as the primary reading size for descriptions and copy. The type pairing communicates editorial authority: generous line-heights (1.5 to 1.7 unitless) create breathing room, while tight letter-spacing on headlines (-0.02em to -0.04em) adds visual weight and sophistication. On small labels over busy design thumbnails, apply `text-shadow: 0 2px 4p

Layout

Recent uses a **fluid, 12-column grid** with a maximum container width of 1680px, allowing the design to scale elegantly from mobile (4px gutter, single column) to desktop (16px gutter, multi-column layouts). The sidebar navigation is fixed on desktop (220px width, left-aligned) and collapses to a mobile drawer below 1024px. Main content area uses **lg spacing (24px)** for section separation and **md spacing (16px)** for component padding. The page rhythm is unhurried: cards are spaced generously (24px vertical gap), and the feed scrolls infinitely with lazy-loaded thumbnails. Whitespace is treated as a first-class design element—never fill empty space with decorative elements. The container max-width of 1680px ensures that even on ultra-wide displays, content remains scannable and focused

Elevation & Depth

Depth in Recent is achieved through subtle, restrained shadows and layering—never through color or blur. **Level 1 (Base):** The white background (surface) has no shadow; it is the foundation. **Level 2 (Cards & Containers):** Standard cards use `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` with a 1px solid border at #d9d9d9, creating a crisp, defined edge. On hover, cards elevate to `box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)` with a transition of 150ms. **Level 3 (Modals & Popovers):** Modals use `box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)` and sit above a semi-transparent overlay (rgba(32, 3

Shapes

Recent embraces **Architectural Sharpness**—a design philosophy that favors clean, defined edges and minimal rounding. This approach reinforces the editorial, gallery-like aesthetic and prevents the interface from feeling soft or playful. **Buttons and pills** use `border-radius: 9999px` (full roundness) for a distinctive, pill-shaped affordance that signals interactivity. **Cards and containers** use `border-radius: 0.5rem` (8px) for a subtle, professional corner. **Modals and elevated surfaces** use `border-radius: 1rem` (16px) for slightly more breathing room. **Inputs and form fields** use

Components

Action Elements **Button-Primary** is the main call-to-action: 32px height, 8px vertical / 16px horizontal padding, `background-color: #202020`, `color: #ffffff`, `border-radius: 9999px`, `font-size: 14px`, `font-weight: 600`. On hover, transition to **Button-Primary-Hover** with `background-color: #e8e8e8` and `color: #202020` over 150ms. On focus, add `box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.08)` and `outline: 2px solid #202020` at 4px offset. **Button-Secondary** is a transparent variant with a 1px border at #d9d9d9, same padding and height, `color: #646464`. On hover, fill with `background-color: #e8e8e8` and transition text to `#202020`.

Containers & Surfaces **Card** is the primary container: `background-color: #ffffff`, `border: 1px solid #d9d9d9`, `border-radius: 8px`, `b

Do's and Don'ts

**Do**

• Do use the full-roundness pill shape (9999px) exclusively for buttons and interactive affordances to create visual distinction from cards.
• Do maintain 1px solid borders on all cards and containers at #d9d9d9 to preserve the crisp, editorial aesthetic.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevate on hover to 0 8px 24px rgba(0, 0, 0, 0.12) with 150ms transitions.
• Do use Inter at 400, 500, or 600–700 weights only; never use 300 or 800+.
• Do reserve #202020 (primary black) for all text, buttons, and critical interactive elements to maintain high contrast and legibility.
• Do use generous whitespace (24px lg spacing between sections) to create a gallery-like, uncluttered feel.

**Don't**

• Don't introduce vibrant accent colors or gradients; Recent's restraint is its signature—stick to the neutral gray palette.
• Don't use border-radius values between 2px and 4px; they appear indecisive. Use 8px (cards), 16px (modals), or 9999px (pills).
• Don't apply shadows with blur > 24px or spread > 0px; keep shadows tight and directional.
• Don't use system fonts or fallback stacks; always specify Inter via @font-face or Google Fonts link.
• Don't add decorative elements, icons, or illustrations to empty states; let whitespace speak.
• Don't exceed 1680px container width; content should remain scannable and focused even on ultra-wide displays.