BLACKGRID Systems
Design System

Premium web development meets minimalist design.
A comprehensive guide to the BLACKGRID brand.

BRAND COLORS

#000000
#FFFFFF
#0A0A0A
Design Principles

Built on simplicity.
Elevated by precision.

⚡

Minimal

Every element serves a purpose. No clutter, no noise. Pure focus on what matters.

✨

Premium

Sophisticated aesthetics that communicate quality and professionalism at every touchpoint.

🎯

Precise

Careful attention to spacing, typography, and proportions. Design with mathematical harmony.

🌙

Dark-First

Designed for the dark. Easy on the eyes, bold in presence, modern in execution.

🎨

Timeless

Built to last. Classic black and white never goes out of style.

🔲

Grid-Based

Structured layouts that create order and visual rhythm across all devices.

Color Palette

Black. White. Perfect.

Pure Black
#000000
Primary background color. The foundation of the BLACKGRID aesthetic.
Pure White
#FFFFFF
Primary text and accent color. Used for buttons, headlines, and key elements.
Dark Gray
#0A0A0A
Secondary background for sections and cards. Adds subtle depth.
Off White
#F5F5F7
Body text and secondary content. Softer than pure white for readability.
Medium Gray
#A1A1A6
Tertiary text and descriptions. Provides visual hierarchy.
Light Gray
#86868B
Labels, captions, and secondary information. Subtle but readable.
Typography

Precision in every letter.

SF Pro Display

Headlines and display text. Apple's signature font for maximum impact and clarity.

Display Large

Engineered

font-size: 80px;
font-weight: 700;
letter-spacing: -2px;
Heading 1

Premium solutions

font-size: 56px;
font-weight: 700;
letter-spacing: -1.5px;
Heading 2

Our Services

font-size: 28px;
font-weight: 600;
letter-spacing: -0.5px;

System Font

Body text and UI elements. Clean, readable, and optimized for all platforms.

Large Body

Comprehensive web solutions for modern businesses.

font-size: 24px;
color: #a1a1a6;
letter-spacing: -0.5px;
Body Text

Beautiful, intuitive interfaces that captivate users and reflect your brand's unique identity.

font-size: 16px;
line-height: 1.7;
Small Text

© 2025 BLACKGRID Systems

font-size: 14px;
color: #86868b;
letter-spacing: 0.5px;
Components

Building blocks of excellence.

Buttons

padding: 10px 24px;
border-radius: 980px;
font-weight: 500;

Links

Hover to brighten →
color: #f5f5f7;
hover: #ffffff;
transition: 0.3s;

Cards

⚡

Service Card

Clean design with subtle borders and rounded corners.

border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 32px;

Input Fields

background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;

Explore the system in action.

Visit the BLACKGRID Systems website to experience the design.

View Website