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

# Geniestudio · Design System

> A light, playful canvas for brand-ready AI visuals

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

Geniestudio pairs a quiet, spacious interface with friendly illustrations and soft blue-lavender washes. Dark, compact calls to action and crisp typography keep the playful AI product presentation grounded.

## North star

Keep the interface mostly white and spacious, using soft pastel washes and playful artwork around crisp dark type and decisive pill-shaped actions.

## Overview

The page uses white as its dominant canvas, punctuated by very pale lavender and blue section bands rather than strong blocks of brand colour. Soft gradients blur section boundaries and echo the airy, cloudlike artwork. Near-black headings provide the strongest contrast; muted gray supports explanatory copy, while the primary signup action is a compact dark pill. Aeonik shapes the display and heading hierarchy with a clean, rounded feel, and Geist handles body copy and controls. The composition is centered and deliberately sparse, with generous vertical pauses between product demonstrations and feature stories. Friendly cloud characters and floating objects appear as illustrative accents, not as a dense decorative pattern. Product mockups and sample generated visuals sit within the same pale atmosphere. Rounded media and cards, minimal hairlines, and restrained shadows preserve a soft, lightweight interface rather than a conventional dashboard aesthetic.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, navigation surface, and light text on dark signup buttons. |
| Slate Haze | `#535862` | `--color-slate-haze` | neutral | Muted supporting copy, including descriptive text within feature cards. |
| Midnight Ink | `#0a0d12` | `--color-midnight-ink` | neutral | Primary headings and high-contrast text. |
| Lilac Veil | `#f9f5ff` | `--color-lilac-veil` | surface | Pale lavender section wash behind the style-library content and selected cards. |
| Cloud Blue | `#ebf5ff` | `--color-cloud-blue` | surface | Cool blue section band and a subtle background for feature storytelling. |
| Soft Graphite | `#93979f` | `--color-soft-graphite` | neutral | Quiet navigation links such as How it works. |
| Glacier Mist | `#e1f1ff` | `--color-glacier-mist` | surface | Pale blue gradient transition in the hero and atmospheric background washes. |
| Powder Sky | `#cce7ff` | `--color-powder-sky` | surface | Pastel feature-card fill; also appears in the blue-toned product imagery. |
| Lavender Foam | `#f1e6ff` | `--color-lavender-foam` | surface | Lavender feature-card fill behind collaboration content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f5ff` (Lilac Veil) · `--color-surface-2` → `#ebf5ff` (Cloud Blue) · `--color-surface-3` → `#cce7ff` (Powder Sky) · `--color-text` → `#0a0d12` (Midnight Ink) · `--color-text-muted` → `#535862` (Slate Haze) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0d12` | `#ffffff` | 19.46:1 | AAA |
| `#0a0d12` | `#f9f5ff` | 18.1:1 | AAA |
| `#0a0d12` | `#ebf5ff` | 17.64:1 | AAA |
| `#0a0d12` | `#cce7ff` | 15.24:1 | AAA |
| `#535862` | `#ffffff` | 7.14:1 | AAA |
| `#535862` | `#f9f5ff` | 6.64:1 | AA |
| `#535862` | `#ebf5ff` | 6.48:1 | AA |
| `#535862` | `#cce7ff` | 5.59:1 | AA |
| `#ffffff` | `#f9f5ff` | 1.08:1 | fail |
| `#ffffff` | `#ebf5ff` | 1.1:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) -7.86%, rgb(250, 253, 255) 26.87%, rgb(225, 241, 255) 89.43%, rgb(245, 250, 255) 109.66%)`
- `linear-gradient(177deg, rgb(235, 246, 255) 2.88%, rgb(249, 245, 255) 97.51%)`
- `linear-gradient(177deg, rgb(255, 255, 255) 2.88%, rgb(249, 245, 255) 97.51%)`
- `linear-gradient(177deg, rgb(249, 245, 255) 2.88%, rgb(255, 255, 255) 97.51%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 500, 600 | Body copy, navigation links, captions, and interface controls. | Inter |
| Aeonik | `--font-display` | webfont | 500 | Display text and main headings. | Manrope |

- **Geist:** Medium-weight, sans-serif interface voice; small negative tracking in body, caption, and link styles.
- **Aeonik:** Medium weight with a clean, rounded geometric feel; sentence case and neutral tracking.

### Type scale — Custom (ratio ≈ 2.018, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 148px | 500 | 1.05 | 0 | — | Aeonik | Oversized hero display treatment and prominent short brand statements. |
| h1 | 48px | 500 | 1.17 | 0 | — | Aeonik | Primary hero headline and major page headings. |
| h2 | 32px | 500 | 1.25 | 0 | — | Aeonik | Section titles such as feature and gallery introductions. |
| body | 18px | 500 | 1.33 | -0.01em | — | Geist | Explanatory copy, feature descriptions, and supporting product text. |
| caption | 16px | 500 | 1.5 | -0.01em | — | Geist | Small helper copy and supporting labels. |
| link | 16px | 500 | 1.5 | -0.01em | — | Geist | Navigation links and understated text actions. |

OpenType features in use: `"case"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 6, 8, 12, 16, 18, 20, 24, 28, 30, 32, 40, 48, 56, 88, 120 px.
- Section rhythm 120px · element gap 8px · card padding 48px · max content width 878px.

The page is a single-column, vertically paced landing page, with a measured 878px maximum content width and a spacious density. Navigation and hero content are centered within the canvas; later feature content introduces two-column arrangements and image-led blocks. Long white intervals separate major demonstrations, while brief pastel section bands signal changes of topic. Keep headlines and supporting copy centered where shown, then use aligned card content for feature details. The measured spacing system is based on an 8px unit, with a generous 120px section rhythm.

## Shape & elevation

- Radius: button `9999px` · card `32px` · media `16px` · xs `16px` · sm `32px` · pill `9999px`
- Shadow `hairline` (button, other): `rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px`
- Shadow `hairline-2` (other): `rgb(244, 245, 246) 0px 1px 1px 0px`

Most surfaces are flat, with separation created by whitespace, pale color fields, and subtle gradient transitions. Cards use large rounded corners and pastel fills instead of prominent outlines. Signup actions are dark pills; measured button treatment includes a crisp hairline shadow on one instance. Keep other shadows very restrained and avoid heavy layered panels.

## Imagery

Use playful, polished illustrations rather than conventional photography: friendly cloud characters, floating icons, soft clouds, and small colorful style samples. Keep decorative elements airy and dispersed around the hero headline instead of crowding its text. Product screenshots and generated-image thumbnails should feel lightly embedded in the page, with pale surroundings and rounded media corners. Avoid treating illustration colors as core interface colors.

## Components

### Navigation

A quiet top bar with the Genie mark, muted text links, and a compact dark signup pill; keep the navigation visually subordinate to the hero.

### Hero

Centered, large Aeonik headline, short Geist support line, and dark rounded signup action over a pale blue-white atmospheric field.

### Style selector

A sparse style introduction paired with a row of small, colorful illustrated style icons and scattered cloud motifs.

### Prompt gallery

A soft pastel showcase with a centered heading, supporting line, sample visual thumbnails, and a rounded prompt-creation interface.

### Feature cards

Large rounded feature panels with #cce7ff or #f1e6ff fills, muted copy, and product-interface imagery.

### Signup button

Dark pill-shaped CTA with white Geist text; the larger measured variant has generous horizontal padding and a subtle hairline shadow.

### Measured component styles

- **Primary button** (“Sign up”): background #181d27 · text #ffffff · radius 16px · padding 8px 16px · 600 14px Geist
- **Link** (“How it works”): transparent background · text #93979f · radius 0px · padding 0px · 500 16px Geist
- **Card** (“Create collections on the fly ...and sha”): background #cce7ff · text #535862 · radius 32px · padding 48px · 500 16px Geist

## Do

- Keep the main canvas predominantly white.
- Use #f9f5ff and #ebf5ff as gentle section washes.
- Reserve #0a0d12 for strong headings and high-contrast text.
- Set display and heading text in Aeonik or a close substitute.
- Use Geist or a close substitute for controls and supporting copy.
- Give sections generous vertical breathing room.
- Use playful illustrations as sparse accents around product content.

## Don't

- Do not turn the page into a dense dashboard.
- Do not introduce saturated interface colors beyond the measured palette.
- Do not rely on heavy borders or deep shadows to separate sections.
- Do not crowd hero text with decorative illustrations.
- Do not style every pastel in the mockups as a core brand color.
- Do not replace the clean rounded controls with sharp, boxy buttons.

## Agent prompt

Build a new Geniestudio-style page as a spacious AI product landing experience. Use Gallery White (#ffffff) for the main canvas, with restrained Lilac Veil (#f9f5ff) and Cloud Blue (#ebf5ff) section washes; let Glacier Mist (#e1f1ff) appear in soft atmospheric transitions. Use Midnight Ink (#0a0d12) for clear headings, Slate Haze (#535862) for supporting copy, and Soft Graphite (#93979f) for quiet links. Set headlines in Aeonik or Manrope and interface text in Geist or Inter. Center the hero and its CTA, then alternate generous white pauses with pastel feature and product-showcase sections. Use rounded cards, pill-shaped dark actions, and friendly cloudlike illustrations as occasional accents. Keep visual hierarchy crisp, shadows minimal, and mockup colors subordinate to the measured interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Centered, compact navigation row with logo, text links, and signup action. | brand navigation, signup shortcut | quiet text links, dark pill button |
| 2 | hero | Centered headline and supporting copy over a pale, full-width atmospheric field. | primary signup CTA, brand promise | large dark headline, floating illustrations, soft blue wash |
| 3 | how-it-works | Sparse centered message with small style illustrations and ample surrounding whitespace. | style selection, visual onboarding | illustrated style icons, cloud accents |
| 4 | product-showcase | Brief transition leading into a large, airy product-interface presentation. | product preview | floating interface mockup, pale gradient |
| 5 | gallery | Full-width pastel feature band with centered text, visual samples, and prompt control. | example gallery, prompt creation | thumbnail row, rounded prompt bar, pastel background |
| 6 | feature-split | Single-column feature moment with an illustration and generous whitespace. | feature introduction | short display word, illustrative accent |
| 7 | feature-split | Left-aligned feature text on a pale blue section band. | feature explanation | blue background, simple illustration |
| 8 | feature-split | Left-aligned feature text on a mostly white canvas. | feature explanation | minimal heading, illustrative detail |
| 9 | other | Short white spacer between the feature story and style-library section. | visual pacing | open whitespace |
| 10 | other | Centered heading and supporting line on a pale lavender field. | style discovery | lavender surface, centered typography |
| 11 | gallery | Two-column image-led gallery on a continuing lavender surface. | browse visual examples | image grid, soft background |
| 12 | other | Open white transition before the closing feature overview. | visual pacing | white canvas |
| 13 | feature-grid | Centered introduction above a two-column arrangement of rounded pastel feature cards. | feature discovery, team collaboration | pastel cards, product UI previews, rounded corners |

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