Design System

Extract your brand design system, fine-tune visual elements, and generate on-brand emails in minutes with Brew’s AI

What Is a Design System in Brew?

Brew’s AI is taught to strike a balance between creativity and brand consistency. It analyzes your website to extract your brand elements, then creates a comprehensive design system you can fine-tune. This set of brand-specific building blocks becomes the foundation for all your email generation.

Why are Email Design Systems Important?

In email design, three factors are essential: brand alignment, consistency, and cross-client compatibility. When subscribers receive emails that either vary in design, don’t accurately reflect your brand’s visual identity, or display incorrectly in different email clients, they question the legitimacy of your communications and are less likely to engage.

The fundamental challenges in email design are:

1. Technical fragmentation — With dozens of email clients (Apple Mail, Gmail, Outlook) interpreting code differently, designing emails that look consistent everywhere requires complex technical solutions.

2. Brand inconsistency — Without a design system, emails created by different team members often have varying styles, colors, and layouts, diluting your brand identity.

3. Design inefficiency — Starting each email design from scratch wastes time and creates unnecessary variation.

A design system solves these problems by establishing a single source of truth for your email designs. It provides pre-built, consistently styled components that:

• Render correctly across all email clients
• Maintain visual consistency regardless of who creates the email
• Accelerate the design process by eliminating repetitive work
• Create a recognizable experience that builds trust with your audience

When subscribers instantly recognize your emails as yours, engagement metrics improve dramatically. Open rates, click-through rates, and conversions all benefit from the trust and familiarity that consistent branding builds over time.

Automatic Extraction

Extract your complete design system from a website

Fine-Tune Control

Fine-tune every visual element to match your exact brand requirements

Instant On-Brand Emails

Generate consistent, on-brand emails with AI in less than a minute

Getting Started with Design Systems

1. Access your design system

   Navigate to the Design section in Brew to view and manage your design systems.

   Your first design system is automatically created during sign-up based on your business website.

2. Create a new design system

   Click the ”+ New Design” button to create a new design systems. You’ll need to:

   • Provide a descriptive name for your design system
   • Enter the URL of a website to extract styles from
   • Choose whether to make this your default design system

   For best results, use your homepage URL and ensure it reflects your current branding. You can create multiple design systems for different campaigns, product lines, or audiences. This approach is particularly valuable during rebrands.

3. Review and fine-tune your design system

   After creation, your design system is ready for review. You can:

   • Fine-tune any visual aspect to match your exact brand requirements
   • Preview how your emails will look across different clients and screen sizes
   • Make all changes apply automatically to future emails

   For detailed control over specific elements, use the Manual Design Settings.

4. Create on brand emails with AI

   Every email you generate with Brew’s AI automatically uses your selected design system, ensuring brand consistency across all communications.

New emails automatically use your default design system. To apply a different design system to an existing draft, you can make the change directly in the email editor.

Manual Design Settings

While Brew automatically extracts and configures your design system, you can manually fine-tune every aspect to match your brand perfectly. The interface provides granular control over all visual elements:

Quick Compatibility Guide

Some design features have limited support across email clients. Look for the ⚠️ icon throughout these settings.

What works where:

• ⚠️ Hover effects: Supported in Apple Mail and Gmail desktop
• ⚠️ Shadows: Visible in Apple Mail and some webmail clients
• ⚠️ Custom fonts: Display in Apple Mail but not Gmail or Outlook
• Gradients for buttons: Work in most clients including Outlook (rare exceptions use the first color)

Don’t worry! Brew automatically creates optimized fallbacks for all email clients. You control which features to use in your design settings or when creating emails.

Learn more about email client compatibility

Colors

Brew uses color theory to combine colors that work well together in the context of high-performing emails. All colors will appear in your color picker, and Brew automatically creates an extended color palette with lighter and darker variations that maintain harmony while providing visual interest.

Brand Colors
These colors define your visual identity in emails:

• Choose your main brand colors (we recommend 3-7)
• Start with your primary color, which will be used most prominently
• Supporting colors will be used for accents and secondary elements
• Brew automatically creates lighter and darker variations of these colors to give your emails depth and visual interest

Neutral Colors
Balance your brand colors with neutral tones:

• Light Neutral: Usually white or off-white for backgrounds
• Dark Neutral: Usually black or dark gray for text

Gradient Colors
Only CTA buttons support gradients:

• Gradients work in most email clients including Outlook
• For email clients lacking gradient support, the first color will be displayed
• Brew handles all the technical details automatically

You can input exact hex codes for any color or use the color picker to select visually.

If you are not sure how to find the color codes of your brand, you can use a Chrome extension like Eye Dropper and select a few colors from your website or social media profiles.

Fonts

Unfortunately, only a limited set of fonts are recognized by all your customers’ email clients. These are called “Email Safe fonts”. Most companies use Email Safe Fonts, and we recommend you do the same for the most consistent experience. If you’d like to use other fonts, we’ll help you find an appropriate fallback font that will display when your primary font isn’t available.

Font Selection

• Primary Font: Choose your main font for headings and important text
• ⚠️ Custom Fonts: Only some email clients support custom fonts
• Fallback Font: This displays when your primary font isn’t available

Font Styling Controls
For each text element (headings, body text, etc.), you can adjust:

• Font Size: Control text size (measured in pixels)
• Color: Select text color from your brand palette or any custom color
• Line Height: Adjust spacing between lines (percentage of font size)
• Text Style: Apply bold, italic, or underline formatting
• Letter Case: Choose between ALL CAPS, all lowercase, or Title Case

Text Element Types

• Eyebrow Text: Small label text above headings
• Body Text: Main content text styling
• Headings: Different size options for H1-H5 (each with individual settings)
• CTA Links: Styling for clickable text links
  • ⚠️ Fade on hover: Add a slight color transition effect when users hover (only works in email clients that support hover effects)
  • Show arrow: Option to display a right-facing arrow next to link text for better visual indication of clickable elements

Typography Best Practices

• Font Size: 16-18px for body text ensures readability across devices
• Line Height: 140-160% of font size provides comfortable reading (set as a percentage in Brew, not absolute pixels)
• Color: Use darker colors for body text (black or dark gray) and your brand colors for headings or emphasis
• Contrast: Ensure sufficient contrast between text and background colors for accessibility (WCAG recommends at least 4.5:1 for normal text)
• Consistency: Use the same font treatments across emails to build brand recognition

Email Font Compatibility

When selecting fonts, it’s important to understand how different email clients handle typography:

Email Client	Custom Font Support
Apple Mail	Yes
Gmail	No
Outlook	No
Yahoo	No
Samsung Mail	Yes

Learn more about the design limitations of email clients

Email-Safe Fonts

The following fonts are considered “email-safe” because they’re supported by virtually all email clients:

• Arial
• Courier New
• Georgia
• Helvetica
• Lucida
• Tahoma
• Times
• Times New Roman
• Trebuchet MS
• Verdana

While Brew allows you to use custom fonts and we’ll automatically apply appropriate fallbacks, using email-safe fonts ensures the most consistent experience across all devices and email clients.

Body

The body is your email’s main container - think of it as the canvas for your content.

Email Width

• Choose between 600px, 640px, or 680px
• Most brands use 600px for reliable display on all devices
• Wider options (640px, 680px) give more space on larger screens as modern screens have grown bigger

Colors

• Body color: Background for your main content area
• Outside color: Background visible beyond your email’s borders
  • Match these colors for a seamless “wrapped” look
  • Use contrast to create visual separation

Structure

• Roundness: Control the curvature of your email’s corners
• Border: Add visual structure with optional borders
• Padding: Control spacing around your content

Adding roundness to your components can make your design feel softer and more approachable. Hard corners can seem more serious and professional.

Adjust the corner radius to match your brand’s aesthetic—whether you prefer sharp edges or smooth curves.

Buttons

Buttons guide your readers toward specific actions like Get Started, Book a Demo, or Try Free for 30 Days.

Button Types
Brew creates two button styles automatically:

• Primary Buttons: Eye-catching buttons for your main calls-to-action
• Secondary Buttons: More subtle alternatives for secondary actions

Size and Layout

• Width: Choose auto-width (fits the text) or full-width (spans the column)
  • Auto-width buttons adapt to their text content
  • Full-width buttons span the entire column
• Padding: Controls the space inside your buttons (12px works well)

Colors

• Background: The button’s main color
• Text: Color of the button text
• ⚠️ Hover Background: Color when someone hovers their cursor
• ⚠️ Hover Text: Text color on hover

Style

• Border: Add optional borders with custom style and color
• Roundness: Control corners from square to fully rounded
• ⚠️ Shadow: Add depth with optional shadow effects

Button roundness significantly impacts how users perceive your call-to-action. Square corners often convey formality and professionalism, while rounded corners feel more approachable and modern.

⚠️ Hover Transition Effects
Add animation between normal and hover states:

Effect	What it does	Best for
None	Simple color change	Clean, professional look
Fade	Smooth color transition	Most business emails
Grow	Button gets bigger	Drawing attention
Shrink	Button gets smaller	Interactive feel
Float	Button moves up	Subtle emphasis
Bounce	Button bounces	Playful, energetic brands
Rotate	Button rotates	Creative, bold messages

Cards

Cards highlight important content like features or testimonials.

Colors

• Background: Main card color
• Eyebrow: Small text above card headings
• Heading: Title text within cards
• Body text: Main content text
• CTA link: Action links within cards

Structure

• Border: Optional borders to frame your content
• Roundness: Control corner style from square to rounded
• ⚠️ Shadow: Add depth with subtle shadows

Cards work great for highlighting features, testimonials, or product information.

Consistent corner roundness across all elements helps maintain visual harmony in your emails. Match your card roundness with your buttons and email body for a cohesive design language.

Heroes

Hero images are prominent visuals that appear at the top of your emails to make a strong first impression. They’re the first thing your subscribers see and set the tone for your entire message.

Design Options

• Heading color: Style for your main headline
• Body text color: Style for introductory text
• CTA button: Styling for your primary action button
• Background opacity: Control image transparency if using a background image

The human brain processes visual information 60,000 times faster than text. People remember 80% of what they see, compared to just 20% of what they read. A compelling hero image creates a lasting impression.

Quotes

Quotes build credibility by showcasing testimonials.

Visual Style

• Background color: Sets the testimonial block backdrop
• Side color: Accent color for quote borders
• Text color: Color for the testimonial text

Content Elements

• Image placeholder: Space for avatar or company logo
• Attribution: Name, title, and company formatting

Adding testimonials can increase conversion rates by up to 34% in email campaigns.

Signatures

Add a personal touch to your emails with a signature.

Basic Settings

• Enable/disable: Turn signatures on or off
• Signature image: Upload a handwritten signature

Contact Details

• Name: Your name or sender name
• Title & Company: Your position and organization
• Contact info: Phone number and email
• Preview: See how your signature will look

Personal signatures make emails feel more human and can increase engagement.

Header

Your header creates instant brand recognition.

Logo Settings

• Upload: Add your company logo (as a PNG) to make your emails unmistakably yours
• Size: Small, medium, or large
• Alignment: Left, center, or right

Design

• Background color: Color behind your logo
• Include in body: Option to place header inside or outside the main container

If your logo is dark, we recommend adding a light outline around it so it remains visible when your customers are in dark mode.

Footer

The footer contains important legal and contact information.

Content Settings

• Background color: Footer background
• Text color: Color for footer text
• Position: Include inside or outside the main body
• Address: Required for CAN-SPAM compliance
• Additional text: Legal disclaimers or other information

Social Media
Connect with your audience across platforms:

• Size: Small, medium, or large icons
• Style: Light, dark, or branded colors
• Shape: Circle or rounded square
• Platforms: Facebook, Twitter, LinkedIn, etc.

Understanding Email Clients

Email clients vary dramatically in their HTML and CSS support, creating unique challenges for email design. Brew’s AI automatically handles these inconsistencies for you, ensuring your emails look great everywhere without requiring any technical knowledge on your part.

The Email Design Challenge

Different email clients use vastly different rendering engines and have different market shares (shown in parentheses below):

• Apple Mail/iOS Mail (~53%): Uses WebKit rendering (excellent HTML5/CSS3 support)
• Gmail (~30%): Uses its own rendering engine with limited CSS support
• Outlook (~4%): Windows versions use Microsoft Word’s rendering engine (most limited support), while Outlook for Mac uses WebKit (much better support)
• Other major clients (~10%): Yahoo Mail, Google Android, and Samsung Mail offer moderate support with varying capabilities
• Regional and desktop clients (~3%): Thunderbird, Web.de, Orange.fr, and similar platforms typically provide basic to moderate CSS support

Apple Mail commands over 50% of global email opens, with Gmail accounting for approximately 30%. Combined with Outlook’s 4% share, these three clients represent over 85% of all email opens worldwide.

If you’re curious about which specific email features work in different email clients, the Can I Email database is a helpful resource that shows compatibility across Gmail, Apple Mail, Outlook, and others.

Brew’s Solution: Progressive Enhancement

Brew’s AI uses a technique called “progressive enhancement” to ensure emails look great in all email clients. Here’s how it works:

1. Build a solid foundation: Every email starts with a baseline design that works in all clients
2. Add enhancements where configured: Advanced features like hover effects, shadows, and custom fonts are only applied when you’ve added them to your design system, and only for email clients that support them
3. Provide graceful fallbacks: When advanced features aren’t supported, simpler alternatives ensure your message still comes through clearly

While Brew optimizes for all major clients, test your emails with the clients most popular among your specific audience.

This systematic approach means you can confidently use advanced design features, knowing your emails will degrade gracefully and maintain their impact across the entire email client landscape.

Need Help?

Our team is ready to support you at every step of your journey with Brew. Choose the option that works best for you:

Self-Service Tools

Search Documentation

Type in the “Ask any question” search bar at the top left to instantly find relevant documentation pages.

AI Assistant Chat

Click the sparkle ✨ icon next to the “Ask any question” search bar in the top left to chat with our AI assistant that’s been trained on our entire documentation.

ChatGPT/Claude Integration

Click “Open in ChatGPT” at the top right of any page to analyze documentation with ChatGPT or Claude for deeper insights.