Configure Brand
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?
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:
- Technical fragmentation — With dozens of email clients (Apple Mail, Gmail, Outlook) interpreting code differently, designing emails that look consistent everywhere requires complex technical solutions.
- Brand inconsistency — Without a design system, emails created by different team members often have varying styles, colors, and layouts, diluting your brand identity.
- Design inefficiency — Starting each email design from scratch wastes time and creates unnecessary variation.
- 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
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
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 GuideSome 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)
Colors
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:
Balance your brand colors with neutral tones:
Only CTA buttons support gradients:
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
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
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
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
For each text element (headings, body text, etc.), you can adjust:
Email Font Compatibility
When selecting fonts, it’s important to understand how different email clients handle typography:
Learn more about the design limitations of email clientsEmail-Safe Fonts
The following fonts are considered “email-safe” because they’re supported by virtually all email clients:
- 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
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
- 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
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 |
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
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
- 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
- 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
Cards
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
- 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
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
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
- 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
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
- 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
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
- 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
Footer
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.
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:- Build a solid foundation: Every email starts with a baseline design that works in all clients
- 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
- 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.
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: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.