Wall of Portfolios

Overview

Wall of Portfolios is a curated discovery platform for dark-themed designer portfolios, embodying a philosophy of "Content-First Minimalism" — where the featured work takes center stage against a clean, neutral canvas. The brand serves design professionals and hiring managers seeking inspiration and talent, evoking a sense of refined curation and professional sophistication. The aesthetic is deliberately restrained: a white background (#ffffff) with deep charcoal accents (#0d0c20) and strategic use of a cool blue secondary (#3898ec) for interactive elements, creating a gallery-like environment where portfolio thumbnails become the visual focal point.

The voice is direct, professional, and encouraging — never flowery or overly casual. Vocabulary emphasizes clarity and discovery: "explore," "showcase," "curated," "sleek," "modern." The tone assumes the user is a serious creative professional. Example sentence in brand voice: "Discover 500+ dark-themed portfolios from product designers, illustrators, and creative directors worldwide."

Colors

The color system is built on a light-dominant foundation with deep, intentional accents. Primary (#0d0c20) is the brand's signature dark charcoal, used for typography, navigation, and call-to-action buttons — it commands attention without aggression. Secondary (#3898ec) is a cool, professional blue reserved for interactive states, links, and accent highlights; it appears on the "Log in/Signup" button and hover states, signaling interactivity. The surface stack is anchored in white (#ffffff) for maximum readability and gallery-like neutrality, with subtle grays (#e7e7e9, #f7f7f7) for container separation and depth. On-surface text (#333333) provides high contrast (WCAG AAA) for accessibility. Tertiary (#6c6b77) is a muted taupe used for secondary labels and metadata. Error states use a stan

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modern professionalism and technical precision. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) frames major sections like "Dark Themed Portfolios"; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading of portfolio descriptions and metadata. The hierarchy is deliberately shallow — most content lives in body-md and label-md to avoid visual clutter. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (12px) over light backgrounds to enhance legibility without introducing visual weight. Letter-spacing ranges from -0.04em (display, for tightness) to 0.02em (label-sm, for clarity in small sizes), calibrated to ma

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered with symmetric padding. The page rhythm is governed by the lg spacing token (40px) for section separation, creating breathing room between the hero, portfolio grid, and footer. The portfolio grid itself uses a 3-column layout on desktop (each card 280–320px wide with 24px gutters), collapsing to 2 columns at 991px and 1 column below 767px. Container max-widths scale with breakpoints: 940px at tablet, 1279px at desktop, with additional padding (180–300px left/right) applied at ultra-wide viewports (1565px+) to prevent content from stretching. White-space is generous — cards have 24px internal padding, section margins are 40px, and the gutter between grid items is 24px. This spacing philosophy prevents visual congest

Elevation & Depth

Depth is conveyed through subtle shadows and hover interactions rather than layered backgrounds. Base cards use elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal separation from the surface. On hover, cards elevate to elevation-md (0 4px 12px rgba(0, 0, 0, 0.08)) with a simultaneous 2px upward transform (translateY(-2px)) and 250ms cubic-bezier(0.4, 0, 0.2, 1) transition, creating a tactile lift effect. Portfolio cards — the primary content containers — use elevation-md by default and elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)) on hover, emphasizing their importance. Input fields rec

Shapes

The shape philosophy is "Soft-Technical" — rounded corners are used strategically to soften the geometric precision of the grid while maintaining professional clarity. Buttons use full radius (9999px / border-radius: 40px) for a friendly, approachable feel; cards use lg radius (1rem / 16px) for subtle softness without playfulness; inputs use DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. Portfolio card thumbnails use lg radius (16px) to frame images elegantly without distraction. The rationale: full-radius buttons signal primary actions ("Submit Portfolio," "Log in"), lg-r

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the full dark charcoal (#0d0c20) background with white text, 40px height, 10px vertical / 20px horizontal padding, and full border-radius (40px). On hover, the background shifts to primary-container (#333333) with a 200ms ease transition. Secondary buttons (button-secondary) are transparent with a 1px outline in outline color (#9e9ea6), maintaining the same dimensions and radius. The "Submit Portfolio" CTA uses primary styling; "Log in/Signup" uses secondary styling to establish visual hierarchy.

Containers & Surfaces Portfolio cards (portfolio-card) are the content backbone: white background, lg radius (16px), no padding on the outer container (images bleed to edges), and elevation-m

Do's and Don'ts

**Do**

• Do use primary (#0d0c20) for all text, navigation, and primary CTAs — it's the brand's signature dark anchor.
• Do apply lg spacing (40px) between major sections to create visual breathing room and prevent cognitive overload.
• Do use full border-radius (40px) exclusively on buttons to signal interactivity; never apply full radius to cards or inputs.
• Do maintain 24px gutters between portfolio grid items and 24px internal padding on cards for consistent rhythm.
• Do apply elevation-md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to portfolio cards and elevation-sm to secondary containers.
• Do use Inter 400 weight for body text and 600 weight for labels and headings — avoid mixing weights within a single line.

**Don't**

• Don't use secondary blue (#3898ec) for body text or large UI surfaces — reserve it for interactive elements and accent highlights only.
• Don't apply shadows exceeding 16px blur radius; the aesthetic is flat and modern, not layered or skeuomorphic.
• Don't mix border-radius values within a single component type (e.g., don't use 12px and 16px on different buttons).
• Don't exceed 1280px container max-width; ultra-wide layouts dilute the gallery-like focus and readability.
• Don't use tertiary (#6c6b77) for primary text or interactive elements — it's reserved for secondary metadata and disabled states.
• Don't apply letter-spacing greater than 0.02em on body text; it reduces readability and feels artificial.