---
title: "2.AG design system"
variant: extended
source: https://2ag.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/2ag-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# 2.AG · Design System

> Clinical clarity with a bright signal of relief.

**Theme:** light · **Industry:** health · **Source:** https://2ag.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A clean, science-led storefront pairs bright white space with deep teal panels and vivid mint-green actions. Product imagery, evidence-led claims, reviews, and ingredient education build a calm, credible shopping journey.

## North star

Keep the storefront bright and evidence-led, using deep teal for focused content panels and mint green only for clear action or emphasis.

## Overview

The visual strategy balances a white, uncluttered storefront with sharply defined dark teal moments. Bright mint green is reserved for high-salience actions and small signals, including the announcement strip, purchase button, and selected benefit tab. Black text carries most of the information hierarchy, while pale gray review cards provide quiet contrast without competing with product imagery. Inter Tight is used throughout, giving headings a clean, contemporary outline and keeping dense product and ingredient copy compact. Layout alternates between centered social-proof moments, split product or editorial panels, and broad full-width sections; generous white gaps keep the long page legible. The hero combines a dark teal text field and scientific body illustration with a bright, laboratory-like product image. Later sections use rounded statistic cards, ingredient tiles, a simple FAQ, and a full-bleed video, maintaining a restrained, evidence-first storefront rather than a decorative beauty aesthetic.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clinical Ink | `#000000` | `--color-clinical-ink` | neutral | Primary headings, body copy, footer text, links, and small review or product details. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header, product detail backgrounds, and reversed text on dark panels or mint buttons. |
| Relief Mint | `#2ecea0` | `--color-relief-mint` | accent | Announcement bar, Add to Cart button, active benefit tab, and selective accent borders. |
| Therapeutic Teal | `#244d54` | `--color-therapeutic-teal` | brand | Hero text panel, proof and results sections, and dark card surfaces. |
| Review Mist | `#f5f5f5` | `--color-review-mist` | surface | Pale testimonial cards and quiet supporting card backgrounds. |
| Soft Charcoal | `#151515` | `--color-soft-charcoal` | semantic | Secondary dark text, offering a slightly softened alternative to primary black. |
| Muted Gray | `#808080` | `--color-muted-gray` | semantic | Muted supporting copy and low-emphasis metadata. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#244d54` (Therapeutic Teal) · `--color-surface-2` → `#f5f5f5` (Review Mist) · `--color-text` → `#000000` (Clinical Ink) · `--color-text-muted` → `#151515` (Soft Charcoal) · `--color-text-subtle` → `#808080` (Muted Gray) · `--color-border` → `#2ecea0` (Relief Mint) · `--color-accent` → `#2ecea0` (Relief Mint) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#244d54` | 2.26:1 | fail |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#151515` | `#244d54` | 1.97:1 | fail |
| `#151515` | `#f5f5f5` | 16.75:1 | AAA |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#244d54` | 2.35:1 | fail |
| `#808080` | `#f5f5f5` | 3.62:1 | AA-large |
| `#2ecea0` | `#ffffff` | 2.01:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Tight | `--font-body` | webfont | 400, 500, 600 | Site-wide headings, product and ingredient copy, navigation, buttons, and supporting text. | Inter |

- **Inter Tight:** Use regular weight for most display and body copy, medium for purchase actions, and semibold for compact utility details; uppercase eyebrow labels use expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.347, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 400 | 1 | 0 | — | Inter Tight | Large hero or statement headings. |
| h1 | 45px | 400 | 1.3 | 0 | — | Inter Tight | Primary hero and page-level heading. |
| h2 | 36px | 400 | 1 | 0 | — | Inter Tight | Major section headings and product titles. |
| h3 | 30px | 400 | 1.6 | 0 | — | Inter Tight | Supporting feature and section headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | Inter Tight | Smaller card or subsection headings. |
| body | 14px | 400 | 1.6 | 0 | — | Inter Tight | Product descriptions, ingredient explanations, and general copy. |
| caption | 12px | 400 | 1.5 | 0.09em | uppercase | Inter Tight | Compact uppercase labels and supporting metadata. |
| button | 45px | 400 | 1.6 | 0 | — | Inter Tight | Purchase and other prominent action labels. |
| link | 16px | 400 | 1.6 | 0 | — | Inter Tight | Navigation, review links, and inline actions. |
| eyebrow | 12px | 400 | 1.5 | 0.09em | uppercase | Inter Tight | Small uppercase section labels, such as Proven Results. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 15, 16, 17, 18, 20, 24, 25, 28, 30, 32, 35, 40 px.
- Section rhythm 35px · element gap 16px · card padding 24px · max content width 1340px.

A long, comfortable-density storefront uses a measured maximum content width of 1340px and a recurring 16px element gap. The top navigation is a slim white row beneath the mint announcement strip. The hero is a two-column split; subsequent content alternates between product detail, centered reviews, three-up stats, editorial splits, full-width teal proof, ingredient tiles, and FAQ. Most sections remain white, so dark bands feel deliberate. Headings generally align left, while review content is centered. Use whitespace to separate modules rather than adding ornamental dividers.

## Shape & elevation

- Radius: button `9999px` · input `5px` · card `12px` · media `20px` · badge `50%` · link `9999px` · xs `5px` · sm `12px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.104, 0.204, 0.492, 1)` on interactive elements.

The interface is mostly flat: white canvas sections, fine borders, and restrained rounded corners define structure instead of shadows. Product and review cards use soft backgrounds or subtle outlines. Dark teal cards stand apart through contrast, while media framing and pill-shaped controls provide the main dimensional cues.

## Imagery

Mix clean product photography with science-coded visuals: the hero pairs a glowing anatomical wireframe with a close product image against a bubble-like laboratory backdrop. Product packaging is shown in a bright, neutral setting. Later modules include customer video, ingredient imagery, a skin-focused detail image, and a full-bleed video panel. Keep imagery crisp and restrained; photographic colors inside assets should not redefine the interface palette.

## Components

### Announcement and navigation

Mint shipping strip above a white header with the wordmark, Shop, Science, Contact, and compact account and bag icons.

### Hero split

Deep teal copy panel with a large white heading and outlined pill action beside a bright, scientific product image.

### Product detail card

Outlined rounded panel pairs product photography with title, review count, potency details, short copy, expandable benefit rows, size choices, quantity, and mint purchase action.

### Review carousel

Centered community heading and review/video tiles; pale gray cards frame brief quotes, with customer video among the testimonials.

### Proof statistic cards

Three dark teal rounded cards present oversized numeric proof with compact explanatory copy along the lower edge.

### Tabbed results panel

Full-width teal split panel combines a small eyebrow, heading, outlined body-area tabs, supporting copy, and large media.

### FAQ accordion

Two-column heading and a right-side list of questions separated by fine horizontal rules, each with a plus control.

### Ingredient tiles

Four aligned ingredient entries pair square imagery with concise titles and compact explanatory copy.

### Measured component styles

- **Primary button** (“Add to Cart”): background #2ecea0 · text #ffffff · border 1px solid #2ecea0 · radius 50px · padding 7px 30px · 500 16px Inter Tight
- **Secondary button** (“Skin”): transparent background · text #ffffff · border 1px solid #ffffff · radius 30px · padding 10px 16px · 500 16px Inter Tight
- **Link** (“"THIS CREAM IS AMAZING" - WHITNEY B”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px Inter Tight
- **Input**: transparent background · text #000000 · border 1px solid #244d54 · radius 5px · padding 12px 40px 12px 17px · 400 16px Inter Tight
- **Card** (“"This cream is amazing..." WHITNEY B VER”): background #f5f5f5 · text #000000 · radius 12px · padding 24px · 400 18px Inter Tight
- **Badge** (“0”): background #000000 · text #ffffff · radius 50% · padding 0px · 600 10px Inter Tight

## Do

- Keep most page surfaces white.
- Reserve mint for prominent actions and selected states.
- Use deep teal for focused proof or hero panels.
- Keep product copy compact and easy to scan.
- Use real product and ingredient imagery.
- Separate long sections with generous white space.

## Don't

- Do not turn every section into a dark band.
- Do not use mint as a large decorative background.
- Do not add heavy shadows to flat cards.
- Do not let illustrations set the interface palette.
- Do not crowd product information into a single text block.
- Do not replace clear dividers with decorative effects.

## Agent prompt

Build a new health-commerce page in the 2.AG visual style. Use Gallery White (#ffffff) as the main canvas, Clinical Ink (#000000) for primary copy, and Therapeutic Teal (#244d54) for selected hero, results, or proof panels. Apply Relief Mint (#2ecea0) sparingly to primary actions and active states. Use Inter Tight throughout, with clean regular-weight headings and compact, legible supporting text. Structure content as spacious, mostly white sections with clear split layouts, product or ingredient photography, evidence-led cards, and fine dividers. Keep surfaces flat and shadows minimal; use rounded cards and pill actions only where they clarify component roles. Prioritize readable product details, authentic reviews, clear purchase controls, and an uncluttered FAQ. Do not introduce extra colors or visual effects that compete with the measured palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column split with dark teal copy on the left and product science imagery on the right. | Primary relief action, Scientific product introduction | Deep teal text panel, Large white heading, Outlined pill action |
| 2 | product-detail | Introductory heading above a wide split product card with image left and purchase details right. | Review proof, Variant selection, Quantity control, Add to Cart | Rounded outlined card, Compact product copy, Mint purchase button |
| 3 | testimonials | Centered heading above a horizontal row of review and customer video tiles. | Social proof, Customer video | Pale gray review cards, Centered ratings, Embedded video tile |
| 4 | stats | Three dark teal statistic cards arranged in a row. | Evidence-led proof, Quick metric scanning | Rounded teal cards, Oversized figures, Small supporting captions |
| 5 | feature-split | Two-column editorial section with a pale feature panel and supporting media or copy. | Problem framing, Formulation explanation | Large left-aligned heading, Soft neutral panel, Supporting paragraph |
| 6 | feature-split | Alternating image-and-copy split with supporting benefit details and accordion rows. | Ingredient safety context, Expandable benefits | Skin-focused image, Fine accordion rules, Left-aligned heading |
| 7 | feature-split | Full-width deep teal split panel with controls and copy left and large media right. | Body-area selection, Benefit-specific content | Outlined pill tabs, Mint active tab, Large rounded media |
| 8 | feature-grid | Left-aligned heading followed by four ingredient tiles in a row. | Ingredient education, Purity and function details | Square ingredient images, Compact tile headings, Short explanatory copy |
| 9 | faq | Two-column layout with a left heading and right-side accordion list. | Expandable answers, Question-led browsing | Fine horizontal dividers, Plus controls, Left-aligned title |
| 10 | video | Full-bleed wide video block. | Immersive brand storytelling | Edge-to-edge media, Dark photographic treatment |
| 11 | footer | Multi-column footer with references, navigation, contact, newsletter form, and legal copy. | Newsletter signup, Policy and contact navigation | Compact text columns, Email input, Fine print |

## Source CSS custom properties (selected)

```css
--font-body-scale: 1.0;
--font-body-line-height-scale: 1.0;
--font-body-letter-spacing: 0.0em;
--font-body-medium-weight: 500;
--font-body-bold-weight: 600;
--font-announcement-scale: 1.0;
--font-heading-scale: 1.0;
--font-heading-line-height-scale: 1.0;
--font-heading-letter-spacing: 0.0em;
--font-navigation-scale: 1.0;
--navigation-item-spacing: 15px;
--font-product-title-scale: 1.0;
--font-product-title-line-height-scale: 1.0;
--button-letter-spacing: 0.02em;
--bg-body: #ffffff;
--bg-body-rgb: 255,255,255;
--bg-body-darken: #F0F1F2;
--payment-terms-background-color: #ffffff;
--color-body: #000000;
--color-body-rgb: 0,0,0;
--color-accent: #244d54;
--color-accent-rgb: 36,77,84;
--color-border: #ffffff;
--color-form-border: #ffffff;
--color-overlay-rgb: 0,0,0;
--shopify-accelerated-checkout-skeleton-animation-duration: 0.25s;
--color-announcement-bar-text: #ffffff;
--color-announcement-bar-bg: #2ecea0;
--color-header-bg: #ffffff;
--color-header-bg-rgb: 255,255,255;
--color-header-text: #000000;
--color-header-text-rgb: 0,0,0;
--color-header-links: #000000;
--color-header-links-rgb: 0,0,0;
--color-header-links-hover: #000000;
--color-header-icons: #000000;
--color-header-border: #E2E2E2;
--solid-button-background: #2ecea0;
--button-border-radius: 50px;
--shopify-accelerated-checkout-button-border-radius: 50px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/2ag-com