Portrait

Overview

Portrait is a decentralized personal canvas platform that empowers users to own and control their digital identity in one unified space. Serving creators, professionals, and everyday users who want to consolidate their link-in-bio, portfolio, wallet, and social presence, Portrait embodies a design philosophy of "Accessible Optimism"—bright, gradient-forward, and inviting without sacrificing clarity or functionality. The aesthetic combines soft, light surfaces (rgb(247, 247, 247) background) with vibrant, multi-color accent gradients (green #26b562, orange #ff8700, magenta #e600c2) that evoke energy and possibility. The UI feels contemporary yet approachable, avoiding corporate coldness through generous whitespace, rounded forms, and a carefully curated color palette that celebrates individuality.

The brand voice is conversational, empowering, and human-centered. Portrait speaks to users as peers, not subjects—phrases like "Your forever space for everything you are" and "More than a link—a decentralized canvas" emphasize ownership and creative freedom. The vocabulary is warm ("forever," "canvas," "share") and action-oriented ("Turn your audience into revenue"). Tone is optimistic but grounded; never breathless or hyperbolic. Example sentence in Portrait's voice: "Your wallet, your stories, your rules—all in one place you actually own."

Colors

Portrait's color system is built on a light, neutral foundation with three vibrant accent roles that work together to create visual energy and guide user attention. The surface stack anchors the design: a soft off-white background (rgb(247, 247, 247), #f7f7f7) provides breathing room, while container layers (surface-container-lowest #f5fafa, surface-container-high #e8e8e8) create subtle depth through 8–12px shifts in luminance. Text is rendered in a warm dark gray (rgb(53, 53, 53), #353535 on-surface) that reduces eye strain while maintaining strong contrast (18:1 WCAG AAA).

The primary accent is a vibrant, nature-inspired green (#26b562) used exclusively for call-to-action buttons, active states, and key interactive elements. This green is never used as a background fill; instead, it app

Typography

Portrait's type system pairs Basier Circle (a geometric, friendly display typeface) for headlines with Switzer (a clean, modern sans-serif) for body and UI text. This pairing creates visual hierarchy through personality rather than weight alone: Basier Circle's rounded letterforms (used at 76px, 500 weight for display; 48px, 500 weight for headline-lg) convey approachability and modernity, while Switzer's neutral geometry (16px, 400 weight for body-md; 14px, 600 weight for label-md) ensures legibility and professionalism. The display level (76px, lineHeight 84px, letterSpacing -0.02em) is reserved for hero headlines and major page titles; headline-lg (48px, lineHeight 56px) anchors section breaks; body-md (16px, lineHeight 24px) is the default for paragraph text and UI labels. All headline

Layout

Portrait uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The page rhythm is governed by a semantic spacing scale: unit (8px) as the base, with sm (12px), md (24px), lg (40px), and xl (64px) for section separation and container padding. The hero section uses lg spacing (40px) for vertical rhythm between the headline, subheading, and CTA group, creating a breathing room that emphasizes the primary message. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on mobile. The gutter between grid columns is 32px, allowing cards and components to sit comfortably without crowding. White-space is treated as a first-class design element: the background (rgb(247, 247, 247)) is never fully occupied, and negative space around interactive elemen

Elevation & Depth

Portrait uses a subtle shadow system to convey depth without introducing visual heaviness. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for small UI elements like badges and inline components; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and interactive surfaces; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and tooltips. Cards use md elevation by default and transition to lg on hover (120ms cubic-bezier(0.45, 0, 0.55, 1)), creating a subtle lift effect. Input fields and buttons do not use shadows; instead, they rely on bo

Shapes

Portrait's shape philosophy is "Soft-Technical"—combining rounded forms that feel human and approachable with precise geometric proportions that signal trustworthiness and professionalism. The rounded scale is: sm (0.25rem / 4px) for small UI elements like inline badges; DEFAULT (0.5rem / 8px) for input fields and minor components; md (0.75rem / 12px) for cards and larger containers; lg (1rem / 16px) for modals and prominent surfaces; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for pill-shaped buttons and circular avatars. Buttons use full (9999px) border-radi

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use a 2px solid border in {colors.primary} (#26b562) with a transparent background, 12px vertical and 32px horizontal padding, and full border-radius (9999px). On hover, the background fills with {colors.primary-fixed-dim} (#a8dfc0) over 120ms, creating a smooth, predictable transition. Active/pressed state uses {colors.primary-container} (#c8f0d4) background with {colors.on-primary-container} text. Secondary buttons mirror the primary structure but with an inverted color scheme: transparent background, {colors.primary} text, {colors.primary} border. On hover, the background fills with {colors.primary-container}. Gradient buttons (used for high-emphasis CTAs like "Sign up") apply a linear-gradient(135deg, #ff8