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

# Maono · Design System

> Clean audio commerce with vivid product focus

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.maono.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._

Maono’s homepage pairs a bright, restrained storefront with bold product imagery and focused product discovery. Black typography and occasional warm yellow accents provide structure without competing with the microphones, mixers, and creator photography.

## North star

Keep the storefront white and typographically crisp, letting large, authentic audio-product imagery lead each section.

## Overview

The page uses a white canvas to keep a long sequence of retail sections visually light, with black headings and navigation providing clear contrast. Pale gray product cards and occasional black media areas create shifts in tone without introducing heavy decorative styling. Warm amber and yellow are reserved for the logo, selected CTAs, and collaboration cards; they punctuate rather than dominate the mostly monochrome storefront. Inter is used throughout, with bold centered section headings and compact, medium-weight navigation and buttons. The layout alternates full-bleed campaign media with centered product grids, image-led interest cards, editorial split content, proof points, and review panels. Generous section gaps separate these modules, while rounded cards and pill-shaped controls soften the otherwise clean geometry. Product photography and creator videos carry most of the visual character, so UI chrome stays quiet and consistent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, navigation, body text, dark buttons, and the inverse footer surface. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light cards, badges, and text on dark promotional controls. |
| Soft Fog | `#f5f5f5` | `--color-soft-fog` | surface | Featured-product cards, light controls, and subtle alternate card surfaces. |
| Maono Amber | `#f5b335` | `--color-maono-amber` | brand | Warm collaboration cards, footer details, and prominent brand accent. |
| Signal Yellow | `#ffca28` | `--color-signal-yellow` | accent | Highlighted Learn More buttons and small, high-visibility interface accents. |
| Slate Gray | `#6b7280` | `--color-slate-gray` | semantic | Muted supporting copy and subdued input text or borders. |
| Footer Rule | `#1a1a1a` | `--color-footer-rule` | neutral | Thin separators and hairlines, especially in the dark footer. |
| Footer Mist | `#99a1af` | `--color-footer-mist` | semantic | Secondary muted footer text. |
| Charcoal Line | `#262626` | `--color-charcoal-line` | neutral | Subtle dark borders and dividers, primarily in the footer. |
| Graphite Copy | `#525252` | `--color-graphite-copy` | neutral | Occasional secondary text within supporting content. |
| Deep Heading | `#111827` | `--color-deep-heading` | neutral | Rare heading color variation; not a defining brand surface. |
| Muted Graphite | `#4a5565` | `--color-muted-graphite` | neutral | Occasional supporting copy; secondary to black and Slate Gray. |
| Pale Divider | `#d1d5dc` | `--color-pale-divider` | neutral | Subtle footer text or divider detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Fog) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#6b7280` (Slate Gray) · `--color-text-subtle` → `#99a1af` (Footer Mist) · `--color-border` → `#1a1a1a` (Footer Rule) · `--color-accent` → `#ffca28` (Signal Yellow) · `--color-accent-2` → `#f5b335` (Maono Amber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#6b7280` | `#ffffff` | 4.83:1 | AA |
| `#6b7280` | `#f5f5f5` | 4.43:1 | AA-large |
| `#6b7280` | `#000000` | 4.34:1 | AA-large |
| `#99a1af` | `#ffffff` | 2.6:1 | fail |
| `#99a1af` | `#f5f5f5` | 2.39:1 | fail |
| `#99a1af` | `#000000` | 8.07:1 | AAA |
| `#ffca28` | `#ffffff` | 1.53:1 | fail |
| `#ffca28` | `#f5f5f5` | 1.4:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500, 600 | Site-wide headings, body copy, navigation, buttons, product cards, and footer. | Inter |

- **Inter:** Neutral sans-serif throughout; bold section headings contrast with regular copy and medium-weight compact controls.

### Type scale — Minor Third (ratio ≈ 1.221, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1.25 | 0 | — | Inter | Large bold campaign headline in the hero. |
| h2 | 36px | 700 | 1.11 | 0 | — | Inter | Bold headings for major storefront sections. |
| h3 | 30px | 700 | 1.2 | 0 | — | Inter | Product and editorial subsection headings. |
| h4 | 24px | 700 | 1.25 | 0 | — | Inter | Compact card titles and lower-level content headings. |
| body | 18px | 400 | 1.56 | 0 | — | Inter | Product descriptions and supporting editorial copy. |
| caption | 16px | 400 | 1.63 | 0 | — | Inter | Small labels, badges, and secondary explanatory text. |
| button | 14px | 500 | 1.14 | 0 | — | Inter | Medium-weight CTA labels and purchase actions. |
| nav | 14px | 500 | 1.43 | 0 | — | Inter | Compact medium-weight primary navigation links. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Supporting links in cards, content, and footer. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 48, 60, 72, 176 px.
- Section rhythm 72px · element gap 8px · card padding 60px · max content width 1088px.

The header anchors a broad, centered storefront, followed by a full-bleed campaign hero and modular sections. Content shifts between centered product grids, image-led category cards, split editorial layouts, horizontally browsable proof and review panels, and a multi-column footer. The measured page max width is 1088px, with a comfortable density and a measured 72px section gap. Headings tend to center over grids, while editorial copy aligns to its image or column. Large media areas provide contrast against the otherwise white page.

## Shape & elevation

- Radius: button `50%` · input `6px` · card `24px` · badge `4px` · link `16px` · xs `4px` · sm `6px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 4px 20px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Cards are mostly flat, with pale gray fills and occasional subtle shadows rather than strong outlines. Measured card corners are generously rounded, and controls use pill-like shapes. Hairline separators appear more in the footer than in the bright content sections. Dark media panels and the black footer supply the strongest depth contrast.

## Imagery

Large product photography and campaign videos dominate the page, showing microphones, mixers, accessories, and creators using equipment. Images are often presented as wide campaign panels or rounded card crops; category tiles use portrait photography. Product images remain clean and prominent, while interface overlays—badges, carousel controls, and CTA buttons—stay restrained. Editorial proof cards incorporate partner logos and award imagery.

## Components

### Primary navigation

White horizontal header with the warm Maono wordmark, compact Inter links, and utility icons for search, account, locale, and cart.

### Campaign hero

Full-bleed media carousel with oversized product imagery, high-contrast campaign copy, a CTA, and simple slide controls.

### Featured product cards

Centered product selector above a multi-column row of #f5f5f5 cards, with product image, concise specs, and purchase actions.

### Interest tiles

Four portrait creator-image cards for content creation, podcasting, gaming, and streaming, with rounded image crops and overlaid labels.

### Proof and review panels

Editorial credibility sections combine awards, press logos, partner metrics, and review quotes in light, image-led layouts.

### Collaboration cards

Three rounded CTA panels; warm #f5b335 fills alternate with a pale neutral card, with centered copy and compact actions.

### Dark footer

Black multi-column footer with compact link lists, muted text, newsletter input, social icons, and a fine divider.

### Measured component styles

- **Primary button** (“Page 1”): background #b2b2b2 · text #000000 · radius 3.35544e+07px · padding 0px · 400 16px Inter
- **Secondary button** (“Learn More”): background #ffca28 · text #ffffff · radius 3.35544e+07px · padding 12px 24px · 500 14px Inter
- **Link** (“Maono”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Input**: background #0d0d0d · text #ffffff · border 1px solid #6a7282 · radius 6px · padding 14px 12px · 400 16px Inter
- **Card** (“It’s a versatile and durable thing (it h”): background #f5f5f5 · text #000000 · radius 24px · padding 60px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Noise Cancellation”): background #ffffff · text #000000 · radius 4px · padding 4px · 400 12px Inter
- **Navigation item** (“Product PD500W Hybrid Solution Support S”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use white as the dominant page canvas.
- Use black Inter typography for clear hierarchy.
- Let product photography and creator video lead.
- Reserve #f5b335 and #ffca28 for selective emphasis.
- Separate major content modules with generous whitespace.
- Use pale gray rounded cards for product browsing.

## Don't

- Do not let accent yellow overwhelm the page.
- Do not add gradients absent from the measured design.
- Do not use decorative display fonts or all-caps body copy.
- Do not frame every section with strong borders.
- Do not crowd product imagery with extra interface decoration.
- Do not replace the bright storefront with dark section bands.

## Agent prompt

Build a new Maono-style storefront page with a bright, product-first retail aesthetic. Use Gallery White (#ffffff) as the main canvas, Studio Ink (#000000) for navigation and strong text, and Soft Fog (#f5f5f5) for quiet product-card surfaces. Apply Maono Amber (#f5b335) and Signal Yellow (#ffca28) sparingly to brand accents and key actions. Use Inter throughout, with bold headings, compact medium-weight controls, and readable supporting copy. Structure content in a centered, comfortable-width layout with generous gaps: combine campaign media, product cards, creator imagery, editorial proof, and a dark footer. Keep imagery large and authentic; keep borders and shadows subtle, corners rounded, and controls simple. Avoid gradients, excessive decoration, or dense text-heavy layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign carousel below the navigation. | slideshow controls, multiple campaign slides | large product media, high-contrast copy, CTA button |
| 2 | product-grid | Centered heading and category selector above product cards. | category tabs, product browsing, purchase actions | pale gray cards, rounded surfaces, product imagery |
| 3 | category-nav | Centered heading above four image-led category tiles. | interest-based discovery, category navigation | portrait creator photos, rounded image cards, overlaid labels |
| 4 | feature-split | Large video or image paired with a copy column. | brand storytelling, Learn More action | media-led split, short editorial copy |
| 5 | feature-grid | Centered heading above a horizontally browsable set of reason cards. | carousel browsing, multiple proof points | editorial cards, award imagery, press logos |
| 6 | stats | Centered heading above four evenly distributed metrics. | credibility metrics, partner proof | simple icons, large numerals, compact captions |
| 7 | gallery | Horizontal set of large media cards with a short centered caption. | video browsing, product-in-use discovery | large image cards, creator demonstrations |
| 8 | testimonials | Centered title, press logos, and a horizontally browsable quote panel. | review carousel, press credibility | light testimonial card, logo row, carousel controls |
| 9 | cta | Three horizontally aligned action cards. | affiliate signup, contact support, software download | centered copy, rounded cards, warm accent fills |
| 10 | footer | Dark multi-column footer with newsletter area and lower utility row. | site-wide navigation, newsletter signup, social links | black background, muted link columns, thin separators |

## Source CSS custom properties (selected)

```css
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
--kl-reviews-color-light-gray: #e9e9eb;
```

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