breathebatteries.com website design: fonts, colors and UI patterns

Overview

Breathe Batteries presents a visual identity built on clarity, credibility, and technical precision. The design system serves a battery technology company communicating complex scientific innovation to investors, partners, and talent. The aesthetic is deliberately restrained: black text on white grounds, generous whitespace, and large-format photography that puts people and laboratory environments at center stage. There is no decorative excess. Every element supports the narrative of rigorous engineering and environmental purpose.

The system employs three font families with distinct roles: Matter for display headings with an airy, technical lightness; Manrope for body copy and interface elements with neutral readability; and Poppins reserved for specific accent contexts. The color palette is strictly monochrome, relying on photography to introduce warmth and human presence. Component design favors minimal borders, flat surfaces, and clear typographic hierarchy over ornamental treatments. The overall impression is of a company confident enough in its science to let content speak without visual noise.

Colors

The color system is intentionally austere, using only black, white, and a single mid-tone gray. This restraint allows full-bleed photography and partner logos to provide visual variety while maintaining consistent readability and professional tone across all surfaces.

The ink token carries virtually all information density. Headings, body copy, navigation, borders, and interactive outlines all resolve to pure black. This creates maximum contrast against the canvas white that dominates page real estate. The muted gray appears sparingly for de-emphasized content or metadata where full black would create excessive visual weight.

No accent colors appear in the interface itself. Color energy comes entirely from photography: the olive greens of team members' clothing, laboratory equipment tones, and environmental context. This is a deliberate choice that keeps the design system neutral and future-proof while allowing editorial imagery to shift in tone by page or campaign.

Dark sections appear as full-bleed black bands with white text, used for section headers like "Backed by leading climate & technology investors" and "Enabled by pioneering institutes." These inversions create rhythmic contrast in long pages without introducing new hues.

Typography

The typographic system distributes roles across three families, each chosen for specific functional characteristics. Matter provides display presence with geometric precision; Manrope handles all reading and interface text with warm neutrality; Poppins serves as an available accent family though its primary visible use requires verification against live pages.

Matter Light (weight 300) is the defining display voice. Its open apertures and geometric construction convey technical sophistication without heaviness. The negative letter spacing on large sizes prevents looseness at display scale. Manrope Regular provides the workhorse text: highly legible at small sizes, warm enough for long reading, neutral enough to recede behind content. The body leading of 1.6 supports comfortable reading of scientific and biographical content.

Type scale steps are built on a 4px relative unit. Display sizes at 48px and 40px (3rem and 2.5rem) create clear hierarchy. Body sizes at 20px and 16px (1.25rem and 1rem) serve primary and secondary reading needs. The 14px label size (0.875rem) handles interface elements without becoming fragile.

Matter was designed by Martin Vácha and is available from Displaay. Manrope was designed by Mikhail Sharanda. Poppins was designed by Jonny Pinhorn and is available from Indian Type Foundry. Verify licensing for these families before production use.

Layout

The layout system is built on a generous 16px base with 4px micro-units. Sections are separated by substantial vertical whitespace, typically 6rem or more, creating breathing room that reinforces the brand name and the scientific precision of the content. Content is constrained to readable widths with asymmetric placement of imagery.

The team profile pages demonstrate the core layout pattern: a two-column composition with text content on the left and large-format photography on the right. The text column occupies roughly 45% of the width, with the image filling the remaining 55%. This ratio keeps reading comfortable while giving photography dramatic presence. The image extends to or near the viewport edge, creating immersive portraiture that humanizes technical content.

Within the text column, hierarchy is established through size and spacing rather than indentation or rules. The profile name uses section-display size, credentials appear as bold label text, and biographical paragraphs stack with consistent 1.5rem spacing. Social links appear as simple icon marks at the column base, maintaining the clean left edge.

The investor showcase page uses a three-column grid for partner cards. Each card contains a logo, descriptive paragraphs, and an outlined button. Columns are evenly distributed with consistent gutters. The layout adapts the same whitespace principles: ample padding within cards, generous margins between sections, and a full-width black banner header that spans all columns.

Partner logo bars use horizontal distribution with centered alignment. Logos are presented at reduced opacity or monochrome treatment to equalize visual weight across diverse brand marks. The layout prioritizes scanability and trust signaling over dense information presentation.

Visual language

The visual language is defined by subtraction and confidence. There are no gradients, no shadows, no decorative geometric elements. Surfaces are flat. Borders are single-pixel hairlines. Photography is the primary source of visual interest and emotional warmth.

Imagery treatment favors large-scale, natural-light portraiture in authentic environments. Team members are photographed in laboratories, offices, and casual settings rather than against seamless backdrops. This environmental context reinforces the company's applied-science positioning. Photos receive no visible filter treatment; color and contrast appear natural, allowing subject clothing and surroundings to introduce palette variation.

Iconography is minimal and functional. Social links use simple filled circle marks containing platform logos. Navigation and interface elements avoid icon clutter in favor of text labels. The overall icon strategy is to reduce cognitive load and maintain the serious, research-oriented tone.

The black banner headers that introduce partner sections create strong horizontal rhythm. These full-width bars with centered white text function as section breaks and trust signals simultaneously. Their stark contrast against white content areas creates clear information architecture without additional visual elements.

Motion and interaction are implied to be minimal and purposeful. The static presentation suggests transitions would be subtle fades or direct cuts rather than elaborate animations. Any motion would serve content revelation rather than entertainment.

Components

Team profile

The team profile is the most visually distinctive component, combining biographical content with environmental portraiture.

• Anatomy: Name heading, credentials line, multiple body paragraphs, social link icons, and large right-aligned photograph
• Surface and text color: Canvas background with ink text; no card container or border
• Typography: Section-display for name, bold label for credentials, body for biography
• Shape and border: No border, no radius; completely flat presentation
• Spacing: Generous internal padding in text column; photograph fills adjacent space with minimal or no margin
• Composition: Asymmetric two-column with text left, image right; image may extend to viewport edge
• Variants: Header variant uses hero-display centered above profile grid

Investor card

Investor cards present partner information in a contained, scannable format.

• Anatomy: Partner logo, two to three descriptive paragraphs, outlined "Read more" button
• Surface and text color: Canvas background, ink text, no card border
• Typography: Body for descriptions, label for button text
• Shape and border: No card radius; button uses 0.5rem radius with 1px ink outline
• Spacing: Internal padding of approximately 2rem; paragraphs separated by standard body spacing
• Composition: Vertically stacked within equal-width grid column
• Variants: Single-column adaptation for narrow viewports

Outlined button

The primary interactive element is a restrained outlined button.

• Anatomy: Text label centered within rounded rectangle
• Surface and text color: Transparent background, ink text, ink border
• Typography: Label token
• Shape and border: 0.5rem radius, 1px solid ink border
• Spacing: Horizontal padding approximately 1.5rem, vertical padding approximately 0.75rem
• Composition: Left-aligned within parent container or centered in specific contexts
• States: No visible hover state captured; implement with subtle background fill or border weight change

Partner logo bar

Institutional trust is communicated through horizontal logo distribution.

• Anatomy: Black banner header with white text, followed by monochrome logo marks in horizontal arrangement
• Surface and text color: Black banner with white text; white background with grayscale or reduced-opacity logos
• Typography: Label token for banner text
• Shape and border: Full-width banner with no radius; logos presented flat
• Spacing: Generous vertical padding in banner; horizontal distribution of logos with even spacing
• Composition: Centered or evenly distributed horizontal flex layout

Social link icons

Minimal contact links for team profiles.

• Anatomy: Circular filled icon containing platform logo mark
• Surface and text color: Ink fill with white or negative-space logo
• Shape and border: Perfect circle, approximately 2rem diameter
• Spacing: Horizontal arrangement with 1rem gap between icons
• Composition: Left-aligned below biography text

Responsive behavior

The two-column team profile layout should stack vertically on narrow viewports, with the photograph appearing above or below the text content. The three-column investor grid should collapse to single column on mobile, maintaining card internal spacing while allowing full-width presentation. Partner logo bars should wrap to multiple rows or scroll horizontally depending on logo count and viewport constraints.

Typography scales down proportionally: hero-display reduces to section-display size on tablet, and section-display reduces to body-large on mobile. Body text maintains 1rem minimum for readability. The substantial section spacing (6rem) should reduce to 3rem on mobile to prevent excessive scrolling without losing the airy character.

Navigation, if present in full implementations, should collapse to a hamburger menu or simplified horizontal scroll on narrow viewports. The black banner headers remain full-width at all sizes, with text size reducing to maintain comfortable line length.

Practical implementation guidance

### Preserve - The strict monochrome palette; resist adding accent colors that compete with photography - Generous whitespace between sections; this is central to the brand's confident tone - Large, authentic environmental photography with natural color treatment - The asymmetric two-column profile layout with image dominance - Flat surfaces without shadows, gradients, or dimensional effects

### Avoid - Decorative background patterns or textures that undermine the clean aesthetic - Rounded corners on cards and containers; keep edges sharp except for buttons - Heavy drop shadows or elevation systems; the design is intentionally two-dimensional - Small, cramped photography; images need room to create human connection - Multiple font weights within body text; the system uses weight for hierarchy sparingly

### Recommended build order 1. Establish the 4px grid and 16px base with rem scaling 2. Implement Matter Light for display headings and Manrope Regular for body 3. Build the two-column profile layout as the core page template 4. Create the outlined button component with consistent radius and border 5. Add the black banner header pattern for section breaks 6. Implement partner logo bars with grayscale treatment 7. Refine responsive stacking for narrow viewports

### Accessibility - Maintain the strong ink-on-canvas contrast ratio of 21:1 for all body text - Ensure photograph alt text describes environmental context, not just subject appearance - Button outlines should meet minimum 3:1 contrast against adjacent backgrounds - Interactive elements need visible focus states; consider ink fill inversion on focus - Profile content should use semantic heading hierarchy (h1 for name, h2 for sections) - Social icon links require accessible labels describing destination platform

Scope note

This guide covers the team profile, investor showcase, and partner logo surfaces visible in the supplied images. The homepage hero, pricing tables, blog listing, and navigation system are not represented. Measurements are practical adaptation targets derived from visual estimation. Motion, hover states, form components, and mobile-specific layouts require additional research. The Poppins family appears in the source but its visible application in these captured surfaces is not confirmed.

More website design guides

Browse website design guides by pattern and website.