Design System inspired by Meta

Social technology. Blue legacy, clean corporate, metaverse-inspired gradients.

Usage

npx getdesign@latest add meta

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Meta design system. A curated starting point for building Meta-like UIs with your AI coding agent.

Social technology. Blue legacy, clean corporate, metaverse-inspired gradients.

Preview

meta.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF META

Social technology. Blue legacy, clean corporate, metaverse-inspired gradients.

Explore the system View tokens

Color Palette

Social technology. Blue legacy, clean corporate, metaverse-inspired gradients.

Primary

Meta Blue

#0668e1

Brand color

Gradient Start

#0668e1

Brand color

Gradient End

#0aacf0

Brand color

Dark

#1c2b33

Brand color

White

#ffffff

Brand color

Light BG

#f0f2f5

Brand color

Gray

#65676b

Brand color

Green

#31a24c

Brand color

Typography

A type system inspired by Meta.

Optimistic Display

Optimistic Display, Optimistic Display

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Meta.

Not detected on this URL

Components

Other component primitives mapped from the Meta spec.

Not detected on this URL

Design System Inspired by Meta

1. Visual Theme & Atmosphere

Social technology. Blue legacy, clean corporate, metaverse-inspired gradients.

Key Characteristics:

Meta Blue (#0668E1) as primary brand

Blue-to-cyan gradient for brand moments

Clean corporate redesign aesthetic

Metaverse-inspired 3D visual elements

Platform family navigation patterns

2. Color Palette & Roles

Primary

Meta Blue (#0668E1): Brand color
Gradient Start (#0668E1): Brand color
Gradient End (#0AACF0): Brand color
Dark (#1C2B33): Brand color
White (#FFFFFF): Brand color
Light BG (#F0F2F5): Brand color
Gray (#65676B): Brand color
Green (#31A24C): Brand color

3. Typography Rules

Font Family

Display & UI: Optimistic Display, system-ui

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Meta Blue: #0668E1
Gradient Start: #0668E1
Gradient End: #0AACF0
Dark: #1C2B33
White: #FFFFFF
Light BG: #F0F2F5

Typography

Font: Optimistic Display, system-ui