Mighty Component Library
A design system for Mighty
Design System
Typography
Complete type scale from 5XL to 2XS for headings and text. Inter font family with weights from regular to extrabold.
Spacing
8-point grid system with spacing tokens from 2XS (4px) to 5XL (128px) for consistent layouts.
Border
Border radius (2XS to 2XL) and width tokens (thin to 2XL) for styling UI elements.
Colors
Core Neutrals, Cool Neutrals, Rainbow colors, and semantic color tokens for content, backgrounds, and borders.
Shadow
Elevation system with shadow tokens from XS to 2XL for creating depth and visual hierarchy.
Components
Headers
Navigation headers with logo, search, user profile, and quick links for consistent site navigation.
Buttons
Primary, secondary, and CTA buttons with various sizes and states for user interactions.
Cards
Coupon cards, content cards, and other container components for organizing information.
Forms
Input fields, search bars, dropdowns, and form components for data collection.
Input Fields
FloatingLabelInput, Input, FormField, SearchInput, and PhoneNumberInput — all states and variants.
Onboarding Flow
All 4 onboarding steps shown statically — Welcome, Interests, Invite, and Celebration.
Navigation
Navigation patterns including tabs, quick links, breadcrumbs, and menu components.
Brand Pages
Specialized components for brand landing pages including overview sections, navigation, headers, and feature grids.
Pricing Showcase
Complete pricing component variants including tiered vertical/horizontal, services table, and non-member comparison layouts.
How It Works Showcase
Step-by-step guide components with horizontal and vertical layout variants featuring numbered badges.
Additional Info Showcase
Additional info section variants including text-only, text-with-image, FAQ accordion, and attachment carousel layouts.
Content Showcase
General content components including Overview, AdditionalInfo (default and FAQ variants), and FeaturesGrid.
Coupon Showcase
Complete coupon card variants including single-button, double-button, coupon-code with "Tap to Get Your Code" button, and widget layouts.
Brand Assets
Complete library of brand logos (full) and brand icons (small/favicon) with visual preview and file names.
Media Grid Showcase
Photo and video grid section for brand pages — portrait (4-col 3:4), landscape (3-col 16:9), and square (4-col 1:1) variants.
Discovery Module
Dark pre-footer component with curated collection cards and accent-colored icon tiles. Drives exploration and mitigates dead ends.
Coupon Card Examples
Offer Text
Offer Text
Offer Text
Savings Badge
Evergreen Variant
Instant Variant
Carousel
BRAND
Offer
Description
45% Off FedEx Services
Save time and money with fast, reliable delivery services for your business.
25% Off Tickets
Good at any AMC Theatres® location in the United States only. Redeemable in-theatre, at kiosk, and online.
BRAND
Offer
Description
45% Off FedEx Services
Save time and money with fast, reliable delivery services for your business.
Section Header
Featured Offers
Discover exclusive deals and savings for your business
Button Variants
Primary Buttons
Secondary Buttons
Ghost Buttons
Tile Variants
image-3-lines
NEW
Brand
Offer
Category
image-1-line
NEW
Text
brand-image-offer
NEW
Offer
number
1
Category
graphic
Hotels
Advertiser Footer
Design Annotator Test
WebGPU Annotation Canvas Test
Static Triangle (for testing)
Static RGB triangle overlay
Animated Triangle
Animated color-cycling triangle