OptOut

Overview

OptOut is a premium, invitation-gated community platform for independent SEO and marketing professionals who reject mass-market noise and commoditized advice. The design aesthetic is **Refined Minimalism with Warmth**—a deliberate rejection of sterile tech interfaces in favor of a sophisticated, human-centered approach. The visual language combines deep charcoal backgrounds (#0B0B0B) with a vibrant burnt-orange accent (#FF5A00) that evokes energy, expertise, and approachability. The brand personality is direct, opinionated, and unapologetically premium: it speaks to professionals who value their time and demand real answers over generic templates.

The tone is conversational yet authoritative—never breathless or hyperbolic. OptOut uses short, declarative sentences and avoids marketing clichés. Example voice: "One useful answer can pay for the month. Not 10,000 strangers collecting notifications." The UI reinforces this through generous whitespace, deliberate typography hierarchy, and a restrained color palette that lets content breathe. Every interaction feels intentional, never cluttered.

Colors

OptOut's color system is built on **contrast and intentionality**. The primary surface is a near-black (#0B0B0B) that provides a sophisticated, focused canvas—this is not a light-mode platform. The primary accent is a warm burnt-orange (#FF5A00), used exclusively for call-to-action buttons, interactive states, and brand moments. This color appears infrequently but commands attention; it's the color users click on. Secondary accents include a lighter amber (#FF9B3D) for hover states and a warm cream (#FFD18A) for supporting highlights and badges. The text hierarchy is anchored in off-white (#F5F3EF) for primary content and a muted taupe (#A7A39D) for secondary information. Borders and dividers use a subtle transparent white (rgba(255,255,255,0.08)) to maintain visual separation without hars

Typography

OptOut uses **Satoshi** as its primary typeface—a geometric sans-serif that balances warmth with precision, reflecting the brand's blend of approachability and expertise. The type system follows a strict hierarchy: Display (92px, 500 weight, -0.045em tracking) for hero headlines; Headline-lg (64px, 500 weight, -0.04em) for section breaks; Headline-md (42px, 500 weight, -0.03em) for subsections; Body-lg (18px, 500 weight, -0.012em) for prominent copy; Body-md (17px, 400 weight, -0.012em) for standard paragraph text; and Label-md (14.5px, 600 weight, -0.01em) for buttons and interactive elements. All headlines use negative letter-spacing to create visual density and sophistication—this tightness signals premium positioning. Body text uses a 1.5–1.6 line-height (26–27px) to ensure readability

Layout

OptOut employs a **fluid, content-first grid** with a maximum container width of 1240px and a 28px gutter. The page rhythm alternates between full-width hero sections (44/56 column split on desktop, collapsing to single column below 880px) and bento-style card grids that create visual rhythm through asymmetric layouts (1.1fr / 0.9fr ratios). Spacing follows a semantic scale: 40px (lg) separates major sections, 24px (md) divides subsections, and 12px (sm) creates breathing room within components. The hero uses 44px top padding and 36px horizontal padding to frame the headline; cards use 36px internal padding to create generous whitespace around content. On mobile (below 720px), the container width reduces to calc(100% - 28px) and all multi-column grids collapse to single-column layouts. The

Elevation & Depth

OptOut rejects traditional drop shadows in favor of a **layered, inset-border approach** that maintains the flat, premium aesthetic. Depth is conveyed through three distinct levels: Level 1 (Base Surface) uses no shadow, only the background color (#0B0B0B). Level 2 (Cards & Containers) applies an inset border of 1px solid rgba(255,255,255,0.08) paired with an inset shadow: inset 0 1px 0 rgba(255,255,255,0.08), creating a subtle embossed effect that suggests depth without visual weight. Level 3 (Modals & Overlays) uses a stronger inset shadow (inset 0 1px 0 rgba(255,255,255,0.12)) and a 1px bor

Shapes

OptOut's shape language is **Geometric Precision with Warmth**—a deliberate balance between technical sharpness and human approachability. Buttons use a full-radius border-radius: 9999px (pill shape) to signal friendliness and accessibility, contradicting the premium dark aesthetic and creating visual tension that feels intentional. Cards and containers use 28px border-radius (rounded.xl) to soften corners without appearing playful—this radius is large enough to feel modern but not so large as to seem casual. Input fields use 4px border-radius (rounded.DEFAULT) to maintain visual hierarchy and

Components

**Action Elements.** Primary buttons use #FF5A00 background with #111111 text, 12px vertical padding, 20px horizontal padding, and a 9999px border-radius. On hover, the background shifts to #E64A00 (a darker burnt-orange) with a 200ms ease-out transition. Secondary buttons mirror this structure but use #F5F3EF background with #111111 text, transitioning to #FFFFFF on hover. Both button types use label-md typography (14.5px, 600 weight, -0.01em tracking) and display: inline-flex with gap: 10px to accommodate optional icons. The primary CTA includes a small circular icon container (width: 26px, height: 26px, border-radius: 50%, background: #111111, color: #FF5A00) to the right of the text.

**Containers & Surfaces.** Cards use #151515 background with a 1px solid rgba(255,255,255,0.08) border

Do's and Don'ts

**Do**

• Do use the primary orange (#FF5A00) exclusively for interactive elements and CTAs—never for decorative backgrounds or secondary content.
• Do maintain the dark background (#0B0B0B) as the default surface; it's core to the premium positioning and reduces cognitive load.
• Do apply negative letter-spacing (-0.03em to -0.045em) on all headlines to create visual density and sophistication.
• Do use the inset border + inset shadow technique (inset 0 1px 0 rgba(255,255,255,0.08)) on cards instead of drop shadows to maintain flatness.
• Do collapse multi-column grids to single-column layouts below 880px; the responsive breakpoints are 1024px, 880px, and 720px.
• Do use Satoshi font-family exclusively; avoid system fonts or fallbacks that break the premium aesthetic.

**Don't**

• Don't use drop shadows or blur effects; OptOut's aesthetic rejects glassmorphism and depth-based hierarchy in favor of inset borders.
• Don't apply the primary orange to backgrounds, badges, or non-interactive elements—reserve it for buttons and focus states only.
• Don't use light backgrounds or light-mode variants; the dark aesthetic is non-negotiable and central to brand identity.
• Don't exceed 28px border-radius on cards or containers; anything larger reads as playful rather than premium.
• Don't use more than two accent colors in a single view; OptOut's restraint is its strength.
• Don't apply positive letter-spacing on headlines; the negative tracking is intentional and communicates sophistication.