FAMESPECS

Neo-Brutalism Design System for Sports Gear Reviews

INTRODUCTION

Design Philosophy

GearBrute is a comprehensive Neo-Brutalism design system built specifically for sports gear review platforms. It embraces raw, unpolished aesthetics with bold typography, harsh shadows, and vivid color blocks.

The system prioritizes clarity, impact, and functionality over unnecessary decoration. Every element is designed to communicate directly and honestly, mirroring the straightforward nature of gear reviews.

Core Principles

  • 01 Bold, unapologetic visual hierarchy
  • 02 Harsh borders & dramatic shadows
  • 03 High-contrast color combinations
  • 04 Brutalist typography hierarchy
  • 05 Functional over decorative

COLOR SYSTEM

Primary Palette

Yellow
#FFE500
Black
#000000
White
#FFFFFF

Accent Colors

Red
#FF0033
Blue
#0066FF
Green
#00FF66
Purple
#9933FF
Orange
#FF6600
Pink
#FF00CC
Usage Guidelines: Use Yellow as the primary brand color. Black & White form the foundation. Accent colors should be used sparingly for emphasis, categories, and state indicators.

TYPOGRAPHY

Type Scale

DISPLAY HEADLINE

Display 1 - Bebas Neue - 96px / 6rem

DISPLAY SUBHEAD

Display 2 - Bebas Neue - 72px / 4.5rem

PRIMARY HEADING

H1 - Archivo Black - 56px / 3.5rem

SECONDARY HEADING

H2 - Archivo Black - 40px / 2.5rem

TERTIARY HEADING

H3 - Archivo Black - 32px / 2rem

QUATERNARY HEADING

H4 - Work Sans Bold - 24px / 1.5rem

This is large body text for introductions and lead paragraphs. It's designed for readability and emphasis in content-heavy sections.

Body Large - Work Sans - 20px / 1.25rem

This is regular body text for standard content. It provides excellent readability across all devices and maintains the brutalist aesthetic without sacrificing legibility.

Body Regular - Work Sans - 16px / 1rem

This is small body text for captions, metadata, and supporting information that doesn't need primary emphasis.

Body Small - Work Sans - 14px / 0.875rem

Font Families

Display Font
BEBAS NEUE

Used for hero text and display headlines

Heading Font
ARCHIVO BLACK

Used for all heading levels

Body Font
Work Sans

Used for body text and UI elements

Type Guidelines

Hierarchy: Maintain clear visual hierarchy through size, weight, and spacing. Headlines should dominate.

Uppercase: Use ALL CAPS for headings and labels to reinforce the brutalist aesthetic.

Line Height: Tight leading (0.9-1.1) for display text, comfortable (1.5-1.7) for body.

Contrast: Always ensure sufficient contrast between text and backgrounds for accessibility.

BUTTONS

Button Variants

Button Sizes

Button States

Normal State

Hover State (Try hovering)

<button class="btn btn-primary">Primary Button</button> <button class="btn btn-secondary">Secondary Button</button> <button class="btn btn-large btn-accent">Large Accent</button> <button class="btn btn-outline">Outline Button</button>

CARDS

Card Variants

Standard Card

A basic card with header and body. Perfect for displaying product information, review summaries, and content blocks.

Review Card

9.2

Hover-enabled review card with rating display. Ideal for product reviews and comparison listings.

Running New Pro

Featured Card

FEATURED: Nike ZoomX Vaporfly NEXT% 3

EDITOR'S CHOICE

The most aggressive racing shoe on the market, pushing the boundaries of lightweight performance and energy return.

Running 9.5/10 Elite
9.5
Overall Rating
9.8
Speed
9.2
Comfort
<div class="card"> <div class="card-header"> <h4 class="h4">Card Title</h4> </div> <div class="card-body"> <p>Card content...</p> </div> <div class="card-footer"> <button class="btn btn-primary">Action</button> </div> </div>

BADGES & TAGS

Badge Variants

Default 9.5/10 Category New Pro Level

Usage Examples

Product Categories

Running Basketball Training Cycling Swimming

Review Status

Just Released Tested 100+ Miles Updated Review Top Rated
<span class="badge">Default Badge</span> <span class="badge badge-rating">9.5/10</span> <span class="badge badge-category">Running</span> <span class="badge badge-new">New</span>

RATING SYSTEM

Rating Display Variants

Numeric Rating

9.5 /10

Star Rating

Rating Breakdown

Overall Score: 9.2/10

Performance 9.5/10
Comfort 9.0/10
Durability 8.8/10
Value 9.3/10
<div class="rating-display"> <span class="rating-number">9.5</span> <span class="rating-label">/10</span> </div>

FORM ELEMENTS

Input Fields

Checkboxes

<input type="text" class="input" placeholder="Enter text"> <select class="input select">...</select> <textarea class="input textarea"></textarea> <input type="checkbox" class="checkbox">

NAVIGATION

Primary Navigation

<nav class="nav"> <a href="#" class="nav-link active">Home</a> <a href="#" class="nav-link">Reviews</a> <a href="#" class="nav-link">Categories</a> </nav>

ALERTS & MESSAGES

Info: This product is currently available for pre-order.
Success: Your review has been submitted successfully!
Warning: This gear is recommended for advanced athletes only.
Danger: This product has been recalled. Check manufacturer details.
<div class="alert alert-info">Info message</div> <div class="alert alert-success">Success message</div> <div class="alert alert-warning">Warning message</div> <div class="alert alert-danger">Danger message</div>

SPECIAL COMPONENTS

Quote Block

These are the best running shoes I've tested in 10 years of competitive racing. The energy return is unmatched.
— Sarah Johnson, Professional Marathon Runner

Stats Display

247
Products Reviewed
1.2M
Miles Tested
50K
Community Members

Dividers

LAYOUT EXAMPLES

Review Card Layout

Running New

Nike Pegasus 40

Versatile daily trainer with responsive cushioning.

8.9
Basketball Pro

Air Jordan 38

Elite performance for explosive players.

9.4
Training

Metcon 9

Stable platform for heavy lifting sessions.

9.1

Comparison Layout

Product A

9.2
Pros
  • Excellent cushioning
  • Durable outsole
  • Great value
Cons
  • Heavy weight
  • Limited color options

Product B

8.7
Pros
  • Lightweight design
  • Breathable upper
  • Stylish aesthetics
Cons
  • Less cushioning
  • Higher price point

SPACING SYSTEM

Spacing Scale
--space-xs: 4px
--space-sm: 8px
--space-md: 16px
--space-lg: 24px
--space-xl: 32px
--space-2xl: 48px
--space-3xl: 64px
--space-4xl: 96px
Usage: Use utility classes like .p-lg, .m-xl, .gap-md, or reference CSS variables directly: padding: var(--space-lg)

RESPONSIVE DESIGN

Breakpoint System

The design system is fully responsive with mobile-first principles. All components automatically adapt to different screen sizes.

Key Breakpoint: 768px

On screens below 768px, grid layouts collapse to single column, typography scales down appropriately, and spacing adjusts for mobile viewing.

Testing: Resize your browser window to see responsive behavior in action. All components maintain their brutalist aesthetic across all devices.

ACCESSIBILITY

Color Contrast

All color combinations meet WCAG AA standards for contrast ratio. High-contrast black borders ensure clarity.

  • Text on backgrounds: 4.5:1 minimum
  • Large text: 3:1 minimum
  • UI components: 3:1 minimum

Keyboard Navigation

All interactive elements are keyboard accessible with visible focus states.

  • Tab navigation support
  • Clear focus indicators
  • Logical tab order
  • Skip links for screen readers

USAGE GUIDELINES

Design Principles

DO

  • Use bold, high-contrast colors
  • Apply thick borders (4px) consistently
  • Maintain harsh drop shadows
  • Keep typography hierarchy strong
  • Use ALL CAPS for headings
  • Embrace asymmetry and bold layouts
  • Test accessibility standards

DON'T

  • Use subtle shadows or gradients
  • Add rounded corners or soft edges
  • Reduce border thickness
  • Mix too many accent colors
  • Use decorative script fonts
  • Create overly complex layouts
  • Compromise on accessibility

IMPLEMENTATION NOTES

This design system is built with production-ready CSS using custom properties (CSS variables) for easy theming and maintenance. All components are framework-agnostic and can be integrated into any web project.

Getting Started

  1. Include Google Fonts (Bebas Neue, Archivo Black, Work Sans)
  2. Copy the CSS variables and base styles
  3. Apply component classes to your HTML
  4. Customize colors via CSS variables

Browser Support

All modern browsers supported:

  • Chrome/Edge 88+
  • Firefox 78+
  • Safari 14+
  • Mobile browsers (iOS Safari, Chrome Mobile)

PROSE CONTENT TEST

REFERENCES / LISTS

This simulates a blog post references section:

  1. HEAD Boom Team (2024) - All Things Tennis ltd, accessed February 15, 2026, https://allthingstennis.co.uk/products/head-boom-team-2024
  2. Head Boom Team 2024 - Tennis Topia, accessed February 15, 2026, https://www.tennistopia.com/head-boom-team-2024.html
  3. Head Boom Team 2024 - Tennis Direct, accessed February 15, 2026, https://www.tennisdirect.com/head-boom-team-2024
  4. Head Boom Team Racquet | Tennis Warehouse, accessed February 15, 2026, https://www.tennis-warehouse.com/Head_Boom_Team_2024_Racquet/descpageRCHEAD-HBT24.html

And an unordered list:

  • Item one in the list
  • Item two in the list
  • Item three in the list

FAMESPECS

Neo-Brutalism Design System for Sports Gear Reviews

Created with bold design principles and uncompromising attention to detail.