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

# Stocketa · Design System

> Calm, colourful clarity for tracking investments

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

A light, spacious homepage pairs an oversized investment-tracking message with a prominent iPhone app preview. A restrained neutral interface and soft multicolour gradients make the finance product feel approachable and polished.

## North star

Keep financial information approachable by pairing bold, concise messaging with calm surfaces and a vivid but softly treated app preview.

## Overview

The visual strategy contrasts a calm, pale canvas with a vivid, softly blended hero backdrop. The measured canvas is #dfdfdf, while white and near-white panels create the impression of a bright product surface; the screenshot’s coloured fields belong mainly to the hero artwork and device mock-up, not a set of flat brand bands. Large, heavy Averta Standard headings use a multicolour gradient treatment in the hero, while supporting copy is compact, dark, and easy to scan. The composition gives the message and a rounded iPhone mock-up equal prominence: a tall white content panel anchors the left, and the phone floats over atmospheric colour on the right. A small pill-shaped “Read more” control and subdued launch link keep actions quiet. Below the hero, a vertically stacked feature list uses small purple line icons, concise labels, and muted explanatory copy. Generous whitespace and subtle inset shadows keep the presentation light rather than dashboard-dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#dfdfdf` | `--color-soft-canvas` | surface | Measured page canvas; the broad light-gray background behind the split hero composition. |
| Slate Mist | `#8190a0` | `--color-slate-mist` | neutral | Primary muted text for secondary descriptions and feature explanations. |
| Quiet Steel | `#9aa1b1` | `--color-quiet-steel` | neutral | Subdued link and supporting text, including the launch-notification prompt. |
| Orchid Signal | `#995bb9` | `--color-orchid-signal` | brand | Measured heading accent and feature-icon colour; use sparingly outside the gradient-led hero. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Bright content panels and pale card surfaces; also appears in the hero artwork. |
| Porcelain Haze | `#f9f9f9` | `--color-porcelain-haze` | surface | Near-white card and panel tones within softly blended product imagery. |
| Graphite Copy | `#3a424a` | `--color-graphite-copy` | neutral | Dark readable supporting copy, especially the short hero description. |
| Cloud Gray | `#eaeaea` | `--color-cloud-gray` | neutral | Pale card and illustration detail; treat as supporting imagery tone, not a major brand band. |
| Device Black | `#000000` | `--color-device-black` | neutral | Near-black text and device details, most visibly the phone frame and app-interface lettering. |
| Frosted Gray | `#d5d7da` | `--color-frosted-gray` | accent | Soft control surface and subtle interface detail, including the pale rounded Read more button. |
| Blue Veil | `#c1cbda` | `--color-blue-veil` | accent | Low-opacity cool tint within decorative hero imagery and blended background effects. |

### Semantic aliases

`--color-canvas` → `#dfdfdf` (Soft Canvas) · `--color-surface` → `#d5d7da` (Frosted Gray) · `--color-text` → `#995bb9` (Orchid Signal) · `--color-text-muted` → `#8190a0` (Slate Mist) · `--color-text-subtle` → `#9aa1b1` (Quiet Steel) · `--color-accent` → `#995bb9` (Orchid Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#995bb9` | `#dfdfdf` | 3.46:1 | AA-large |
| `#995bb9` | `#d5d7da` | 3.2:1 | AA-large |
| `#8190a0` | `#dfdfdf` | 2.45:1 | fail |
| `#8190a0` | `#d5d7da` | 2.26:1 | fail |
| `#9aa1b1` | `#dfdfdf` | 1.94:1 | fail |
| `#9aa1b1` | `#d5d7da` | 1.8:1 | fail |
| `#995bb9` | `#dfdfdf` | 3.46:1 | AA-large |
| `#995bb9` | `#d5d7da` | 3.2:1 | AA-large |

### Gradients

- `linear-gradient(0deg, rgb(255, 255, 255) 91%, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.33))`
- `linear-gradient(0deg, rgba(132, 161, 208, 0.33), rgba(0, 0, 0, 0))`
- `radial-gradient(140% 119% at 50% 0%, rgba(105, 201, 102, 0.4) 14%, rgba(39, 187, 219, 0.33) 36%, rgba(139, 71, 206, 0.2) 52%, rgba(218, 64, 134, 0.1) 70%, rgba(255, 149, 116, 0) 82%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(-333deg, rgb(96, 235, 140) -100%, rgb(235, 205, 96) -60%, rgb(235, 133, 96) -20%, rgb(159, 96, 235) 20%, rgb(96, 180, 235) 60%, rgb(96, 235, 110) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| averta standard | `--font-body` | webfont | 500, 400, 600, 800, 700 | All page typography, from oversized hero headlines to body copy, feature labels, and links. | Nunito Sans |

- **averta standard:** Use a friendly geometric sans; headlines are very heavy and tightly tracked, while body copy stays medium-weight and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.42, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 98px | 800 | 1.2 | -0.003em | — | averta standard | Oversized promotional headline treatment in hero artwork. |
| h1 | 62.5px | 800 | 1.1 | -0.016em | — | averta standard | Primary hero heading about tracking stocks and crypto. |
| h2 | 52.5px | 800 | 1.35 | -0.006em | — | averta standard | Major section headings if additional content sections are built. |
| h3 | 50.5px | 800 | 1.35 | -0.006em | — | averta standard | Feature or product-story headings. |
| h4 | 28px | 700 | 1.15 | 0 | — | averta standard | Individual feature names, such as “Track your investments.” |
| body | 17px | 500 | 1.35 | -0.006em | — | averta standard | Hero supporting sentence and feature descriptions. |
| caption | 15px | 400 | 1.4 | 0 | — | averta standard | Small secondary notes and supporting interface copy. |
| link | 14.5px | 500 | 1 | 0 | — | averta standard | Compact CTA labels and navigation links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 12, 16, 18, 20, 30, 32, 40, 44, 58 px.
- Section rhythm 58px · element gap 16px · card padding 37px · max content width —.

The hero reads as a two-part composition: a tall, bright content panel on the left and a large app preview over soft colour on the right. Keep the left column text aligned to a consistent inset, with the headline, concise description, quiet CTA row, and vertically stacked feature list. The measured spacing uses a comfortable rhythm, with clear separation between hero content and feature items. No maximum page width was measured; preserve the broad, airy composition rather than forcing a narrow centered container.

## Shape & elevation

- Radius: link `9999px` · xs `18px` · sm `22px`
- Shadow `inset` (other): `rgba(97, 110, 124, 0.114) 0px 4px 15px 0px, rgba(255, 255, 255, 0.39) 0px 1px 1px 0px inset, rgba(34, 50, 94, 0.08) 0px 1px 1px 0px`
- Shadow `inset-2` (card): `rgba(71, 83, 109, 0.13) 1px 1px 20px 0px, rgba(255, 255, 255, 0.88) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.53) 1px 0px 0px 0px inset`
- Shadow `inset-3` (other): `rgba(255, 255, 255, 0.33) 0px -1px 0.5px 0px inset, rgba(255, 255, 255, 0.33) -1px 0px 0.5px 0px inset`
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

Surfaces rely on soft inset highlights and subtle, diffused shadows rather than visible borders. The app preview and white content area should feel gently lifted from the surrounding canvas, with rounded corners and delicate edge separation. Keep controls pill-shaped and light, avoiding heavy outlines or deep shadows.

## Imagery

Use a high-fidelity iPhone mock-up displaying a clean investment-tracking interface, with legible holding cards and simple green and red charts. Frame the device vertically and let it float against a softly coloured, atmospheric backdrop. Small translucent stock-symbol tiles can add depth. Avoid treating the mock-up’s market colours as the broader site palette; keep feature icons simple and purple.

## Components

### Hero headline

Large, heavy sentence-case heading with a vivid purple-to-blue-to-teal gradient treatment, split across several short lines.

### App preview

Tall, rounded iPhone mock-up showing investment holdings, small performance figures, and compact green and red line charts.

### Primary text CTA

Pale-gray pill-shaped “Read more” link with medium-weight text and generous horizontal padding.

### Secondary CTA

Quiet launch-notification link beside the main CTA, rendered in muted gray rather than as a filled button.

### Feature list

Single-column stack of compact feature entries, each pairing a small purple line icon with a dark label and muted explanatory copy.

### Hero backdrop

Soft, blurred pastel colour field behind the device, with faint floating market-symbol tiles and restrained decorative detail.

### Measured component styles

- **Link** (“Read more”): background #d6d9dc · text #394766 · radius 100px · padding 12.8px 29.6px 13.6px 29.6px · 500 16px averta standard
- **Card** (“Stocketa Checking your stocks & crypto s”): transparent background · text #000000 · radius 0px · padding 16px 57.6px · 400 16px averta standard · shadow rgba(71, 83, 109, 0.13) 1px 1px 20px 0px, rgba(255, 255, 255, 0.88) 0px 1px 1px 
- **Navigation item**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px averta standard

## Do

- Lead with one bold, benefit-focused headline.
- Keep the app interface prominent and readable.
- Use soft gradients as atmosphere, not as flat section fills.
- Set supporting text in restrained dark and muted neutrals.
- Present features as a simple vertical list with small icons.
- Use rounded, pale controls with low visual emphasis.

## Don't

- Do not turn the page into a dense financial dashboard.
- Do not make market-chart greens and reds the main brand palette.
- Do not add heavy borders or strong drop shadows.
- Do not use multiple competing CTA buttons.
- Do not use all-caps or widely tracked display headings.
- Do not replace the soft backdrop with a loud, saturated gradient.

## Agent prompt

Build a new Stocketa page that feels like a calm, polished investment app introduction. Use #dfdfdf Soft Canvas around bright #ffffff Gallery White panels, with #8190a0 Slate Mist and #9aa1b1 Quiet Steel for secondary copy. Set headings in a heavy, friendly geometric sans similar to Averta Standard, and use #995bb9 Orchid Signal for restrained accents. Pair a concise, oversized headline with a clear app-device preview; place the primary message and a quiet pill-shaped CTA in a spacious content column. Use soft pastel gradient atmosphere behind product imagery, not as loud structural bands. Keep feature content in a single airy stack with small purple line icons, dark labels, and muted descriptions. Favor subtle inset highlights, gentle shadows, rounded surfaces, and an uncluttered hierarchy. Do not invent additional brand colours or measured dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero: tall white text panel on the left, floating phone preview over a soft gradient field on the right; features continue below. | Benefit-led headline, Primary and secondary CTA, Feature overview | Gradient headline, Phone mock-up, Pastel backdrop, Pill CTA, Purple feature icons |

## Source CSS custom properties (selected)

```css
--subtext-color: rgba(187,205,227,0.7);
--feature-radius: 38px;
```

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