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

# GlossGenius · Design System

> Polished editorial calm with a bright business-minded edge

**Theme:** light · **Industry:** saas · **Source:** https://glossgenius.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._

GlossGenius pairs a quiet, editorial interface with confident lime accents and rich salon photography. The homepage moves from an immersive video hero into product storytelling, proof points, customer stories, and clear conversion prompts.

## North star

Pair editorial-scale typography and authentic beauty-business imagery with calm pale surfaces, reserving lime for decisive actions.

## Overview

The visual system balances warm editorial typography with a fresh, pale green-tinted surface. White is the main canvas, while #f0f7f6 marks long feature bands, metric areas, review cards, and the switching callout. Near-black #17150e anchors text, dark testimonial cards, FAQ, and a dramatic closing CTA. Lime #cccc25 is reserved for high-attention actions and the large closing gradient, which softens through #cacd78; greens such as #9ac196 and #aec7b0 appear in supporting gradients rather than as dominant interface colours. Basel Classic Book gives large headings a graceful display character; Basel Grotesk Book keeps navigation and body copy direct. The page alternates wide, airy sections with dense proof and feature cards. Full-bleed business footage and product imagery provide warmth and context, while rounded controls and restrained borders keep the interface approachable rather than glossy or heavily elevated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Mist Mint | `#f0f7f6` | `--color-mist-mint` | surface | Pale tinted surface for revenue metrics, feature bands, review cards, and switching callout. |
| Soft Ink | `#17150e` | `--color-soft-ink` | brand | Primary text, dark testimonial cards, inverse FAQ section, and dark CTA controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation backdrop, white feature sections, and light buttons. |
| Olive Charcoal | `#45443e` | `--color-olive-charcoal` | neutral | Measured hairline and border colour; keep borders subtle against light surfaces. |
| Signal Lime | `#cccc25` | `--color-signal-lime` | accent | High-attention demo button and opening colour of the closing CTA gradient. |
| Quiet Stone | `#e7e7e6` | `--color-quiet-stone` | neutral | Supporting pale gradient stop and incidental low-contrast section detail. |
| Lime Sage | `#cacd78` | `--color-lime-sage` | accent | Softens the lime CTA gradient and appears in supporting gradient treatments. |
| Garden Green | `#9ac196` | `--color-garden-green` | accent | Supporting green gradient stop; use as decorative color rather than a core text color. |
| Sage Haze | `#aec7b0` | `--color-sage-haze` | neutral | Pale green gradient partner for decorative or media-adjacent treatments. |
| Cloud Slate | `#c7cfd1` | `--color-cloud-slate` | neutral | Muted cool gradient detail, not a defining page surface. |
| Muted Iris | `#807a9f` | `--color-muted-iris` | semantic | Incidental gradient colour; keep confined to supporting visual or illustration detail. |
| Hushed Periwinkle | `#a3a4b8` | `--color-hushed-periwinkle` | semantic | Incidental gradient colour, not a core interface or brand surface. |
| Electric Periwinkle | `#9fa6ff` | `--color-electric-periwinkle` | semantic | Small supporting gradient accent; avoid introducing it as a primary UI color. |
| Pale Iris | `#b3bae8` | `--color-pale-iris` | semantic | Incidental gradient detail rather than a recurring page-level color. |
| Moss Olive | `#6c8853` | `--color-moss-olive` | semantic | Supporting gradient or imagery-derived color, not a primary interface tone. |
| Soft Moss | `#99ab91` | `--color-soft-moss` | semantic | Incidental green gradient detail; keep subordinate to the neutral palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f7f6` (Mist Mint) · `--color-surface-2` → `#17150e` (Soft Ink) · `--color-text` → `#17150e` (Soft Ink) · `--color-text-muted` → `#f0f7f6` (Mist Mint) · `--color-border` → `#45443e` (Olive Charcoal) · `--color-accent` → `#cccc25` (Signal Lime) · `--color-accent-2` → `#cacd78` (Lime Sage) · `--color-accent-3` → `#9ac196` (Garden Green) · `--color-on-accent` → `#17150e` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#17150e` | `#ffffff` | 18.26:1 | AAA |
| `#17150e` | `#f0f7f6` | 16.82:1 | AAA |
| `#f0f7f6` | `#ffffff` | 1.09:1 | fail |
| `#f0f7f6` | `#17150e` | 16.82:1 | AAA |
| `#cccc25` | `#ffffff` | 1.72:1 | fail |
| `#cccc25` | `#f0f7f6` | 1.58:1 | fail |
| `#cccc25` | `#17150e` | 10.64:1 | AAA |

### Gradients

- `linear-gradient(color(srgb 0 0 0 / 0), color(srgb 0.0901961 0.0823529 0.054902 / 0.1))`
- `linear-gradient(rgb(204, 204, 37), rgb(202, 205, 120))`
- `linear-gradient(rgb(154, 193, 150), rgb(174, 199, 176))`
- `linear-gradient(rgb(240, 247, 246), rgb(199, 207, 209))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basel Grotesk Book | `--font-body` | webfont | 500, 400 | Navigation, body copy, links, captions, and most interface text. | Inter |
| Basel Classic Book | `--font-display` | webfont | 500, 400 | Oversized display lettering and prominent homepage headlines. | DM Serif Display |
| remixicon | `--font-remixicon` | webfont | 500, 400 | Small interface icons and utility glyphs. | Material Symbols |

- **Basel Grotesk Book:** Use measured medium/book weights; body and navigation remain sentence case with neutral tracking.
- **Basel Classic Book:** Use regular-weight display styling with tight negative tracking; preserve elegant, unforced line breaks.
- **remixicon:** Use sparingly for compact utility actions; do not let iconography compete with headings.

### Type scale — Perfect Fifth (ratio ≈ 1.552, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 144px | 400 | 0.8 | -0.03em | — | Basel Classic Book | Oversized campaign-style display lettering in major brand moments. |
| h1 | 96px | 400 | 0.95 | -0.03em | — | Basel Classic Book | Primary hero headline and large page-level statements. |
| h2 | 72px | 500 | 0.97 | -0.03em | — | Basel Grotesk Book | Section headlines such as feature and revenue stories. |
| h3 | 40px | 500 | 1 | -0.03em | — | Basel Classic Book | Feature-card and testimonial headline hierarchy. |
| h4 | 32px | 500 | 1.1 | -0.02em | — | Basel Grotesk Book | Supporting subheads within product and conversion sections. |
| body | 16px | 500 | 1.2 | 0 | — | Basel Grotesk Book | Main explanatory copy, card descriptions, and supporting paragraphs. |
| caption | 14px | 500 | 1.4 | 0 | — | Basel Grotesk Book | Compact labels, proof details, and media or testimonial metadata. |
| nav | 16px | 400 | 1.5 | 0 | — | Basel Grotesk Book | Header navigation and utility links. |
| link | 16px | 500 | 1.2 | 0 | — | Basel Grotesk Book | Inline Learn more actions and other text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 48 px.
- Section rhythm 120px · element gap 4px · card padding — · max content width 1344px.

Use a spacious vertical rhythm with a measured page maximum width of 1344px and a 4px-based spacing scale. The homepage alternates centered single-column sections with multi-column feature and proof layouts. Keep headings and content aligned to clear section edges; center key stats, testimonials, and conversion messages. A large 120px section gap establishes the broad pacing, while compact 4px element spacing supports tightly grouped controls. The opening hero is full-bleed media, followed by white and pale mint section bands.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `8px` · nav `9999px` · link `9999px` · xs `8px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `inset` (button, nav, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, relying on alternating white and mint surfaces rather than stacked shadows. Cards use measured 8px or 16px rounding, with restrained borders where needed. Media and testimonial cards sit directly on their section backgrounds; the hero gains depth from its video overlay, not a prominent shadow. Keep layering focused on embedded UI and floating chat controls.

## Imagery

Lead with full-bleed video of real beauty-business interactions, darkened enough for white overlay text. Use authentic salon, wellness, checkout, and product-use photography in broad media panels and feature cards. Product UI appears within screenshots and mockups; keep it legible but subordinate to the people and service context. Small portrait thumbnails and review tiles add social proof. Avoid decorative illustration as the page's main visual language.

## Components

### Pill CTA

Fully rounded controls use #cccc25 with #17150e text for the demo action, or #17150e and #f0f7f6 for dark actions. White trial buttons reverse the contrast.

### Video hero

Full-bleed business footage carries a large lower-left headline, concise support copy, and adjacent pill-shaped conversion actions.

### Feature carousel

A white section combines a left-aligned heading, compact navigation controls, wide product-media cards, and a centered dark action.

### Revenue proof

A pale #f0f7f6 band centers the headline and business proof, with oversized numerical outcomes presented as a three-column row.

### Customer story cards

Dark #17150e rounded cards pair light serif-style story text with small customer portraits and compact attribution.

### Split feature panels

Pale mint section bands hold rounded white cards with text on one side and salon or product imagery on the other.

### FAQ list

A near-black section uses light heading and question text in a two-column layout, with thin separators and plus-style row affordances.

### Measured component styles

- **Primary button** (“Get a demo”): background #cccc25 · text #17150e · border 1px solid · radius 1440px · padding 0px · 400 16px Basel Grotesk Book · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px inset
- **Secondary button** (“Explore the system”): background #17150e · text #f0f7f6 · border 1px solid · radius 1440px · padding 0px · 400 16px Basel Grotesk Book · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px inset
- **Link** (“Beauty ​”): transparent background · text #17150e · radius 0px · padding 0px · 400 96px Basel Classic Book
- **Card** (“​ ​ ​ ​ ​ No need for a receptionist! It”): background #f0f7f6 · text #17150e · radius 8px · padding 0px · 500 16px Basel Grotesk Book
- **Navigation item** (“How it works ​ Businesses ​ Pricing Reso”): transparent background · text #17150e · radius 0px · padding 0px · 500 16px Basel Grotesk Book

## Do

- Use #ffffff as the primary canvas and #f0f7f6 for broad section changes.
- Reserve #cccc25 for a small set of prominent actions and the closing CTA treatment.
- Use Basel Classic Book or a close display substitute for large editorial headlines.
- Keep body and navigation copy in a clean, restrained sans serif.
- Use authentic salon, wellness, and checkout photography as the dominant media.
- Build generous pauses between sections and use compact spacing inside controls.

## Don't

- Do not turn the page into a uniformly tinted or dark interface.
- Do not use lime for large amounts of body text or minor decorative details.
- Do not add heavy shadows or layered dashboard-style cards.
- Do not substitute generic abstract illustrations for real business imagery.
- Do not crowd the page with dense copy or tight section spacing.
- Do not promote incidental purple or blue gradient colours into core brand colors.

## Agent prompt

Build a new GlossGenius-style page with a calm editorial rhythm, not a generic SaaS dashboard. Use #ffffff for the canvas, #f0f7f6 for broad feature and proof bands, and #17150e for primary text and inverse sections. Apply #cccc25 selectively to the main conversion action; a broad CTA may soften toward #cacd78. Use Basel Grotesk Book or Inter for interface and body copy, and Basel Classic Book or DM Serif Display for prominent headlines with tight tracking. Create a spacious centered layout within the measured 1344px maximum, alternating single-column moments with split image-and-copy panels. Prefer authentic beauty-business photography or video, rounded cards and pill controls, subtle borders, and minimal shadows. Keep data and product UI secondary to the service imagery, and make each section’s purpose immediately clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with navigation overlaid at top and headline/actions aligned lower-left. | Primary trial action, Secondary demo action | Overlay navigation, White headline, Pill CTAs |
| 2 | other | White, spacious transition between the hero and product story. | Visual breathing room | Plain white canvas |
| 3 | how-it-works | Left-aligned heading above a wide product carousel with supporting controls. | Browse feature slides, Explore system CTA | Product UI media, Carousel arrows, Rounded media cards |
| 4 | stats | Centered headline and proof statement above a three-column metric row. | Scan outcome metrics | Pale mint band, Oversized figures |
| 5 | testimonials | Left-aligned introduction followed by a horizontally browsable row of dark cards. | Browse customer outcomes | Dark rounded cards, Portrait thumbnails, Carousel controls |
| 6 | cta | Centered message and action above a wide rounded media panel. | Request a demo | Centered copy, Outlined pill action, Wide photo |
| 7 | gallery | Open white canvas with scattered image tiles around centered category text. | Showcase served business types | Floating image tiles, Large category lettering |
| 8 | feature-grid | Centered section heading introducing stacked feature panels. | Set up feature comparison | Pale mint background, Centered headline |
| 9 | feature-split | Two-column rounded panel with copy at left and business imagery at right. | Learn more | White card, Embedded booking UI, Rounded media |
| 10 | feature-split | Split feature panel with explanatory copy beside payment imagery. | Learn more | White card, Payment terminal photo, Rounded media |
| 11 | feature-split | Split feature panel with copy and a service interaction image. | Learn more | White card, Reminder UI overlay, Rounded media |
| 12 | feature-split | Split feature panel with operational copy beside mobile product imagery. | Learn more | White card, Phone UI, Rounded media |
| 13 | testimonials | Centered heading above a horizontally extending grid of compact review cards. | Scan peer reviews | Pale review tiles, Star ratings, Compact testimonials |
| 14 | logo-cloud | Small centered label above a horizontal row of publication marks. | Build third-party trust | Monochrome logos, Open white space |
| 15 | cta | Centered headline, short supporting copy, and a compact outlined action. | Request free data transfer | Pale mint band, Centered text, Pill link |
| 16 | cta | Large centered statement and dark action within a prominent full-width gradient band. | Start free, Reassure about payment | Lime-to-sage gradient, Display headline, Dark pill button |
| 17 | faq | Dark two-column section with heading at left and stacked question rows at right. | Expand question rows | Near-black surface, Light text, Fine separators, Plus affordances |

## Source CSS custom properties (selected)

```css
--light-color: white;
--_typography---paragraph-body--font: "Basel Grotesk Book",Arial,sans-serif;
--_typography---paragraph-body--font-weight: 500;
--_typography---paragraph-body--letter-spacing: 0em;
--_typography---h1--font: "Basel Classic Book",Arial,sans-serif;
--_typography---h1--font-weight: 400;
--_typography---h1--letter-spacing: -.03em;
--_typography---h2--font: "Basel Grotesk Book",Arial,sans-serif;
--_typography---h2--font-weight: 500;
--_typography---h2--letter-spacing: -.03em;
--_typography---h3--font: "Basel Grotesk Book",Arial,sans-serif;
--_typography---h3--font-weight: 500;
--_typography---h3--letter-spacing: -.03em;
--_typography---h4--font: "Basel Grotesk Book",Arial,sans-serif;
--_typography---h4--font-weight: 500;
--_typography---h4--letter-spacing: -.02em;
--_typography---h5--font-weight: 500;
--_typography---h5--letter-spacing: -.04em;
--dark-color: #282828;
--_typography---h6--font-weight: 500;
--_typography---h6--letter-spacing: -.04em;
--secondary-purple-mid: #a56eff;
--secondary-brand-color: #f1a09f;
--alt-brand-color-1: #c0c8f6;
--alt-brand-color-2: #ffc05f;
--secondary-grey-dark: #272b30;
--secondary-purple-dark: #9c60ff;
--bg-grey-light: #f7f7f7;
--secondary-purple-light: #c099ff;
--_components---button--font: "Basel Grotesk Book",Arial,sans-serif;
--bg-yellow-dark: #171611;
--bg-pink-dark: #1d1216;
--bg-slate-black: #0e1011;
--bg-grey-dark: #212224;
--_color---super--sky: #9fa6ff;
--_components---card--border-radius: 1.5rem;
--bg-brown-light: #f6efe3;
--primary-pink-dark-light: #f697be;
--secondary-purple-dark-light: #b68aff;
--bg-purple-mid: #cba2ff;
```

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