# Glow · Design system migration spec

> Source: https://glow.app  ·  Curated by OpenDesign  ·  en

> This site exemplifies premium fintech design with its clean aesthetic, bold typography, and strategic use of color to guide attention to key actions.

## 1. Identity DNA

Glow's design system begins with a core premise: financial tools should feel as considered and reassuring as a premium consumer product. The identity is built on clarity and approachability, using a controlled palette and generous space to demystify cryptocurrency management for both newcomers and experienced users.

**One-liner:** A clean, modern Solana wallet landing page with a focus on mobile and browser extension availability
**Keywords:** Solana · wallet · modern · accessible · crypto
**Analogy:** A friendly fintech app that feels like a premium consumer product

## 2. Color

The color system is built on a foundation of pure white and light gray surfaces, establishing a clean, non-intimidating canvas. A single, vibrant purple accent color is reserved for primary actions, creating a clear visual hierarchy and a memorable brand signal without clutter.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F5F6` | card background |
| `--ink` | `#131517` | body text |
| `--ink-soft` | `#737577` | secondary text |
| `--muted` | `#B3B5B7` | placeholder |
| `--accent` | `#CC62D5` | single accent |
| `--line` | `rgba(179, 181, 183, 0.3)` | divider |

**Color principle:** Clean white backgrounds with neutral grays and a vibrant purple accent for primary actions

Every color choice serves a functional purpose: white for openness, gray for neutrality, and purple for decisive action.

## 3. Typography

Typography employs a geometric sans-serif family, chosen for its modern clarity and excellent readability at all scales. The voice is confident and direct, with bold, tight-tracked headlines that make statements and clean body text that explains without jargon.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 700 | -1px | Hero headline |
| h1 | 40px | 1.2 | 600 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Body text |
| caption | 12px | 1.3 | 500 | 1px | Uppercase labels |

## 4. Spacing

Layout rhythm is governed by a strict 4px base grid, with all spacing values scaling from this fundamental unit to ensure mathematical consistency.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous padding for breathing room

## 5. Surfaces

- **Radius:** sm 4px · md 8px · lg 18px · pill 100px
- **Shadows:**
  - 0 4px 24px rgba(0, 0, 0, 0.08)
  - 0 2px 8px rgba(0, 0, 0, 0.04)
- **Borders:** 1px solid rgba(179, 181, 183, 0.3)

## 6. Layout

The primary desktop layout is a balanced two-column skeleton, placing explanatory text content on the left and contextual device mockups on the right. This structure efficiently communicates value while demonstrating the product in its native mobile and browser extension environments.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Two-column hero with text on left and device mockup on right

## 7. Motion & Interaction

Motion is applied with restraint and purpose, using a consistent cubic-bezier easing curve to create smooth, natural-feeling transitions. All interactive feedback—from hover states to page element entrances—is designed to be informative and immediate, yet never distracting.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover and click interactions
  - Subtle entrance animations for page elements

- **Hover:** Subtle scale or color change on interactive elements
- **Click:** Immediate visual feedback with slight transform
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for all transitions
- **Keyboard:** Focus outlines for accessibility

## 8. Voice & Don'ts

The editorial voice is friendly, confident, and modern, speaking in bold, direct statements that address the user's needs. It deliberately avoids complex technical jargon, overly formal language, and any aggressive sales tactics.

- **Tone:** Friendly, confident, and modern
- **Headline style:** Bold, direct statements that speak to the user
- **CTA style:** Action-oriented with clear value proposition
- **Avoid:** Complex technical jargon / Overly formal language / Aggressive sales tactics

### Don'ts
- ❌ don't use dark backgrounds — screenshot shows white and light gray backgrounds
- ❌ don't use serif fonts — screenshot shows geometric sans-serif typography
- ❌ don't use small border radius on cards — screenshot shows large rounded corners (18px)
- ❌ don't use muted color palette — screenshot shows vibrant purple accent color
- ❌ don't use dense text layouts — screenshot shows generous spacing and breathing room
- ❌ don't use complex gradients — screenshot shows mostly solid colors with subtle shadows

The system is defined as much by its exclusions—no dark mode, no serifs, no dense layouts, no complex gradients—as by its inclusions.

## System Prompt (paste into AI tool)

```
This is a clean, modern fintech landing page for a Solana cryptocurrency wallet. It positions itself as a premium consumer product with friendly, accessible design. Key colors include pure white (#FFFFFF) backgrounds, dark ink (#131517), neutral grays (#737577, #B3B5B7), and a vibrant purple accent (#CC62D5). Typography uses a geometric sans-serif font family with bold, tight-tracked headlines and clean body text. Critical design principles: avoid dark mode, maintain generous white space, use rounded corners (18px) on cards and components, keep the interface simple and uncluttered, and ensure the purple accent stands out against neutral backgrounds. The layout is two-column on desktop with text content on the left and device mockups on the right, creating visual balance and demonstrating the product in context.
```