Dark

Overview

Dark is a curated design gallery celebrating the aesthetic of high-contrast, minimalist dark-themed web experiences. The brand serves designers seeking authentic inspiration from sophisticated digital products that prioritize clarity through darkness—where deep blacks (rgb(0, 0, 0)) and pure whites (rgb(255, 255, 255)) create maximum legibility, and a single vibrant accent (rgb(255, 61, 0)) punctuates the interface with urgency and intention. The visual philosophy is "Contrast-Driven Minimalism": every element earns its presence through function, not decoration. The emotional response is one of focused clarity and professional confidence—the interface feels intentional, curated, and uncompromising.

The brand voice is direct, opinionated, and conversational. Vocabulary leans into designer-to-designer language: "handpicked," "from the dark side," "curated with love." The tone avoids corporate polish in favor of authentic personality. Example sentence: "You didn't become a designer to chase invoices." This reflects the brand's understanding of its audience: creative professionals who value substance over hype, and who recognize that great design often hides in plain sight.

Colors

The Dark color system is built on a foundation of absolute contrast: pure black (#000000) as the dominant surface, pure white (#ffffff) as the primary text and secondary accent, and a vivid deep orange (#ff3d00, rgb(255, 61, 0)) as the sole brand accent reserved for calls-to-action and critical interactive moments. This three-color palette creates an almost monochromatic canvas punctuated by a single, unmissable signal.

Primary (#ff3d00) is used exclusively for primary CTAs ("Create Account," "Join the waitlist"), focus states, and brand-critical interactions. It commands attention through scarcity and saturation. Secondary (#ffffff) serves as both text on dark backgrounds and as a neutral button fill for secondary actions, creating a clean, professional hierarchy. Tertiary (#90c5ff) is r

Typography

The typography system pairs two custom typefaces—Aeonik Pro for headlines and display text, and Aeonik Fono for body and label text—to create a distinctive, modern voice. Aeonik Pro's bold weights (700–900) at large sizes (40px–60px) command attention and establish hierarchy through weight and scale rather than color. Aeonik Fono's regular weight (400) at body sizes (16px–18px) ensures readability over dark backgrounds with a line-height of 24–28px, providing generous vertical breathing room. The system uses aggressive letter-spacing reductions (-0.04em on display, -0.02em on headlines) to tighten large text and create visual density, while body text maintains neutral spacing (0em) for legibility. On small labels over busy backgrounds or dark surfaces, apply text-shadow: 0 2px 4px rgba(0,

Layout

The layout system uses a 12-column grid with a fixed max-width of 1600px, centered on the viewport. The design favors generous white space (lg spacing: 40px) for section separation, creating a rhythm that feels deliberate and uncluttered. The gutter width is 24px, applied consistently between grid columns and around container edges. Container padding uses the md spacing token (24px) for standard cards and content blocks, with lg spacing (40px) reserved for major section breaks. The grid is fluid on mobile (100vw with 12px horizontal padding) and snaps to fixed columns at breakpoints. Vertical rhythm is maintained through a baseline of 8px (unit spacing), with typography line-heights set in multiples of this unit (16px, 20px, 24px, 28px, etc.). This creates a cohesive visual cadence where e

Elevation & Depth

Depth in Dark is achieved through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the pure black surface (#000000) with no shadow. Level 2 (Standard Card): background-color: #171717 with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) and a 1px border at rgba(102, 102, 102, 0.4). Level 3 (Modal/Elevated): background-color: #242424 with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) and a 1px border at rgba(102, 102, 102, 0.6). Focus states on interactive elements use a 2px outline at rgba(255, 61, 0, 0.3) to create a glowing effect without har

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are used sparingly and purposefully, never decoratively. Buttons use lg radius (1rem / 16px) to create a modern, approachable feel while maintaining geometric clarity. Cards and containers use md radius (0.75rem / 12px) for a subtle softness that doesn't compromise the minimalist aesthetic. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, form-like appearance. Modals and overlays use xl radius (1.5rem / 24px) to create a distinct, elevated presence. The full radius (9999px) is reserved for badges and pill-sha

Components

Action Elements Buttons are the primary interactive element and use the primary accent (#ff3d00) to command attention. The primary button has padding: 10px 20px, height: 44px, border-radius: 16px, font-size: 14px, font-weight: 600, and background-color: rgb(255, 61, 0). On hover, the background shifts to #e63900 (primary-fixed-dim) with a 200ms ease transition. The secondary button uses white (#ffffff) background with black text, padding: 0px 10px, height: 40px, and font-size: 12.8px, font-weight: 500. On hover, it shifts to #e0e0e0 (secondary-fixed-dim). Both buttons use box-shadow: none in the default state, but on focus, apply box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.3) to create a glowing outline.

Containers & Surfaces Cards are the primary container for content and use backgr

Do's and Don'ts

**Do**

• Do use the primary accent (#ff3d00) sparingly—reserve it for the single most important CTA per page to maintain visual hierarchy and urgency.
• Do maintain high contrast between text and background; ensure all body text on dark surfaces meets WCAG AA standards (minimum 4.5:1 ratio).
• Do apply consistent 8px baseline grid alignment to all elements—padding, margins, and heights should be multiples of 8px to reinforce the minimalist rhythm.
• Do use the full rounded radius (9999px) only for badges and pill-shaped elements; avoid over-rounding buttons or cards, which dilutes the architectural precision.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to create a responsive, polished feel without feeling sluggish.

**Don't**

• Don't introduce new accent colors beyond the primary orange (#ff3d00), secondary white (#ffffff), and tertiary blue (#90c5ff)—the power of the system lies in its restraint.
• Don't use shadows larger than 0 16px 40px rgba(0, 0, 0, 0.6) or blur radii exceeding 40px; excessive shadows muddy the high-contrast aesthetic.
• Don't set line-height below 1.4 (24px for 16px body text) on dark backgrounds; generous vertical spacing is essential for readability and visual breathing room.
• Don't apply rounded corners to structural elements like input fields beyond md radius (12px); preserve angular precision for form-like components.
• Don't use gradients or complex textures on the surface stack; the system's power comes from flat, solid colors and precise contrast.