Shelf

Overview

Shelf is a minimalist personal knowledge management platform that reimagines digital curation through the lens of Scandinavian design—clean, purposeful, and human-centered. The brand embodies 'Warm Minimalism,' where generous whitespace (surface: #f2f1ed, surface-bright: #fcfcfb) meets a vibrant accent green (#9ee86f) that signals action and discovery. The interface feels like a carefully curated physical library translated to the digital realm: every element serves a function, nothing is decorative, and the typography hierarchy guides users naturally from exploration to insight.

The voice is conversational yet precise, avoiding jargon while respecting user intelligence. Shelf speaks in active, present-tense language that emphasizes agency: 'Save it where you found it,' 'Ask it anything,' 'Everything you saved finally findable.' The tone is encouraging without being breathless—calm, confident, and grounded in the reality that managing digital inspiration should feel effortless, not overwhelming.

Colors

The color system is built on a neutral, warm foundation with a single, high-contrast accent. The primary surface palette ranges from #fcfcfb (surface-bright, used for elevated cards and inputs) through #f2f1ed (surface, the page background) to #e9e8e3 (surface-dim, for subtle depth). Text is a near-black #1a1a18 (on-surface) for maximum legibility, with #76766e (on-surface-variant) reserved for secondary information and disabled states. The accent green #9ee86f is the signature brand color, deployed exclusively on primary CTAs ('Join waitlist'), focus states, and key interactive affordances. It must never be used for passive elements or backgrounds—its scarcity is its power. Supporting colors include a professional blue (#2d64bc, tertiary) for source attribution (LinkedIn, etc.), and a mut

Typography

The type system pairs General Sans (display, headlines) with Switzer (body, labels) to create a sophisticated yet approachable hierarchy. General Sans at 84px, 600 weight, -0.03em tracking (display level) anchors the hero with authority and personality; its geometric forms feel modern without coldness. Switzer, a humanist sans-serif, handles all body copy and UI labels, maintaining warmth and readability at small sizes. The display-to-body transition is deliberate: headlines use -0.02em to -0.03em negative tracking to tighten and emphasize, while body copy (16px, 400 weight, 24px line-height) sits at neutral tracking for comfort. Labels and microcopy use Switzer at 13–14px with +0.01em tracking to add subtle emphasis. On small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba

Layout

The layout follows a 12-column grid with a max-width of 1440px, maintaining a fluid-to-fixed breakpoint strategy. The hero section uses a centered, single-column layout (max-width: 460px for the email input, max-width: 1024px for the headline) to focus attention, with generous padding (pt-16 sm:pt-24 = 64px–96px) creating breathing room. Section separation uses lg spacing (40px) as the baseline, with xl spacing (64px) reserved for major content transitions. The gutter is consistently 24px (md spacing) on all sides, scaling to 12px (sm spacing) on mobile. Container padding follows a 6px–24px–40px progression: small components use 6px internal padding, cards use 24px, and section containers use 40px. The design favors asymmetrical whitespace—more air above headlines than below—to guide the e

Elevation & Depth

Depth is achieved through subtle shadows and surface layering rather than dramatic effects. The base level (surface, #f2f1ed) is the page background with no shadow. Level 1 (cards, inputs) uses surface-bright (#fcfcfb) with a 1px border (#e1e0da) and a soft shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 2 (elevated cards, modals) uses surface-container-low (#f8f7f3) with the same border and a deeper shadow: 0 8px 24px rgba(0, 0, 0, 0.12). Hover states transition to surface-container-high (#ede6dd) with the Level 2 shadow over 200ms (cubic-bezier(0.4, 0, 0.2, 1)). Focus states on interactive elem

Shapes

The shape language is 'Soft-Technical Minimalism': rounded corners are used sparingly and purposefully, never decoratively. Buttons and primary CTAs use 1rem (16px) border-radius, creating a gentle, approachable feel without appearing childish. Input fields and secondary containers use 0.75rem (12px) for a slightly sharper, more utilitarian appearance. Cards and elevated surfaces use 1.5rem (24px) for a softer, more inviting presence. The hero section's email input form uses 1rem on the input and 0.7rem on the submit button—a deliberate asymmetry that creates visual rhythm. Badges and pills us

Components

Action Elements Buttons use a two-tier system: primary (background: #9ee86f, text: #1a1a18, 12px 24px padding, 48px height, 1rem radius) for main CTAs like 'Join waitlist,' and secondary (transparent background, 1px #e1e0da border, text: #1a1a18) for alternative actions. Primary buttons transition to #8dd85a on hover (150ms ease-in-out) with no shadow change—the color shift alone signals interactivity. Disabled states use surface-container-high (#ede6dd) with 60% opacity and on-surface-variant text (#76766e). All buttons use Switzer 500 weight, 14px, 0.01em tracking.

Containers & Surfaces Cards are the primary container component: surface-bright (#fcfcfb) background, 1px border (#e1e0da), 24px padding, 1.5rem radius, and 0 3px 8px rgba(0, 0, 0, 0.15) shadow. On hover, the backgrou

Do's and Don'ts

**Do**

• Do use the primary green (#9ee86f) exclusively on primary CTAs, focus rings, and active states—never on passive backgrounds or secondary elements.
• Do maintain at least 40px (lg spacing) between major sections and 24px (md spacing) between subsections to preserve the airy, minimalist feel.
• Do pair General Sans headlines with Switzer body copy; never reverse or mix within a single text block.
• Do apply 1px borders in #e1e0da to all cards and inputs; they define edges without visual noise and are essential to the system.
• Do use the full surface stack (surface-bright, surface-container-low, surface-container-high) to create subtle depth; avoid jumping more than one level in a single interaction.

**Don't**

• Don't use the primary green on backgrounds, disabled states, or secondary actions—it must remain a high-contrast accent reserved for primary interactions.
• Don't apply shadows darker than 0 8px 24px rgba(0, 0, 0, 0.12); the palette is consistently light and airy, never dramatic.
• Don't use border-radius smaller than 0.25rem or larger than 1.5rem outside of badges (full radius); the shape language is deliberately constrained.
• Don't mix typefaces within a single text block; General Sans is for display/headlines only, Switzer for everything else.
• Don't reduce padding below 12px (sm spacing) on cards or inputs; whitespace is a core part of the minimalist aesthetic and must be preserved.