Makerspace.ph - Design System Documentation

Complete Design System • March 2026

Makerspace.ph
Design Documentation

A comprehensive guide to colors, components, and patterns. Everything you need to build consistent, professional digital experiences that match our brand identity.

Design Philosophy

Our design system is built on three core principles: clarity, consistency, and conversion.

Clarity

Every element serves a purpose. Clean layouts, generous whitespace, and clear hierarchy guide users effortlessly through their journey.

Consistency

Unified color palette, spacing system, and components ensure every page feels like part of the same professional brand.

Conversion

Strategic use of contrast, CTAs, and visual hierarchy designed to guide users toward meaningful actions.

Brand Colors

Our color palette conveys trust, energy, and professionalism. Use these exact values for brand consistency.

Primary Brand Colors

Primary Blue

#1b3351

Main brand color. Used for headers, borders, secondary buttons, and establishing trust.

Primary Orange

#c93f0b

Action color. Primary CTAs, highlights, and elements that demand attention.

Orange Light

#e65a1f

Hover states for orange buttons and secondary accents.

Orange Dark

#a83409

Darker orange for button active states.

Text & Neutral Colors

Charcoal

#111827

Primary heading text on light backgrounds, dark section backgrounds.

Gray

#6b7280

Body text, descriptions, and secondary content.

Light Gray

#9ca3af

Muted text, captions, and labels on dark backgrounds.

Background Light

#f9fafb

Page backgrounds, light sections.

Icon & Feature Gradients

Gradient 1: Blue to Orange

Gradient 2: Orange to Blue

Gradient 3: Blue to Orange

Gradient 5: Dark Blue to Orange

Gradient 6: Blue-Orange-Blue

Typography

Consistent typography creates a professional and readable user experience.

H1 Heading

SIZE: clamp(40px, 6vw, 72px)

Used for main page titles and hero headings. Responsive sizing from 40px on mobile to 72px on desktop.

H2 Heading

SIZE: clamp(36px, 5vw, 56px)

Used for section titles and major subheadings. Scales from 36px to 56px for optimal readability.

H3 Heading

SIZE: 24px

Used for card titles, smaller section headings, and component labels. Fixed size across all devices.

Body Text - The quick brown fox jumps over the lazy dog.

SIZE: 16px - 20px

Used for paragraphs, descriptions, and regular content. Line height set to 1.6 for optimal readability.

/* Typography System */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

/* Heading Sizes */
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 700; }
h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; }
h3 { font-size: 24px; font-weight: 700; }

/* Body Text */
p { font-size: 16px - 20px; line-height: 1.6; }
            

Button Components

Clear, actionable buttons that guide users and drive conversions.

Primary Button

.btn-primary {
  background: #c93f0b;
  color: white;
  padding: 20px 32px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(201, 63, 11, 0.5);
}
                    

Usage: Primary CTAs, main actions, conversion-focused buttons.

Secondary Button

.btn-secondary {
  background: white;
  color: #1b3351;
  border: 2px solid #1b3351;
  padding: 20px 32px;
}
                    

Usage: Secondary actions, "Learn More", alternative options.

Button States

NORMAL

HOVER

NORMAL

HOVER

Card Components

Flexible card designs for showcasing features, services, and content with visual impact.

Service Card

Clean card design with gradient icon background, perfect for presenting services and features with professional polish.

Feature Card

Showcase key features with eye-catching icons and clear descriptions that communicate value instantly.

Team Card

Present team members, testimonials, or case studies with hover effects and professional styling.

/* Card Component Structure */
.showcase-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.showcase-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
            

Section Patterns

Alternating dark and light sections create visual rhythm and guide user attention through the page.

Dark Section

Hero, Services, Pricing, FAQ

Dark Sections

Use dark backgrounds for hero areas, service showcases, and conversion-focused sections. Creates premium feel and emphasis.

Background: linear-gradient(to bottom, #111827, #000000)
Text Color: White (#ffffff)
Secondary Text: #9ca3af
Used in: Section 1 (Hero), Section 3 (Services), Section 5 (Partners), Section 6 (Pricing), Section 7 (FAQ)

Light Section

Audience, Why Us, Final CTA

Light Sections

Use light backgrounds for content-heavy sections and maximum readability. Creates breathing space between dark sections.

Background: linear-gradient(to bottom, #ffffff, #f9fafb)
Heading Color: #111827
Body Text: #6b7280
Used in: Section 2 (Audience Gateway), Section 4 (Why Makerspace), Section 8 (Final CTA)

Alternating Pattern

Section 1: Dark (Hero)

Section 2: Light (Audience)

Section 3: Dark (Services)

Section 4: Light (Why Us)

Section 5: Dark (Partners)

Spacing System

Consistent spacing creates visual hierarchy and improves readability across all components.

100px

Section vertical padding (.fw-section)

60px

Section header bottom margin

40px

Card internal padding

32px

Standard gap between elements

30px

Grid gap between cards

24px

Spacing between related elements

20px

Button padding, small gaps

CSS Reference

Copy-paste ready code snippets for implementing the Makerspace design system.

/* ========================================
   MAKERSPACE.PH DESIGN SYSTEM
   Complete CSS Variables & Core Styles
   ======================================== */

/* Brand Colors */
--primary-blue: #1b3351;
--primary-orange: #c93f0b;
--orange-light: #e65a1f;
--orange-dark: #a83409;

/* Text Colors */
--text-dark: #111827;
--text-gray: #6b7280;
--text-light: #9ca3af;

/* Backgrounds */
--bg-light: #f9fafb;
--bg-white: #ffffff;
--bg-dark: #111827;

/* Gradients */
.gradient-1 { background: linear-gradient(135deg, #1b3351, #c93f0b); }
.gradient-2 { background: linear-gradient(135deg, #c93f0b, #1b3351); }

/* Container System */
.inner-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Section Padding */
.fw-section {
  padding: 100px 20px;
}

/* Typography */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Heading Sizes */
h1: clamp(40px, 6vw, 72px)
h2: clamp(36px, 5vw, 56px)
h3: 24px
Body: 16-20px
            

Download Full Stylesheet

Access the complete style.css file with all component styles, responsive breakpoints, and animations. This includes all 8 sections from the landing page.

Download style.css

documentation

Makerspace.ph
Design Documentation

Design Philosophy

Clarity

Consistency

Conversion

Brand Colors

Primary Brand Colors

Text & Neutral Colors

Icon & Feature Gradients

Typography

H1 Heading

H2 Heading

H3 Heading

Button Components

Primary Button

Secondary Button

Button States

Card Components

Service Card

Feature Card

Team Card

Section Patterns

Dark Section

Dark Sections

Light Section

Light Sections

Alternating Pattern

Spacing System

CSS Reference

Download Full Stylesheet

Office

+63917-179-8813

Links

Useful Links

Office

+63917-179-8813

Links

Useful Links

Makerspace.ph Design Documentation

Design Philosophy

Clarity

Consistency

Conversion

Brand Colors

Primary Brand Colors

Text & Neutral Colors

Icon & Feature Gradients

Typography

H1 Heading

H2 Heading

H3 Heading

Button Components

Primary Button

Secondary Button

Button States

Card Components

Service Card

Feature Card

Team Card

Section Patterns

Dark Section

Dark Sections

Light Section

Light Sections

Alternating Pattern

Spacing System

CSS Reference

Download Full Stylesheet

+63917-179-8813

Office

+63917-179-8813

Links

Useful Links

Makerspace.ph
Design Documentation