Peerlist

Overview

Peerlist is a professional network designed for builders, makers, and technologists to showcase their proof of work and connect with industry peers. The design system embodies a "Clean Professional Minimalism" aesthetic—a modern, accessible approach that prioritizes clarity and direct action over ornamentation. The visual language combines a crisp white canvas (surface: #ffffff) with vibrant accent colors (primary green #00aa45, secondary blue #1a73e8) to guide user attention to key interactions. The brand personality is confident yet approachable: it speaks to ambitious professionals who value substance over style, proof over promises. The tone is direct, encouraging, and slightly playful—celebrating the accomplishments of builders without pretension. Example sentence in brand voice: "Claim your username, showcase your best work, and let the right opportunities find you."

Colors

The Peerlist color system uses a light-first, accent-driven palette optimized for web accessibility and professional credibility. Primary (#00aa45) is the signature action color, applied to all primary CTAs (buttons, links, focus states) and brand-critical UI elements; it conveys growth, opportunity, and forward momentum. Secondary (#1a73e8) supports secondary actions, status indicators, and informational highlights, providing visual hierarchy without competing with primary. Tertiary (#eb5757) is reserved for error states, warnings, and destructive actions, ensuring users immediately recognize critical feedback. The surface stack is anchored in white (#ffffff) for maximum contrast and readability, with a shallow container hierarchy (surface-container-low: #f0f0f0, surface-container: #eeeee

Typography

The typography system pairs serif and sans-serif typefaces to balance professionalism with approachability. Display and headline levels use Instrument (serif, 400 weight) at sizes 56px down to 32px with tight negative letter-spacing (-0.02em to -0.01em) to create visual impact and brand distinction on hero sections and major headings. Body text and labels use Geist (sans-serif, 400–600 weight) at 16px–18px for readability, with 24px–28px line-height to ensure comfortable scanning. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and small UI labels to ensure legibility at reduced scale. The weight hierarchy (400 for body, 600 for labels and emphasis, 400 for headlines) creates clear visual distinction without excessive font-weight variation. Instruction: apply t

Layout

Peerlist uses a 12-column fluid grid with a fixed max-width of 1280px, centered on the viewport with symmetric gutters of 24px. The spacing scale follows a 8px base unit: xs (4px) for micro-interactions, sm (12px) for compact spacing, md (24px) for standard section padding and card margins, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section occupies the full viewport height with centered content (text, input field, social proof avatars) using lg spacing for vertical rhythm. Cards and containers use md (24px) padding internally and are separated by lg (40px) vertical spacing. The container-max-width of 1280px ensures content remains scannable on ultra-wide displays while maintaining focus. White-space philosophy: embrace negative space to

Elevation & Depth

Elevation in Peerlist is achieved through subtle shadows and border treatments rather than layered depth. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and subtle depth, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hover states and elevated containers, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. All cards carry a 1px solid border in outline-variant (#cccccc) to define edges without relying on shadow alone. Interactive elements (buttons, inputs) use no shadow at rest; on hover, apply md shadow with a 200ms ease-in-out transitio

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are used strategically to soften the professional aesthetic without sacrificing clarity or usability. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel modern and inviting; secondary buttons and chips use lg (1rem / 16px) for a slightly more structured appearance. Cards and containers use lg (1rem) to balance approachability with professional restraint. Input fields use lg (1rem) to match card styling and create visual cohesion. Small UI elements (badges, labels) use full (9999px) to emphasize th

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses full border-radius (9999px), background {colors.primary} (#00aa45), text color {colors.on-primary} (white), padding 8px 24px, height 40px, and label-md typography (14px, 600 weight). On hover, transition background-color 200ms ease-in-out to #1e874b (darker green). On active/pressed, apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and reduce opacity to 0.9. Button-secondary uses transparent background with 1px border in {colors.outline} (#999999), same padding and height, and on-surface text color; hover state applies surface-container-low background (#f0f0f0) with 200ms transition. Button-ghost is used for tertiary actions (e.g., "Cancel", "Skip") with transparent background, on-surface text, and no borde

Do's and Don'ts

**Do**

• Do use {colors.primary} (#00aa45) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and elevated elements to signal interactivity; transition over 200ms ease-in-out.
• Do maintain minimum 44px touch target height on all interactive elements (buttons, inputs, chips) for mobile accessibility.
• Do use Instrument serif for display and headline levels (56px–32px) to create visual hierarchy and brand distinction; reserve Geist sans-serif for body and labels.
• Do apply lg border-radius (1rem) to cards, inputs, and secondary buttons; use full (9999px) only for primary buttons and badges.
• Do enforce WCAG AAA contrast: on-surface (#1a1a1a) on white background meets 7:1 ratio; primary (#00aa45) on white meets 4.5:1 ratio for text.

**Don't**

• Don't use border-radius: 0 or 4px—these are too sharp for Peerlist's modern aesthetic; default to lg (1rem) or full (9999px).
• Don't apply shadows to buttons at rest; reserve shadows for hover and elevated states to avoid visual noise.
• Don't use secondary (#1a73e8) or tertiary (#eb5757) as primary action colors; they are supporting accents only.
• Don't exceed 1280px container max-width on desktop; content wider than this reduces scanability and violates the layout system.
• Don't use system fonts (system-ui, -apple-system) for display or headline text; always specify Instrument serif for brand consistency.
• Don't apply text-shadow or text-stroke to body text; reserve these techniques for small labels (12px–14px) over colored backgrounds only.