Summer Friday Design System
Week 1 atomic components and text patterns
Buttons
Various button variants and sizes
Primary Variant
Secondary Variant
Other Variants
Typography
Heading hierarchy and text variants
Headings (Sombra Font)
Heading 1 - Hero Headlines
Heading 2 - Section Titles
Heading 3 - Subsection Titles
Heading 4 - Section Subtitles
Heading 5 - Card Titles
Heading 6 - Small Titles
Text Sizes (Inter Font)
2XL Text - Large descriptions
XL Text - Emphasized content
Large Text - Important content
Base Text - Body content
Small Text - Secondary content
XS Text - Captions and notes
Text Colors
Primary text color
Secondary text color
Muted text color
Accent text color
Cards
Various card styles and compositions
Default Card
Basic card with subtle shadow
This is the default card variant with standard styling and hover effects.
Elevated Card
Card with stronger shadow
Elevated variant creates more visual hierarchy with enhanced shadows.
Outlined Card
Card with border emphasis
Outlined variant uses borders instead of shadows for definition.
Interactive Card
Clickable card with hover effects
This card has interactive states and can be clicked.
Inputs
Form input variants and states
Input Variants
Input Sizes
Input States
Text Combination Patterns
Common text layouts and compositions
Eyebrow + Text Block
A fast-moving ecommerce company came to us after months of disconnected AI experiments that weren't delivering results. We helped them achieve 2× faster product cycles and 27% revenue growth.
Title + Subtitle
Transform Your AI Strategy
From scattered experiments to systematic results
Title + Body Copy
The Real Problem with AI Transformation
Teams gather in conference rooms, laptops open, nodding along to the latest AI strategy presentation. But when it comes time to implement? Silence. Hesitation. That familiar friction that kills momentum before it starts.
Eyebrow + Title + Body
The Navigator™ Process
A focused, pre-researched workshop to identify where AI can deliver real results inside your team. We'll map your workflows, assess readiness, and surface high-impact opportunities.
Quote Testimonial
"Summer Friday helped us move from random ChatGPT usage to a systematic AI operation that saves hundreds of design hours every month."
Sarah Chen
Head of Product, TechFlow
Stat Display
Teams report faster development cycles
Call to Action
Ready to transform your AI approach?
From reactive experiments to intentional strategy
Feature Highlight
Automated product copy creation across 5,000 SKUs
Reduced manual copywriting effort by 85% while maintaining brand consistency
Image Text Layout
Flexible image and text layout component with multiple variants
Image Left Layout
Transform Your Product Development
Our AI-first approach helps product teams move from experimentation to systematic implementation. We provide the frameworks, tools, and expertise needed to turn AI from expensive experiments into measurable business advantages.
Image Right Layout
Strategic AI Implementation
Move beyond random ChatGPT usage to systematic AI operations. Our proven methodologies help teams implement AI-ready design systems, establish governance frameworks, and measure meaningful outcomes.
Available Props
Layout Variants:
• `layout="image-left"` (default) • `layout="image-right"`
Spacing Options:
• `spacing="compact"` • `spacing="default"` • `spacing="large"`
Background Colors:
• `backgroundColor="white"` • `backgroundColor="neutral"` • `backgroundColor="blue"`
CTA Variants:
• `ctaVariant="primary"` • `ctaVariant="secondary"` • `ctaVariant="outline"`
Summer Friday Design System - Week 1 Components