# How drinkag1.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/drinkag1.com-design)

Last updated: 2026-08-08

## Captured pages

[![Black review wall with tall portrait cards and white testimonial copy](https://pin.fontofweb.com/6222?format=jpg)](https://design.withfudge.com/share/pin-6222)

[Black review wall with tall portrait cards and white testimonial copy](https://design.withfudge.com/share/pin-6222)

[![Deep green ingredient chapter with frosted cards and large section heading](https://pin.fontofweb.com/6221?format=jpg)](https://design.withfudge.com/share/pin-6221)

[Deep green ingredient chapter with frosted cards and large section heading](https://design.withfudge.com/share/pin-6221)

[![White clinical proof section with large text, body diagram, and dark callout](https://pin.fontofweb.com/6220?format=jpg)](https://design.withfudge.com/share/pin-6220)

[White clinical proof section with large text, body diagram, and dark callout](https://design.withfudge.com/share/pin-6220)

[![Sparse get-started page with white space, logo bar, and pill action](https://pin.fontofweb.com/6217?format=jpg)](https://design.withfudge.com/share/pin-6217)

[Sparse get-started page with white space, logo bar, and pill action](https://design.withfudge.com/share/pin-6217)

## Overview

AG1’s design system is a premium wellness ecommerce language that keeps the interface severe and calm while product imagery carries the sensory load. The page is built from a black-and-white chrome, deep green chapter panels, and large photo-led cards. The wordmark, navigation, and purchase controls stay minimal; the sections below do the persuasion through scale, contrast, and product proof.

The page rhythm alternates between dark review walls, white proof areas, green ingredient blocks, and sparse get-started panels. Rather than stacking many competing accents, the site repeats one green action color, one neutral text color, and one pill shape so the whole experience reads as a single system across the homepage and the partner flow.

The visual voice is direct and health-focused, but not soft or decorative. It leans on large headings, compact labels, strong numerals, and crisp product photography. That combination makes the site feel clinical enough to suggest rigor, yet editorial enough to stay premium.

## Colors

| token | hex | use |
|---|---|---|
| action | #0C3D3D | Filled CTAs, active nav cues, and deep green chapter surfaces |
| ink | #000000 | Primary copy on white backgrounds and the black review wall |
| muted-ink | #3D3D3D | Secondary copy, small disclaimers, and dark card text |
| canvas | #FFFFFF | Page background, card fields, and bright negative space |
| surface-dark | #000000 | Testimonial strip, review rail backdrop, and utility gutters |
| surface-deep | #0C3D3D | Ingredient chapter backgrounds and proof callouts |
| on-dark | #FFFFFF | Type and icons on dark green or black surfaces |
| border | #3D3D3D | Thin dividers, outline buttons, and card edges |

The palette is intentionally small. White leads on most sections, black carries the strongest copy, deep green marks the product chapters, and dark gray softens supporting text so the page never drifts into a washed-out middle. The interface does not rely on a broad rainbow of wellness accents. Instead, the product imagery supplies natural greens, creams, and skin tones while the UI stays disciplined. Dark sections use white text and white iconography for clarity; light sections keep black text and a thin border language. The same green can function as action, section ground, or a quiet proof panel, which keeps the system cohesive even as the background changes.

## Typography

The page uses one material family across display, navigation, body, and legal copy. It behaves like a contemporary grotesk with a strong, utilitarian voice and tight spacing. Use regular for long copy, medium for utility and buttons, and bold for major headlines and numbers. Verify licensing for this family before production use.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 3.5rem | 700 | 0.95 | -0.03em | Largest claims and opening statements |
| section-display | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 2.75rem | 700 | 1 | -0.03em | Chapter headings and proof statements |
| card-title | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 1.75rem | 700 | 1 | -0.02em | Ingredient card titles and strong card labels |
| body | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 1rem | 400 | 1.5 | 0em | Explanatory copy, testimonials, and short paragraphs |
| body-medium | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 1rem | 500 | 1.5 | 0em | Button text, emphasized copy, and quiet subheads |
| navigation | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 0.875rem | 500 | 1.2 | 0.04em | Top navigation, utility links, and small product tabs |
| label | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 0.75rem | 700 | 1.1 | 0.08em | Uppercase section tags, ratings, and small overlines |
| legal-copy | By Johannes Breyer Fabian Harb Elias Hanzer Renan Rosatti Erkin Karamemet | 0.75rem | 400 | 1.4 | 0em | Footnotes, fine print, and support text |

The hierarchy depends on scale, weight, and line length rather than multiple families. Headlines are large and direct. Labels are small, often uppercase, and slightly open in tracking so they stay legible against dense photography or dark fields. The body copy remains compact and controlled, which keeps the page from becoming verbose even when it explains ingredients, research, or membership terms. Numerals are part of the voice: big percentages and short claims appear as visual anchors, not as a separate chart style.

## Layout

The desktop layout uses wide gutters and a strong left-right structure. Most major sections are full-bleed bands, but the readable content sits in a contained column or in evenly spaced cards. This makes the page feel broad without becoming loose. White sections create breathing room between the darker chapters, and the layout uses that pause to reset the eye before the next dense group of product content.

The testimonial chapter is the most horizontal. It places a large heading above or beside a long rail of tall portrait cards, then uses arrow controls to suggest more items in the sequence. The cards are aligned tightly enough to feel intentional, but the section still reads as a gallery rather than a grid. The black ground turns the review images into luminous rectangles and gives the white copy strong separation.

The ingredient chapter flips the mood. A deep green section background supports a wide headline and two pill controls, then a row of frosted ingredient cards stretches across the page. Each card keeps the same top-to-bottom rhythm: image first, then title, then a compact explanatory block. This repeated structure makes a complex ingredient list feel orderly and scannable.

The proof section is the most editorial. A large statement sits to the left, while a diagram and numeric comparison occupy the right half. A dark green note box anchors the lower portion of the composition.

The white product and get-started screens are simpler still. They rely on the logo bar, a small set of links, and one obvious action. When the page needs to feel calmer, it removes visual noise instead of compressing the content. The result is a long marketing system that can move from sparse to dense without changing its fundamental structure.

## Visual language

AG1 mixes proof-oriented wellness with polished ecommerce photography. People drinking the product, ingredient close-ups, and simplified body diagrams all appear beside strong claims and product details. The imagery is not treated as background decoration. It is framed, cropped, and sequenced like a set of product cards, which keeps the page useful as well as aspirational.

Color and structure do most of the branding work. Black sections feel authoritative and endorsement-driven. Green sections feel product-heavy and ingredient-focused. White sections feel explanatory and clinical. Because the same family, button shape, and spacing rhythm recur in all three modes, the page stays coherent even when the surface color changes dramatically.

The shapes are restrained. Buttons use a full pill. Cards use small radii. Large sections remain mostly rectangular, which suits the site’s direct tone. There is very little ornamental curvature outside the CTA treatment, so the green chapter cards and the review tiles become the main surfaces for visual interest. Shadows stay light or absent; depth comes from spacing, contrast, and image framing rather than layered elevation.

Uppercase micro labels, small caps-style utility text, and compact captions add precision. They help the page feel technical without becoming dense. That balance is important to the brand: the system needs to support trust, product detail, and commerce at the same time, and it does so by keeping the visual language disciplined.

## Components

### Header bar

**Anatomy:** Wordmark at left, centered or right-aligned navigation, utility icons, and a single pill action.  
**Surface:** White background with a thin divider at the edge of the bar.  
**Typography:** Navigation uses the `navigation` token, while small badges and tags use `label`.  
**Shape:** The main action uses the full `pill` radius; utility icons remain square and minimal.  
**Spacing:** The bar keeps generous side padding and fairly open spacing between links so the top of the page feels calm.  
**Composition:** The wordmark is the anchor, the links are secondary, and the action is the strongest element.  
**Visible states:** An active item can use the green underline treatment, while the main action can swap between filled and outline forms.

### Review rail

**Anatomy:** Small rating line, oversized headline, a row of portrait cards, and next/previous arrows.  
**Surface:** Black ground with tall dark cards that let the photography and white text pop.  
**Typography:** The headline belongs in `section-display` or `hero-display` depending on width; names and small notes fit `body` and `label`.  
**Shape:** Cards use the `panel` radius and read as tall, vertical tiles.  
**Spacing:** Keep equal gaps between cards and leave generous air above the rail so the headline stays dominant.  
**Composition:** The headline starts the story, the cards continue it, and the arrows sit outside the reading path.  
**Visible states:** The carousel controls are simple line icons; the card bottoms use darker overlays so the text remains legible.

### Ingredient chapter

**Anatomy:** Section title, paired pill buttons, and a long row of ingredient cards.  
**Surface:** Deep green background with pale card surfaces and bright ingredient photography.  
**Typography:** Use `section-display` for the title, `card-title` for each ingredient heading, and `body` for the explanatory paragraph.  
**Shape:** The action buttons stay pill-shaped; the cards keep light rounding and a flat, premium feel.  
**Spacing:** Cards need even horizontal separation and a compact internal rhythm from image to title to body text.  
**Composition:** The section works best when the headline and actions occupy one row and the cards form a second, continuous band below.  
**Visible states:** One button appears filled and the other outlined, which creates a clear primary and secondary choice without adding another color.

### Proof panel

**Anatomy:** Left-aligned label and claim, right-side comparison diagram, and a dark green supporting note.  
**Surface:** White canvas with a strong contrast note box near the bottom.  
**Typography:** The claim uses `section-display`; the label uses `label`; the supporting note uses `body` or `legal-copy` depending on length.  
**Shape:** The note box is rectangular with modest rounding, which keeps the section serious and factual.  
**Spacing:** Leave a large open field around the diagram so the comparison numbers stay easy to read.  
**Composition:** The left side explains the idea, the right side shows the comparison, and the bottom box answers why the section matters.  
**Visible states:** The numeric emphasis is part of the illustration language, not a separate chart module.

### Get-started strip

**Anatomy:** Wordmark, short link set, one dominant CTA, and a sparse product or content strip below.  
**Surface:** White, with very little visual noise.  
**Typography:** Navigation remains small; the CTA keeps `body-medium`; the supporting links can remain in `navigation`.  
**Shape:** The CTA keeps the pill radius so it stands apart from the smaller links.  
**Spacing:** Large outer margins and open whitespace create a restrained, high-end landing feel.  
**Composition:** The page should feel ready to move into commerce without crowding the header area.  
**Visible states:** A small green tag or underline can mark the active area, but the system should stay quiet overall.

## Responsive behavior

On smaller screens, the long horizontal card rails should collapse to swipeable stacks or single-column tiles while preserving the order of information: heading first, action second, imagery third, and details last. The pill buttons should keep their shape, but their horizontal padding can tighten slightly so they do not crowd the viewport. Large proof numbers should scale down before line length becomes cramped.

The black review chapter and the deep green ingredient chapter should remain distinct on mobile through their surface colors, not through extra borders or shadows. When the navigation space tightens, the top bar should reduce to the wordmark, the main action, and a simpler utility cluster. Secondary links can wrap or move into a compact menu, but the primary action should remain obvious.

The white proof section needs the most care on small screens because it combines a large statement, a diagram, and a callout. Stack those pieces in a clear order and keep the numbers close to their labels. If the comparison diagram becomes too narrow, let the text lead and place the visual below it rather than compressing both into a cramped side-by-side layout.

## Practical implementation guidance

### Preserve

- Keep the interface monochrome at the chrome level and use deep green as the recurring brand chapter color.
- Use large headlines, small labels, and compact body text instead of introducing a second display family.
- Keep the pill CTA shape consistent across the header, ingredient chapter, and get-started areas.
- Let photography, ingredient close-ups, and comparison diagrams do the storytelling work.
- Preserve the contrast between black endorsement sections, green ingredient sections, and white proof sections.

### Avoid

- Avoid adding extra accent colors that compete with the existing deep green.
- Avoid soft pastel wellness styling; this system feels stricter and more product-oriented.
- Avoid tiny corner radii on major actions, or the buttons will lose their clear CTA presence.
- Avoid heavy shadows, glossy effects, or decorative borders that make the cards feel less premium.
- Avoid turning every section into a boxed module; the open white space is part of the system.

### Recommended build order

1. Define the color, type, radius, and spacing tokens first so the system stays consistent.
2. Build the header bar and pill actions.
3. Build the review rail on the black surface.
4. Build the ingredient chapter with the deep green ground and card grid.
5. Build the proof section with the diagram and supporting note box.
6. Add the get-started strip and smaller utility states.
7. Tighten responsive stacking after the desktop hierarchy is stable.

### Accessibility

- Keep white copy on black and green surfaces at a contrast level that remains readable in bright light.
- Give the pill actions a visible focus ring so keyboard users can see the active control.
- Use alt text that names the person, ingredient, or product shown in each image.
- Do not rely on color alone to indicate the current navigation item; pair color with underline or weight.
- Keep line lengths short for the largest headings so the text does not become hard to scan on narrow screens.

## Scope note

This guide covers the desktop homepage and adjacent get-started marketing view shown in the supplied screens: header, review rail, ingredient chapter, proof section, and product promotion blocks. It does not define mobile breakpoints, animation, checkout steps, or packaging art beyond what appears there.

## Related design patterns

- [Primary text color](/share/designs-with-color.role.text_primary)
- [Secondary text color](/share/designs-with-color.role.text_secondary)
- [Food and beverage](/share/designs-with-industry.food_beverage)
- [Healthcare and wellness](/share/designs-with-industry.healthcare_wellness)
- [Ecommerce store](/share/designs-with-offering.ecommerce_store)
- [Physical product](/share/designs-with-offering.physical_product)
- [Neutral hue](/share/designs-with-color.hue.neutral)
- [Teal hue](/share/designs-with-color.hue.teal)

## More website design guides

[Browse website design guides by pattern and website](/design-guides).