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

# Glow · Design System

> A quiet canvas for vivid wallet experiences.

**Theme:** light · **Industry:** crypto · **Source:** https://glow.app/ · **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._

Glow pairs a sparse white canvas with softly rounded product panels to keep its Solana wallet interface in focus. Bright violet accents, concise typography, and detailed device mockups give the feature tour a polished, approachable feel.

## North star

Keep the page quiet and spacious so rounded, detailed wallet mockups—not decorative chrome—carry the story.

## Overview

The page uses a white canvas and pale gray feature panels to create a calm frame for wallet screens. Near-black Roobert headings anchor the composition, while muted grays handle supporting copy and quiet footer links. Violet-pink marks the main browser CTA and selected links; orange, red, green, and purple accents appear mainly as feature indicators or within the wallet mockups, rather than as broad brand backgrounds. The hero places a compact text column beside a large, rounded product panel, then continues as a vertically ordered feature tour. Repeated, generous panels create rhythm without heavy dividers. Product imagery is the visual centerpiece: phones, interface cards, and app scenes sit against soft surfaces, with occasional vivid color contained inside the mockups. Rounded controls and panels soften the otherwise minimal, product-led layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and the light areas around the hero and feature panels. |
| Glow Orchid | `#cc62d5` | `--color-glow-orchid` | brand | Primary browser CTA and highlighted testimonial-link text. |
| Wallet Ink | `#131517` | `--color-wallet-ink` | neutral | Headings, primary body text, and the strongest interface labels. |
| Mist Panel | `#f4f5f6` | `--color-mist-panel` | surface | Repeated feature-card backgrounds that frame wallet screens and product imagery. |
| Graphite Button | `#333537` | `--color-graphite-button` | brand | Dark CTA treatment, including the mobile app button. |
| Soft Slate | `#737577` | `--color-soft-slate` | neutral | Supporting prose, attribution, and secondary explanatory copy. |
| Signal Tangerine | `#ec660d` | `--color-signal-tangerine` | semantic | The NEW announcement badge and small feature indicators. |
| Quiet Silver | `#b3b5b7` | `--color-quiet-silver` | neutral | Low-emphasis navigation links and subdued secondary text. |
| Electric Violet | `#8800ff` | `--color-electric-violet` | accent | Violet stop in a radial gradient and accents within wallet-related visuals. |
| Orchid Gradient | `#a732d6` | `--color-orchid-gradient` | accent | Middle stop of the measured radial gradient, not a dominant page surface. |
| Lilac Glow | `#ef79ff` | `--color-lilac-glow` | accent | Light gradient endpoint and occasional color inside product visuals. |
| Alert Coral | `#e83b47` | `--color-alert-coral` | semantic | Red element visible within the spam-token feature illustration, not a page-wide brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f5f6` (Mist Panel) · `--color-text` → `#131517` (Wallet Ink) · `--color-text-muted` → `#737577` (Soft Slate) · `--color-text-subtle` → `#b3b5b7` (Quiet Silver) · `--color-border` → `#333537` (Graphite Button) · `--color-accent` → `#cc62d5` (Glow Orchid) · `--color-accent-2` → `#ec660d` (Signal Tangerine) · `--color-accent-3` → `#8800ff` (Electric Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131517` | `#ffffff` | 18.3:1 | AAA |
| `#131517` | `#f4f5f6` | 16.77:1 | AAA |
| `#737577` | `#ffffff` | 4.63:1 | AA |
| `#737577` | `#f4f5f6` | 4.24:1 | AA-large |
| `#b3b5b7` | `#ffffff` | 2.06:1 | fail |
| `#b3b5b7` | `#f4f5f6` | 1.88:1 | fail |
| `#cc62d5` | `#ffffff` | 3.35:1 | AA-large |
| `#cc62d5` | `#f4f5f6` | 3.07:1 | AA-large |

### Gradients

- `radial-gradient(86% 86% at 6% 9%, rgb(136, 0, 255) 0%, rgb(167, 50, 214) 51%, rgb(239, 121, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 400, 600, 500, 700 | All page text, from display headings and feature titles to buttons, captions, and links. | Inter |

- **Roobert:** Use bold, near-black headings and regular body text; uppercase, tracked eyebrow and caption labels.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1 | -0.018em | — | Roobert | Large hero or display statement, set tightly and confidently. |
| h1 | 40px | 700 | 1.1 | 0 | — | Roobert | Main hero headline and primary page heading. |
| h2 | 24px | 600 | 1.28 | 0 | — | Roobert | Feature-panel titles and secondary section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Roobert | Supporting descriptions, testimonials, and feature copy. |
| caption | 12px | 600 | 1.5 | 0.083em | uppercase | Roobert | Small uppercase labels such as feature-panel prompts. |
| link | 16px | 400 | 1.5 | 0 | — | Roobert | Navigation links and inline testimonial links. |
| eyebrow | 12px | 600 | 1.5 | 0.083em | uppercase | Roobert | Short uppercase announcement or section-label text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 14, 16, 24, 40, 48, 64 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width —.

The page has a sparse, asymmetrical hero: brand mark at the top, copy and CTAs on the left, and a large rounded product panel on the right. Below, the feature tour proceeds as a tall sequence of pale panels, with content centered inside each. The measured page uses a four-column structure, but the screenshot’s dominant impression is the split hero followed by a single vertical stack. Keep alignment deliberate, whitespace generous, and content density comfortable; no measured maximum width is available.

## Shape & elevation

- Radius: button `9999px` · card `40px` · media `18px` · badge `4px` · xs `8px` · sm `18px` · md `19px` · lg `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat: pale surfaces distinguish feature panels from the white canvas, without measured shadows. Use rounded panels and controls instead of ornamental borders; button outlines match their fills. Keep mockups visually layered within panels, while avoiding extra card shadows or heavy separators.

## Imagery

Use polished wallet UI mockups in phone frames as the primary imagery, supported by app screens and feature-specific interface compositions. Place them inside pale rounded panels rather than as full-bleed backgrounds. Keep colorful scenes, tokens, and interface accents contained within the mockups; the hero device should remain the clearest focal point. The page includes video and image media, but the overall treatment is product-led rather than photographic.

## Components

### Primary CTA

Pill-shaped browser button with white text on Glow Orchid (#cc62d5); measured CTA padding is 10px 14px.

### Dark CTA

Matching pill control with white text on Graphite Button (#333537), used for mobile-related actions.

### Feature panel

Large rounded Mist Panel (#f4f5f6) card, repeated to present individual wallet capabilities and UI mockups.

### Announcement badge

Compact orange NEW badge using Signal Tangerine (#ec660d) with white text and a small rounded corner.

### Hero product showcase

Split hero pairs a bold wallet promise and CTA group with a large panel containing a phone mockup and feature prompt.

### Quiet navigation links

Small, low-emphasis footer links in Quiet Silver (#b3b5b7), kept visually secondary to the hero and product tour.

### Measured component styles

- **Primary button** (“Get for Chrome”): background #cc62d5 · text #ffffff · border 1px solid #cc62d5 · radius 19px · padding 10px 14px · 500 16px Roobert
- **Secondary button** (“Get for iOS”): background #333537 · text #ffffff · border 1px solid #333537 · radius 19px · padding 10px 14px · 500 16px Roobert
- **Link** (“Docs”): transparent background · text #b3b5b7 · radius 0px · padding 0px · 400 16px Roobert
- **Card** (“EXPLORE GLOW FEATURES”): background #f4f5f6 · text #131517 · radius 40px · padding 0px · 400 16px Roobert
- **Badge** (“NEW”): background #ec660d · text #ffffff · radius 4px · padding 2px 8px · 600 13px Roobert

## Do

- Use white canvas space to make product panels stand out.
- Keep feature content inside softly rounded pale gray panels.
- Use Glow Orchid for the primary browser CTA and selected link emphasis.
- Set headings in strong near-black Roobert or a close substitute.
- Show wallet interfaces inside crisp device mockups.
- Keep orange, red, and vivid purple accents localized to badges or visuals.

## Don't

- Do not turn the page into a dark-themed interface.
- Do not use saturated color as a broad background band.
- Do not crowd the hero with extra navigation or promotional blocks.
- Do not add heavy card shadows or thick separators.
- Do not let mockup artwork overwhelm the page’s restrained canvas.
- Do not use uppercase styling for long headlines or body copy.

## Agent prompt

Build a new wallet-product page in Glow’s restrained visual style. Use Gallery White (#ffffff) as the canvas and Mist Panel (#f4f5f6) for large, softly rounded feature surfaces. Set headings in near-black Wallet Ink (#131517) and supporting copy in muted gray; use Roobert or Inter with clear weight contrast. Make the hero asymmetrical, pairing concise copy and a Glow Orchid (#cc62d5) pill CTA with a large wallet-device mockup. Continue with a vertical sequence of centered product-feature panels. Keep Signal Tangerine (#ec660d), Electric Violet (#8800ff), and Alert Coral (#e83b47) to small indicators or imagery, not full backgrounds. Favor crisp device UI, generous whitespace, flat surfaces, and quiet secondary links; avoid heavy borders, shadows, and clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Split hero with copy and CTAs beside a large device panel; followed by a vertical sequence of centered feature cards. | primary download actions, feature-by-feature walkthrough, device UI preview | white canvas, pale rounded panels, violet CTA, centered feature headings, wallet mockups |

## Source CSS custom properties (selected)

```css
--outline-color: -webkit-focus-ring-color;
--secondary-color-alpha: rgba(var(--black-base-rgb),0.64);
--tertiary-color-alpha: rgba(var(--black-base-rgb),0.36);
--quaternary-color-alpha: rgba(var(--black-base-rgb),0.2);
--nav-bg-color: transparent;
--translucent-bg-color: #fff8;
--slight-translucent-bg-color: #fffd;
--slight-translucent-elevated-bg-color: #fffd;
--map-tooltip-shadow: 0 6px 16px rgba(30,53,77,.5);
--map-tooltip-bg-color: #fff9;
--discord-fg-color: #5865f2;
--discord-bg-color: #5865f2;
--discord-active-fg-color: #2738f3;
--discord-active-bg-color: #2738f3;
--discord-contrast-color: #fff;
--ethereum-fg-color: #954fff;
--ethereum-bg-color: #954fff;
--ethereum-active-fg-color: #60f;
--ethereum-active-bg-color: #60f;
--ethereum-contrast-color: #fff;
--glow-fg-color: #de3163;
--glow-bg-color: #de3163;
--glow-active-fg-color: #c22b57;
--glow-active-bg-color: #c22b57;
--glow-contrast-color: #fff;
--google-fg-color: #4285f4;
--google-bg-color: #4285f4;
--google-active-fg-color: #0d6aff;
--google-active-bg-color: #0d6aff;
--google-contrast-color: #fff;
--slack-fg-color: #7a2d83;
--slack-bg-color: #7a2d83;
--slack-active-fg-color: #650070;
--slack-active-bg-color: #650070;
--slack-contrast-color: #fff;
--twitter-fg-color: #1da1f2;
--twitter-bg-color: #1da1f2;
--twitter-active-fg-color: #08d;
--twitter-active-bg-color: #08d;
--twitter-contrast-color: #fff;
```

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