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

# Genway · Design System

> Calm white space, violet energy, clear product storytelling

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

Genway’s homepage pairs a clean white canvas and deep-indigo typography with soft violet gradients to present its AI research platform. Product mockups, customer proof, and concise feature blocks guide visitors from the promise of faster research to a clear call to action.

## North star

Use generous white space and deep-indigo type to let violet product storytelling carry the page.

## Overview

The page builds its identity around a white canvas (#ffffff), deep indigo text (#0a0449), and expansive violet glow that gives the hero a distinctive sense of energy without making the interface feel dark. Pale lavender surfaces (#f7f6fd and #edebfb) separate long-form content sections gently, while #6b5ee0 provides a focused accent in headings and interface details. Geist is used throughout: bold, tightly tracked display headlines establish hierarchy, and regular-weight body copy remains compact and readable. The layout alternates centered, full-width moments with constrained product cards and split feature narratives. Large product demonstrations and interface illustrations make the platform tangible; customer logos and testimonials add credibility. Rounded cards and subtle shadows lift product imagery from the background without relying on heavy borders. Generous vertical breathing room keeps the many homepage sections legible and makes the darker final CTA feel like a deliberate visual anchor.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and light section background; also used for reverse text on the dark CTA. |
| Midnight Indigo | `#0a0449` | `--color-midnight-indigo` | brand | Primary heading and body-text color, logo tone, and deep inverse surface for the closing CTA. |
| Lavender Mist | `#f7f6fd` | `--color-lavender-mist` | surface | Pale background band behind product and proof sections. |
| Muted Slate | `#706e87` | `--color-muted-slate` | semantic | Secondary copy and navigation links, including the footer link row. |
| Lilac Haze | `#edebfb` | `--color-lilac-haze` | surface | Light gradient and section transition tone; keep it subtle behind content. |
| Soft Graphite | `#75728c` | `--color-soft-graphite` | semantic | Low-emphasis text sampled in supporting copy; visually close to the main muted text. |
| Deep Violet Ink | `#0a0163` | `--color-deep-violet-ink` | brand | Small supporting text and shadow tint; not a major full-page background color. |
| Signal Violet | `#6b5ee0` | `--color-signal-violet` | accent | Brand accent in highlighted copy and interface details, and the source tone of the hero glow. |
| Pale Iris | `#e1def8` | `--color-pale-iris` | surface | Lower stop in pale lavender section gradients and soft decorative transitions. |
| Dusty Mauve | `#a085a6` | `--color-dusty-mauve` | semantic | Occasional subdued supporting text; use sparingly rather than as a core brand tone. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f6fd` (Lavender Mist) · `--color-surface-2` → `#0a0449` (Midnight Indigo) · `--color-text` → `#0a0449` (Midnight Indigo) · `--color-text-muted` → `#706e87` (Muted Slate) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#6b5ee0` (Signal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0449` | `#ffffff` | 18.64:1 | AAA |
| `#0a0449` | `#f7f6fd` | 17.36:1 | AAA |
| `#706e87` | `#ffffff` | 4.92:1 | AA |
| `#706e87` | `#f7f6fd` | 4.58:1 | AA |
| `#706e87` | `#0a0449` | 3.79:1 | AA-large |
| `#ffffff` | `#f7f6fd` | 1.07:1 | fail |
| `#ffffff` | `#0a0449` | 18.64:1 | AAA |
| `#6b5ee0` | `#ffffff` | 4.88:1 | AA |
| `#6b5ee0` | `#f7f6fd` | 4.55:1 | AA |
| `#6b5ee0` | `#0a0449` | 3.82:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgba(107, 94, 224, 0.12) 100%)`
- `linear-gradient(rgb(247, 246, 253) 0%, rgb(225, 222, 248) 100%)`
- `linear-gradient(rgba(107, 94, 224, 0.1) 0%, rgba(107, 94, 224, 0) 33.5807%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 33.9483%, rgb(255, 255, 255) 60.1476%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist Regular | `--font-body` | webfont | 400 | Body copy, captions, and general interface text. | Inter |
| Geist SemiBold | `--font-geist-semibold` | webfont | 400 | Section headings and emphasized interface labels. | Inter |
| Geist Medium | `--font-geist-medium` | webfont | 400, 500 | Navigation links and compact interactive labels. | Inter |
| Geist Bold | `--font-display` | webfont | 400 | Hero and major display headlines. | Inter |
| Geist | `--font-geist` | webfont | 400, 500 | General fallback and mixed-weight text where the family is declared without a named cut. | Inter |

- **Geist Regular:** Regular weight keeps supporting copy calm; headings use much tighter tracking than body text.
- **Geist SemiBold:** Use a firm but restrained weight; keep heading case natural rather than all caps.
- **Geist Medium:** Medium emphasis for small links; measured link tracking is slightly tight.
- **Geist Bold:** Large, bold, tightly tracked headlines with compact line height and natural sentence case.
- **Geist:** Keep the same clean sans-serif character and use regular or medium weight as appropriate.

### Type scale — Augmented Fourth (ratio ≈ 1.406, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 400 | 0.9 | -0.04em | — | Geist Bold | Oversized hero or campaign statements, set in bold with tightly packed lines. |
| h1 | 68px | 400 | 0.9 | -0.04em | — | Geist Bold | Primary hero headline and other top-level page statements. |
| h2 | 56px | 400 | 1 | -0.04em | — | Geist Bold | Major section titles such as platform and customer-proof headings. |
| h3 | 36px | 400 | 1.2 | -0.02em | — | Geist SemiBold | Feature-block headings and secondary promotional titles. |
| h4 | 24px | 400 | 1.3 | 0 | — | Geist Regular | Smaller card titles and supporting subheads. |
| body | 16px | 400 | 1.5 | 0 | — | Geist Regular | Descriptive copy for features, testimonials, and product explanations. |
| caption | 12px | 400 | 1.2 | 0 | — | Geist Regular | Small labels and concise supporting metadata. |
| link | 14px | 400 | 1.2 | -0.01em | — | Geist Medium | Navigation and compact calls to action. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 8, 10, 12, 16, 20, 24, 28, 32, 36, 64, 80 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1200px.

The measured page content is organized around a 1200px maximum width, with a comfortable density and a clear centered alignment for the hero and major section introductions. The homepage alternates broad gradient or tinted bands with constrained cards, product demonstrations, and split feature stories. Vertical section spacing is generous, with a measured 80px section gap; smaller elements use a measured 8px gap. The hero begins with ample white space, then transitions into violet. Cards and proof modules create a steady rhythm without making the page feel crowded.

## Shape & elevation

- Radius: card `12px` · media `9999px` · link `32px` · xs `8px` · sm `11px` · md `12px` · lg `16px` · xl `24px` · 2xl `28px` · pill `9999px`
- Shadow `md` (other): `rgba(10, 1, 99, 0.4) 0px 8px 16px -10px`
- Shadow `hairline` (link, card): `rgba(10, 1, 99, 0.08) 0px 0px 0px 4px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.004) 0px 2.76726px 2.21381px 0px, rgba(0, 0, 0, 0.004) 0px 6.6501px 5.32008px 0px, rgba(0, 0, 0, 0.004) 0px 12.5216px 10.0172px 0px, rgba(0, 0, 0, 0.008) 0px 22.3363px 17.869px 0px, rg`
- Shadow `xl-2` (other): `rgba(0, 0, 0, 0) 0px 2.76726px 2.21381px 0px, rgba(0, 0, 0, 0) 0px 6.6501px 5.32008px 0px, rgba(0, 0, 0, 0) 0px 12.5216px 10.0172px 0px, rgba(0, 0, 0, 0.01) 0px 22.3363px 17.869px 0px, rgba(0, 0, 0, 0`
- Shadow `inset` (other): `rgba(4, 0, 41, 0.1) 0px 1px 8px 0px inset`
- Shadow `inset-2` (other): `rgba(11, 1, 101, 0.14) 1px 0px 8px 0px inset`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page favors clean surfaces and restrained separation over strong outlines. Product cards use subtle layered shadows and rounded corners; measured card radius is 12px. Some small interface elements carry a faint violet focus-like ring. Avoid heavy borders or dramatic elevation, reserving the strongest contrast for the dark CTA band.

## Imagery

Imagery is primarily product UI: interview, survey, dashboard, and analytics mockups presented as clean floating panels. Customer logos and testimonial portraits provide small moments of human proof. A large, soft violet gradient acts as atmosphere rather than literal illustration. Keep mockup detail legible but subordinate to the headline, and avoid adding unrelated decorative photography.

## Components

### Hero

Centered, oversized indigo headline and short supporting line on white, transitioning into a broad violet glow.

### Customer logo row

A horizontal line of customer marks sits within the hero-to-product transition, tinted to harmonize with the indigo palette.

### Process cards

Three sequential steps pair concise labels and copy with product interface previews over the violet field.

### Product demo panel

A wide, softly elevated interface mockup anchors the AI-led product story beneath a centered section title.

### Feature cards

Rounded white cards group interview, usability, and survey offerings, with brief descriptions and compact links.

### Feature narratives

Alternating split layouts pair indigo headlines and testimonial copy with short feature lists and small interface visuals.

### Closing CTA

A dark indigo rounded panel with centered white headline and supporting line closes the content before the footer.

### Measured component styles

- **Link** (“About”): transparent background · text #706e87 · radius 0px · padding 0px · 400 14px Geist Medium
- **Card** (“Smart suggestions”): background #fdf7ff · text #000000 · radius 12px · padding 0px · 400 12px sans-serif

## Do

- Keep the main canvas white and uncluttered.
- Use deep indigo for the strongest text hierarchy.
- Let violet gradients bloom softly behind content.
- Alternate broad section bands with compact product cards.
- Use Geist-like sans-serif typography with tight display headlines.
- Make product mockups feel like lifted, rounded panels.
- Reserve the darkest surface for a focused closing CTA.

## Don't

- Do not turn the page into a dark-mode interface.
- Do not use bright unrelated accent colors.
- Do not crowd the hero with extra copy or controls.
- Do not apply strong borders to every card.
- Do not let decorative gradients reduce text contrast.
- Do not make product mockups visually louder than the message.

## Agent prompt

Build a new Genway-style AI SaaS page with an airy white canvas and a crisp, product-led rhythm. Use Gallery White (#ffffff) as the primary background, Midnight Indigo (#0a0449) for headlines and core text, and Signal Violet (#6b5ee0) as a controlled accent. Introduce Lavender Mist (#f7f6fd), Lilac Haze (#edebfb), and Pale Iris (#e1def8) in soft section washes, not hard color blocks. Use a Geist-like sans serif, with large tightly tracked bold headings and calm regular body copy. Center the hero, then alternate broad atmospheric sections, rounded product cards, and split feature narratives. Show realistic interface mockups, customer marks, and concise proof points. Keep shadows subtle, spacing generous, and the final CTA dark and focused.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Single-column footer on white, with a centered brand mark and compact rows of links. | site navigation, legal links, support access | centered logo, muted text links, small social icons |

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