Design System

The complete design system for Manifest UX. All tokens are defined in globals.css and update in real-time when edited.

Responsive Design Approach

CSS Variables (Direct)

Colors, fonts, borders, radii

Tailwind Classes (Sizing)

Font sizes, heights, padding, widths

sm: 640pxmd: 768pxlg: 1024pxxl: 1280px

Logo & Usage

Official Manifest UX logo assets and usage guidelines.

Logo Variants

Primary Logotype

File: /public/mux-logotype.svg (use CSS brightness-0 invert for white version)

Logo Mark (M)

Files: /public/m-logo-dark.svg (dark), /public/m-logo-white.svg (white)

Favicons

Light Mode

Dark Mode

Apple Touch

Usage Guidelines

Do

Use the full logotype in headers and footers
Use the M mark for avatars and small spaces
Maintain minimum clear space around logo
Use on solid backgrounds with good contrast

Do Not

Stretch or distort the logo
Change the logo colors
Add effects like shadows or gradients
Place on busy or low-contrast backgrounds

Brand Colors

Core brand color tokens used throughout the site.

Color Palette

--brand-orange

Primary Accent

--brand-teal

Secondary Accent

--brand-dark

Dark Background

Token	Variable	Value	Responsive
Brand Orange	`--brand-orange`
Brand Teal	`--brand-teal`
Brand Dark	`--brand-dark`

Extended Colors

Additional colors used throughout the site beyond the core brand palette.

UI Colors

Backgrounds

#fff

White

#f3f4f4

Light Gray

#f8f8f8

Off White

#d1dede

Muted Teal

#a9c4c4

Projects BG

Text Colors

#0f1f1f

Primary Text

#0b0b0b

Dark Text

#3a5f5f

Muted Teal

#6b7280

Gray

#666

Mid Gray

Tile Backgrounds

#a9c4c4

Projects

#c0d8e8

Design Sys

#0f1f1f

Fortune 500

#e6ceb3

Studio

#66a7a8

CTA Accent

Borders

#d1dede

Default

#61a7a7

Teal

Typography

Font family tokens for headings, body text, and accents.

Type Scale

--font-heading

The quick brown fox jumps

--font-body

The quick brown fox jumps over the lazy dog.

--font-accent

THE QUICK BROWN FOX

Token	Variable	Value	Responsive
Heading Font	`--font-heading`
Body Font	`--font-body`
Accent Font	`--font-accent`

Navigation

Typography and color tokens for navigation elements.

Navigation Links

Services Work About Contact

Token	Variable	Responsive
Link Color	`--nav-link-color`
Font SizeRESPONSIVE	`--nav-link-font-size`	`text-sm md:text-base`
Font Weight	`--nav-link-font-weight`
Line Height	`--nav-link-line-height`
Letter Spacing	`--nav-link-letter-spacing`

Buttons

Button variants and their associated tokens.

Button Variants

Shared Button Tokens

Token	Variable	Value	Responsive
Border Radius	`--btn-border-radius`
Gap	`--btn-gap`
Padding X	`--btn-padding-x`
Padding Y	`--btn-padding-y`

Primary Button

Token	Variable	Value	Responsive
Background	`--btn-primary-bg`
Text Color	`--btn-primary-text`
Font Family	`--btn-primary-font-family`
Font Size	`--btn-primary-font-size`
Font Weight	`--btn-primary-font-weight`
Height (md)	`--btn-primary-md-height`
Height (lg)	`--btn-primary-lg-height`

Primary Button (Alt)

Token	Variable	Value	Responsive
Background	`--btn-primary-alt-bg`
Text Color	`--btn-primary-alt-text`
Font Family	`--btn-primary-alt-font-family`
Font Size	`--btn-primary-alt-font-size`
Height (md)	`--btn-primary-alt-md-height`
Height (lg)	`--btn-primary-alt-lg-height`

Secondary Button

Token	Variable	Value	Responsive
Background	`--btn-secondary-bg`
Text Color	`--btn-secondary-text`
Border Color	`--btn-secondary-border`
Font Family	`--btn-secondary-font-family`
Height (md)	`--btn-secondary-md-height`
Height (lg)	`--btn-secondary-lg-height`

Token	Variable	Responsive
Width	`--tag-secondary-width`
Height	`--tag-secondary-height`
Padding X	`--tag-secondary-padding-x`
Padding Y	`--tag-secondary-padding-y`
Border Radius	`--tag-secondary-border-radius`
Border Color	`--tag-secondary-border-color`
Background	`--tag-secondary-bg`
Text Color	`--tag-secondary-text`
Font Family	`--tag-secondary-font-family`
Font SizeRESPONSIVE	`--tag-secondary-font-size`	`text-xs md:text-sm`

Stat Tiles

Hero stat tiles displaying key metrics. Each has unique background colors and styling.

Stat Tile Grid

Projects Delivered

200+Enterprise products shipped

Design Systems

25+Enterprise systems built

Fortune 500 Clients

12Including HP, VMware, Juniper

Studio Experience

15+Years in product design

Token	Variable	Value	Responsive
Projects BG	`--tile-projects-bg`
Projects Title Color	`--stat-title-color-projects`
Design Systems BG	`--tile-design-systems-bg`
Design Systems Title	`--stat-title-color-design-systems`
Fortune 500 BG	`--tile-fortune-bg`
Fortune 500 Title	`--stat-title-color-fortune-500`
Studio BG	`--tile-studio-bg`
Studio Title	`--stat-title-color-studio`
Title Font	`--stat-title-font-family`
Number Font	`--stat-number-font-family`
Number Weight	`--stat-number-weight`
Label Color	`--stat-label-color`

Bento Boxes

Bento-style grid layout for capabilities/services. Features a featured large tile and smaller capability cards.

Bento Grid Layout

UX for AI

Making AI intuitive for the humans who use it.

AI interfacesConversational UXData viz

Product Design for SaaS

Enterprise-grade experiences

Design Systems

Scalable design that grows

Fractional Leadership

Senior design leadership

Development

Front-end, backend, and QA

Featured Tile (UX for AI)

Token	Variable	Value	Responsive
Background	`--tile-ux-ai-bg`
Border	`--tile-ux-ai-border`
Border Radius	`--tile-ux-ai-border-radius`
Title Font	`--tile-ux-ai-title-font-family`
Title Color	`--tile-ux-ai-title-color`
Description Font	`--tile-ux-ai-desc-font-family`
Description Color	`--tile-ux-ai-desc-color`

Standard Capability Tiles

Token	Variable	Value	Responsive
Background	`--tile-capability-bg`
Icon Color	`--tile-capability-icon-color`
Title Font	`--tile-capability-title-font-family`
Title Color	`--tile-capability-title-color`
Description Color	`--tile-capability-desc-color`

Development Tile

Token	Variable	Value	Responsive
Background	`--tile-development-bg`
Icon Color	`--tile-development-icon-color`
Title Color	`--tile-development-title-color`
Description Color	`--tile-development-desc-color`

Hero Section

Tokens for the homepage hero section.

Token	Variable	Responsive
Headline Font	`--hero-headline-font-family`
Headline SizeRESPONSIVE	`--hero-headline-size`	`text-4xl md:text-5xl lg:text-[64px]`
Headline Weight	`--hero-headline-weight`
Headline Line Height	`--hero-headline-line-height`
Headline Max Width	`--hero-headline-max-width`
Subheadline Font	`--hero-subheadline-font-family`
Subheadline SizeRESPONSIVE	`--hero-subheadline-size`	`text-base md:text-lg`
Subheadline Color	`--hero-subheadline-color`
Padding TopRESPONSIVE	`--hero-padding-top`	`pt-24 md:pt-32 lg:pt-[240px]`
Padding BottomRESPONSIVE	`--hero-padding-bottom`	`pb-16 md:pb-20 lg:pb-[140px]`

Client Ticker

Tokens for the scrolling client name ticker.

Token	Variable	Responsive
Font Family	`--client-ticker-font-family`
Font SizeRESPONSIVE	`--client-ticker-font-size`	`text-xl md:text-2xl`
Font Weight	`--client-ticker-font-weight`
Color	`--client-ticker-color`
Section HeightRESPONSIVE	`--client-ticker-section-height`	`h-[100px] md:h-[150px]`

Why Manifest

Tokens for the 'Why teams choose Manifest UX' section.

Token	Variable	Responsive
Section HeightRESPONSIVE	`--why-manifest-height`	`auto lg:min-h-[860px]`
Background	`--why-manifest-bg`
Bullet Font	`--why-manifest-bullet-font-family`
Bullet SizeRESPONSIVE	`--why-manifest-bullet-font-size`	`text-lg md:text-xl`
Bullet Color	`--why-manifest-bullet-color`

Testimonials

Tokens for the quote/testimonial carousel.

Token	Variable	Responsive
Section HeightRESPONSIVE	`--testimonial-height`	`auto lg:min-h-[650px]`
Background	`--testimonial-bg`
Quote Font	`--testimonial-quote-font-family`
Quote SizeRESPONSIVE	`--testimonial-quote-font-size`	`text-2xl md:text-3xl lg:text-4xl`
Quote Color	`--testimonial-quote-color`
Attribution Color	`--testimonial-attribution-color`

Case Studies

Tokens for work/case study cards.

Token	Variable	Responsive
Card Background	`--case-study-card-bg`
Card Border	`--case-study-card-border`
Title Font	`--case-study-title-font-family`
Title SizeRESPONSIVE	`--case-study-title-font-size`	`text-xl md:text-2xl`
Title Color	`--case-study-title-color`
Description Color	`--case-study-desc-color`

Contact Section

Tokens for the contact/CTA section.

Token	Variable	Responsive
Background	`--contact-section-bg`
Title Font	`--contact-title-font-family`
Title SizeRESPONSIVE	`--contact-title-font-size`	`text-3xl md:text-4xl`
Title Color	`--contact-title-color`
Subtitle Color	`--contact-subtitle-color`
Form Background	`--contact-form-bg`
Input Border	`--contact-input-border`

Footer

Tokens for the footer section.

Footer Links

Services

Token	Variable	Value	Responsive
Background	`--footer-bg`
Heading Font	`--footer-heading-font-family`
Heading Weight	`--footer-heading-font-weight`
Heading Color	`--footer-heading-color`
Text Font	`--footer-text-font-family`
Link Color	`--footer-link-color`
Copyright Color	`--footer-copyright-color`

Live Component Previews

Interactive previews of key components.

Primary Buttons (All Sizes)

All Button Variants

Design System

Responsive Design Approach

Logo & Usage

Usage Guidelines

Do

Do Not

Brand Colors

Extended Colors

Typography

Navigation

Buttons

Shared Button Tokens

Primary Button

Primary Button (Alt)

Secondary Button

Tags

Stat Tiles

Bento Boxes

UX for AI

Product Design for SaaS

Design Systems

Fractional Leadership

Development

Featured Tile (UX for AI)

Standard Capability Tiles

Development Tile

Hero Section

Client Ticker

Why Manifest

Testimonials

Case Studies

Contact Section

Footer

Services

Live Component Previews