FOLLOW.ART

Overview

FOLLOW.ART is a digital infrastructure platform designed for curators and artists to centralize their professional identity, contacts, and direct support mechanisms into a single, shareable card. The brand embodies a "Bold Minimalism" aesthetic—combining vibrant, energetic color (the signature orange #f4793a) with clean typography and purposeful white space. The visual language prioritizes clarity and directness, reflecting the platform's mission to eliminate algorithmic gatekeeping and empower creative professionals across 100+ countries. The UI evokes confidence, accessibility, and creative agency: a professional tool that doesn't feel corporate or sterile.

The brand voice is direct, encouraging, and human-centered. Vocabulary emphasizes agency ("share," "be noticed," "be supported") over passive consumption. Tone is conversational yet authoritative—speaking to professionals who value their autonomy. Example sentence in brand voice: "One Card. Share it. Be noticed. Be supported."

Colors

The color system centers on a bold, high-saturation primary orange (#f4793a) that commands attention and signals interactivity. This orange appears on all primary CTAs (the "Join" button), header backgrounds, and accent elements throughout the interface. It is the brand's signature color—warm, energetic, and distinctly non-neutral. Supporting the primary are three secondary accent colors: a muted sage green (#8e9487) for secondary actions and calm emphasis, a soft blue-gray (#8498ac) for tertiary interactions, and a vivid error red (#ea1b4f) for alerts and destructive actions. The surface stack is anchored in pure white (#ffffff) for maximum clarity and contrast, with a carefully calibrated gray palette (from #fafafa to #d0d0d0) for container hierarchy. On-surface text is pure black (#0000

Typography

The typography system pairs two distinctive typefaces: Hardbop for display and headline scales (delivering bold, geometric personality at large sizes), and HeadingNow for body and label scales (providing clarity and approachability at smaller sizes). The display scale (240px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and full-screen titles, creating an immediate visual impact. Headline-lg (56px, 700 weight) and headline-md (40px, 700 weight) are used for section titles and major content blocks, maintaining visual hierarchy through weight and size rather than color. Body scales (18px and 16px, 400 weight) are set in HeadingNow with generous line-height (28px and 24px respectively) to ensure readability on both desktop and mobile. Label scales (14px and 12px, 600 we

Layout

The layout follows a fluid, full-viewport design philosophy with a 12-column grid system and a maximum container width of 1280px. Sections are designed to occupy full-screen heights (100svh) on desktop, creating immersive, scroll-driven storytelling. White space is used generously—the gutter spacing (24px) is applied consistently between columns and sections, while lg spacing (40px) separates major content blocks. Mobile layouts shift to a single-column, full-width approach with reduced gutters (12px) and tighter spacing to accommodate smaller screens. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact component padding, md (24px) for standard container padding and section gaps, lg (40px) for major section separation, and xl (64px) for he

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered container backgrounds rather than dramatic depth effects. Level 1 (Base): Pure white background (#ffffff) with no shadow, representing the foundational surface. Level 2 (Standard Cards): elevation-sm (0 1px 2px rgba(0,0,0,0.06)) applied to cards and contained components, creating a barely-perceptible lift. Level 3 (Elevated/Hover States): elevation-md (0 4px 12px rgba(0,0,0,0.08)) applied on card hover and modal overlays, signaling interactive elevation. Level 4 (Modals/Overlays): elevation-lg (0 16px 40px rgba(0,0,0,0.12)) for full-

Shapes

The shape philosophy is "Geometric Clarity"—favoring subtle, consistent rounding that feels modern without sacrificing legibility or visual weight. Buttons and primary interactive elements use rounded.DEFAULT (0.5rem / 8px), creating a slightly softened rectangle that feels approachable yet professional. Cards and containers use rounded.md (0.75rem / 12px) for a marginally more pronounced curve, distinguishing them from buttons while maintaining visual cohesion. Modals and elevated surfaces use rounded.lg (1rem / 16px) for a softer, more prominent appearance. Badges and pill-shaped elements us

Components

Action Elements Buttons are the primary interactive component. The button-primary component uses the signature orange (#f4793a) background with white text, rounded.DEFAULT (8px), and 12px 24px padding for a 48px total height. On hover, the background shifts to #e85c1f (a darker orange, -15% lightness) with a transition: background-color 0.2s ease, providing immediate visual feedback. On active/pressed state, the background darkens further to #d94a0a. The button-secondary variant uses a transparent background with a 1px solid border in primary orange and orange text, allowing for secondary CTAs that don't compete visually. Button-secondary-hover shifts to the primary-container background (#ffe8d9) with on-primary-container text (#5c2e1a), creating a warm, inviting hover state.

Cont

Do's and Don'ts

**Do**

• Do use the primary orange (#f4793a) exclusively on CTAs, active states, and brand moments—never on body text or neutral containers.
• Do apply generous white space (lg spacing: 40px) between major sections to create visual breathing room and guide user focus.
• Do use Hardbop for display and headline scales to establish bold, geometric personality; reserve HeadingNow for body and labels for clarity.
• Do apply elevation-md (0 4px 12px rgba(0,0,0,0.08)) on hover states to signal interactivity without overwhelming the interface.
• Do maintain 48px minimum height for all interactive buttons to ensure touch-target accessibility on mobile devices.

**Don't**

• Don't use the primary orange on non-interactive elements or as a background for large text areas—it will reduce legibility and dilute brand impact.
• Don't apply border-radius greater than 16px (rounded.lg) on interactive components; it reduces scanability and feels overly soft for a professional platform.
• Don't mix Hardbop and HeadingNow at the same scale; maintain clear typographic hierarchy by using Hardbop for display/headlines and HeadingNow for body/labels.
• Don't use shadows deeper than elevation-lg (0 16px 40px rgba(0,0,0,0.12)) on standard components—reserve the deepest shadows for modals and full-screen overlays only.
• Don't reduce padding below sm (12px) on interactive components or below md (24px) on containers; insufficient padding reduces visual clarity and creates cramped, unprofessional layouts.