Brik

Overview

Brik is a minimalist, high-contrast design platform celebrating AI-generated creative tools built by a global community. The aesthetic embodies 'Precision Minimalism'—a design philosophy that strips away visual noise to create stark, purposeful interfaces where content (animated tool previews, creator attribution, engagement metrics) becomes the primary visual element. The brand personality is direct, inclusive, and forward-thinking: the UI speaks in the language of makers and experimenters, never condescending, always focused on enabling discovery and remixing. The emotional response is one of clarity and possibility—users feel empowered to explore, fork, and iterate on others' work. Example voice: 'Remix this tool, make it yours, share what you build.'

Colors

The color system operates on a radical contrast principle: a near-white canvas (#ffffff, #f5f5f5) anchors the interface, while two accent colors—a vibrant magenta primary (#ff59f1) and a warm red secondary (#ff4447)—punctuate CTAs, highlights, and status indicators. The primary magenta (#ff59f1) is reserved exclusively for the most prominent call-to-action ('Build a Tool') and interactive hover states, creating an unmistakable focal point. Secondary grays (#555555 for body text, #7d7d7d for muted labels, #333333 for dark accents) provide hierarchy without competing for attention. Surface containers (#e8e8e8 for high, #e1e1e1 for highest) enable subtle depth through grayscale layering rather than shadows. The error color (#ff4447) doubles as a secondary brand accent, used in featured badges

Typography

The type system pairs two distinct typefaces to reinforce hierarchy and personality: 'Neue Haas Grotesk Display Pro' (a geometric, high-contrast display font) anchors headlines and the brand logo, conveying sophistication and modernity; 'EarlySans' (a humanist sans-serif) handles body copy, labels, and UI text, ensuring readability at small sizes and a friendly, approachable tone. Display (60px, 700 weight, -0.04em tracking) is used sparingly for hero statements; headline-lg (40px, 600 weight) frames section titles; body-md (16px, 400 weight, 24px line-height) is the workhorse for descriptions and metadata. Labels are consistently 12–14px with 500–600 weight and 0.01–0.02em tracking to stand out as interactive elements. All type is left-aligned and uses a consistent 0px letter-spacing base

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centered with auto margins on desktop and 24px horizontal gutters on mobile. The hero section spans full-width with a 40px (lg spacing) top margin; the gallery grid below uses a responsive layout (1 column on mobile, 2–3 on tablet, 4 on desktop) with 24px (md spacing) gaps between items. Container max-width is enforced at 1280px to prevent excessive line lengths and maintain visual focus. Vertical rhythm is maintained through consistent 24px (md) section separators and 12px (sm) intra-component spacing. The fixed navigation bar at the top uses 10px padding and 15px border-radius, positioned 20px from the viewport top, creating a 'floating' effect without glassmorphism—pure white background with a subtle 10px 10px 50px rgba(0,

Elevation & Depth

Depth is conveyed through a restrained shadow system and grayscale surface layering, avoiding the visual weight of dark shadows. Level 1 (Base): the main canvas is pure white (#ffffff) with no shadow. Level 2 (Standard Cards): tool preview cards use a 0 3px 8px rgba(0, 0, 0, 0.15) shadow and a 1px solid border in #e1e1e1, creating a subtle lift. Level 3 (Elevated/Hover): on hover, cards transition to a 10px 10px 50px rgba(0, 0, 0, 0.2) shadow and shift to a #e8e8e8 background, signaling interactivity without overwhelming the layout. The fixed navigation bar uses the Level 3 shadow (10px 10px 5

Shapes

The design philosophy is 'Geometric Precision'—a balance between sharp, technical corners and subtle softness that prevents the interface from feeling cold. Buttons and tags use 10px border-radius (md), a sweet spot that feels modern without being overly rounded. Input fields and smaller interactive elements use 4px border-radius (DEFAULT), maintaining a technical, grid-aligned appearance. Cards and larger containers use 12px border-radius (lg), creating a slightly more approachable container for content. The navigation bar uses 15px border-radius (xl), the most rounded element on the page, si

Components

Action Elements Buttons follow a strict two-tier system: primary buttons use the magenta accent (#ff59f1) with white text, 12px padding (horizontal) × 40px height, 10px border-radius, and 500 font-weight. On hover, the background shifts to #ff4447 (the warm red secondary) with a 200ms ease-out transition, creating a dynamic color-shift feedback. Secondary buttons use a light gray background (#e8e8e8) with dark text (#0a0a0a), a 1px solid border in #aaaaaa, and the same 40px height and 10px radius. Ghost buttons (used for navigation items) have a transparent background and dark text, transitioning to #e8e8e8 on hover. All buttons use the label-md typography (14px, 500 weight) and are vertically centered with flexbox.

Containers & Surfaces Tool preview cards are the primary containe

Do's and Don'ts

**Do**

• Do use the magenta primary (#ff59f1) exclusively for the most prominent CTA ('Build a Tool') and primary interactive states; reserve the red secondary (#ff4447) for badges, error states, and gradient overlays.
• Do maintain generous white-space (24px md spacing between sections, 12px sm spacing within components) to let tool previews breathe and command attention.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and the 10px 10px 50px rgba(0, 0, 0, 0.2) shadow to elevated/hover states; never use darker or softer shadows that would muddy the minimalist aesthetic.
• Do use Neue Haas Grotesk Display Pro for headlines and EarlySans for body copy; never mix typefaces within a single component or section.
• Do apply a 200ms ease-out transition to all interactive state changes (hover, focus, active) to create a snappy, responsive feel without feeling sluggish.

**Don't**

• Don't use transparency-based colors or rgba overlays for primary surfaces; all backgrounds and text colors must be opaque and deliberately chosen from the defined palette.
• Don't apply border-radius greater than 15px to any component; excessive rounding undermines the geometric precision aesthetic and makes the interface feel dated.
• Don't use shadows darker than rgba(0, 0, 0, 0.2) or blur effects; the design system relies on grayscale surface layering and sharp shadows for depth, not glassmorphism.
• Don't mix the primary magenta (#ff59f1) and secondary red (#ff4447) on the same component or in the same visual hierarchy level; use them as distinct accent colors for different interaction contexts.
• Don't reduce the 24px gutter or 12px internal padding for components; the minimalist aesthetic depends on breathing room and clear visual separation between elements.