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

# Shares · Design System

> Quiet editorial clarity against vivid financial gradients.

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

Shares presents financial infrastructure through restrained editorial layouts, crisp typography and vivid purple hero imagery. Generous white space and structured proof points keep the page focused on institutional trust and product breadth.

## North star

Keep the content calm and highly legible on white, reserving saturated purple drama for imagery and key campaign moments.

## Overview

The homepage pairs a predominantly white canvas with a dramatic, image-led purple hero and a matching dark-to-purple footer treatment. Midnight Ink (#20192b) anchors headings and primary copy, while the screenshot’s purple glow is expressed through hero imagery rather than treated as a flat page-wide colour. Aeonik gives headings and navigation a clean, contemporary character; Inter handles compact supporting text, and Aeonikmono marks uppercase eyebrow labels with a technical editorial feel. The opening hero is deliberately sparse: brand navigation sits above a large, left-aligned statement over luminous vertical imagery. Below, centered headline copy and quiet client marks transition into spacious product and capability sections. Cards use fine gray hairlines and restrained framing instead of conspicuous shadows. Product visuals add saturated purple, coral and blue, while case studies and news use image-led panels. The overall effect is institutional and modern without sacrificing visual energy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant canvas for the main content, section backgrounds, card interiors, and the light navigation CTA. |
| Midnight Ink | `#20192b` | `--color-midnight-ink` | brand | Primary heading and body-text colour; also grounds dark footer and inverse content. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Inverse footer and dark section surface; supports the fade beneath the purple campaign imagery. |
| Quiet Gray | `#d9d9d9` | `--color-quiet-gray` | neutral | Fine card outlines, separators, and subtle boundaries between editorial content panels. |
| Caption Gray | `#999999` | `--color-caption-gray` | neutral | Muted footer and secondary text; keep it subordinate to the main ink typography. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Stage Black) · `--color-text` → `#20192b` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d9d9d9` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#20192b` | `#ffffff` | 17:1 | AAA |
| `#20192b` | `#000000` | 1.24:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 26%, rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400 | Body copy, captions, and compact supporting text. | Inter |
| Aeonik | `--font-display` | webfont | 400, 500 | Headings, navigation, card titles, and links. | Manrope |
| Aeonikmono | `--font-mono` | webfont | 500 | Eyebrow labels and technical-style micro-headings. | IBM Plex Mono |

- **Inter:** Regular weight with comfortable line spacing; keep small text readable and unembellished.
- **Aeonik:** Use regular for most headings and medium for navigation; clean sans forms with no decorative tracking.
- **Aeonikmono:** Medium weight, uppercase, and visibly letter-spaced for compact section identifiers.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.05 | 0 | — | Aeonik | Large hero statement over the purple campaign image. |
| h2 | 32px | 400 | 1.15 | 0 | — | Aeonik | Major section headlines, including the centered legacy-systems statement. |
| h3 | 24px | 400 | 1.3 | 0 | — | Aeonik | Product, capability, case-study, and news-card titles. |
| h4 | 20px | 400 | 1.5 | 0 | — | Aeonik | Smaller supporting headings within content blocks. |
| body | 14px | 400 | 1.5 | 0 | — | Inter | Explanatory copy on product cards and editorial sections. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact source labels, legal notes, and secondary details. |
| nav | 14px | 500 | 1 | 0 | — | Aeonik | Top-level navigation links and header actions. |
| eyebrow | 12px | 500 | 1.67 | 0.067em | uppercase | Aeonikmono | Uppercase section identifiers such as SOLUTIONS and NEWSROOM. |
| code | 12px | 500 | 1.67 | 0.067em | uppercase | Aeonikmono | Technical or metadata-style uppercase labels where present. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 28, 36, 48, 96 px.
- Section rhythm 48px · element gap 24px · card padding — · max content width 1224px.

Use a centered content frame with a measured maximum width of 1224px and align most sections to its left edge. The opening hero is full-width and image-led, with its heading anchored low and left; a narrow announcement strip sits above the navigation. Follow with a client-logo row, a centered statement, then spacious product and capability grids. Case studies and news shift to split editorial layouts. The overall density is comfortable, with broad vertical gaps between sections and restrained card padding.

## Shape & elevation

- Radius: nav `4px` · xs `1px` · sm `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page reads as mostly flat: white sections sit directly on the canvas, with cards distinguished by fine gray borders rather than visible shadows. Image panels provide the main depth and colour contrast. The hero and footer use dark gradients within imagery to create layered atmosphere while preserving readable white text.

## Imagery

Use atmospheric vertical purple light as the hero and closing CTA backdrop, with darkened lower edges for contrast. Product cards show colorful interface imagery, while case studies and news rely on real-world photography and brand marks. Keep diagrams simple and fine-lined; avoid decorative imagery that competes with copy.

## Components

### Announcement strip

A narrow dark top band with centered uppercase monospace news text and a short read-more action.

### Header navigation

White logo and links overlay the hero image; the contact action is a compact white button with dark text.

### Client logo row

A restrained trust strip with a small uppercase label, a subtle divider, and horizontally aligned partner marks.

### Solution cards

Three equal product columns pair vivid interface imagery with a title, concise explanation, and compact explore action.

### Capability cards

Three outlined columns combine delicate line illustrations, short Aeonik headings, and brief supporting descriptions.

### Editorial panels

Case studies and news use asymmetrical image-and-text compositions, with light hairlines separating stacked stories.

### Closing CTA and footer

A centered white CTA overlays purple-to-black imagery, followed by a large white information panel on the dark footer ground.

### Measured component styles

- **Primary button** (“Solutions”): transparent background · text #ffffff · radius 0px · padding 16px 24px · 500 14px Aeonik
- **Link** (“Wealth Scalable technology allowing weal”): transparent background · text #594ff4 · radius 0px · padding 0px · 400 14px Aeonik
- **Card** (“One platform, three verticals Wealth man”): transparent background · text #333333 · border 1px solid #d9d9d9 · radius 0px · padding 0px · 400 14px Aeonik
- **Navigation item** (“Solutions About us Get in touch”): transparent background · text #333333 · radius 0px · padding 0px · 400 14px Aeonik

## Do

- Use white space to separate major content chapters.
- Reserve saturated purple atmosphere for hero and CTA imagery.
- Set headings in Aeonik and supporting copy in Inter.
- Use uppercase, spaced monospace eyebrows for section labels.
- Frame cards with subtle gray hairlines rather than shadows.
- Keep product and editorial copy concise and scannable.

## Don't

- Do not turn the whole page into a dark theme.
- Do not invent additional brand colours for core UI.
- Do not use heavy shadows or rounded, playful card styling.
- Do not center every section; preserve left-aligned content grids.
- Do not let decorative product imagery overpower its labels.
- Do not use oversized, dense blocks of body copy.

## Agent prompt

Build a new institutional fintech page in the Shares visual style. Use Gallery White (#ffffff) as the main canvas, Midnight Ink (#20192b) for headings and copy, Quiet Gray (#d9d9d9) for hairline borders, and Stage Black (#000000) only for inverse footer or image-backed areas. Keep the layout inside a centered 1224px maximum-width frame, with generous white space and editorial left alignment. Use Aeonik-like sans typography for headings and navigation, Inter-like body copy, and spaced uppercase mono eyebrows. Create a vivid purple atmospheric hero image rather than filling ordinary sections with purple. Prefer crisp product imagery, restrained line illustrations, flat outlined cards, and image-led editorial panels. Keep navigation simple, text concise, and CTA contrast clear.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width purple image with overlaid announcement and navigation; hero statement aligned left near the lower edge. | announcement link, primary navigation, contact action | purple light imagery, white overlay text, compact header |
| 2 | logo-cloud | A slim client-mark row leads into a centered headline with extensive surrounding white space. | client credibility, brand recognition | horizontal logo strip, centered statement, white canvas |
| 3 | product-grid | Three equal columns with image-led product cards, short descriptions, and compact links. | solution discovery, per-card exploration | vivid product images, three-column grid, compact actions |
| 4 | feature-grid | Three outlined feature columns beneath a left-aligned section heading. | capability overview, scannable benefits | fine line illustrations, hairline dividers, three-column cards |
| 5 | gallery | Left-aligned introduction beside an image-and-text case-study composition. | customer proof, case-study exploration | brand marks, image-led feature, stacked story panels |
| 6 | content-feed | A large featured story image sits beside a vertical stack of smaller news links. | featured article, news navigation | editorial photo, stacked headlines, light dividers |
| 7 | footer | Centered CTA over purple-to-black imagery, followed by a broad light information panel within a dark footer. | contact conversion, social links, legal navigation | inverse image backdrop, white information panel, multi-column footer links |

## Source CSS custom properties (selected)

```css
--_brand-2026---colors--midnight: #20192b;
--color--neutral--gray-950: #1f1f1f;
--color--neutral--gray-400: #888;
--color--purple--tint-0: #594ff4;
--product-section_card-radius: 36px;
--color--neutral--gray-50: #f6f6f6;
--_interactions---nav-colour: rgba(255, 255, 255, 1);
--_brand-2026---neutrals--white: white;
--nav_surface-width: 1224px;
--_brand-2026---neutrals--gray15: #d9d9d9;
--color--neutral--gray-600: #5d5d5d;
--_brand-2026---neutrals--gray03: #f7f7f7;
--color--purple--tint-3: #bab4f6;
--color--neutral--gray-100: #e7e7e7;
--color--neutral--gray-500: #6d6d6d;
--color--neutral--gray-300: #b0b0b0;
--_brand-2026---neutrals--gray60: #666;
--color--purple--tint-4: #dad6f7;
--color--purple--tint-1: #7971f5;
--color--dark-pirple--tint-4: #e3e1e6;
--color--system--danger: #ff2d55;
--_brand-2026---neutrals--gray40: #999;
--color--neutral--gray-700: #4f4f4f;
--_brand-2026---colors--shares-purple: #5f34ec;
--color--neutral--gray-200: #d1d1d1;
--color--purple--tint-2: #9993f6;
--_interactions---nav-surface-padding-right: 0px;
--_interactions---nav-surface-padding-left: 0px;
--_brand-2026---neutrals--gray80: #333;
--_brand-2026---neutrals--black: black;
--color: white;
--color--neutral--gray-800: #454545;
--color--neutral--gray-900: #3d3d3d;
--effect--glass-colour-1: #f0f0f0e6;
--effect--glass-colour-2: #f0f0f066;
```

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