Shares.io
A precise, fintech-product interface built on a white canvas with light-gray panels and a single electric-violet accent for calls to action. The system reads as modern European fintech — large weight-500 Aeonik headlines, very generously rounded cards (24px) and pill-shaped controls (99px), real product UI (portfolio dashboards, mobile app screens, JSON snippets) shown floating inside soft-shadowed mockup cards, and a deep-black footer that closes the long-scroll landing page. Brand voltage comes almost entirely from the Aeonik display type and the violet CTA against an otherwise grayscale palette.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 500 · 1.05
The quick brown fox jumps
display-lg
56px · 500 · 1.05
The quick brown fox jumps
title-lg
36px · 500 · 1.15
The quick brown fox jumps
title-md
26px · 500 · 1.15
The quick brown fox jumps
body-lg
20px · 500 · 1.2
The quick brown fox jumps
button
14px · 500 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| ml | 20px | |
| lg | 24px | |
| lg-plus | 28px | |
| xl | 32px | |
| xxl | 48px | |
| xxl-plus | 52px | |
| section | 96px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| xs | 4px | |
| sm | 10px | |
| md | 16px | |
| lg | 24px | |
| xl | 30px | |
| xxl | 36px | |
| huge | 60px | |
| pill | 99px |
FAQ
- What colors does Shares.io use?
- Shares.io's core palette includes #594ff4, #3898ec, #1f1f1f, #222222, #252525. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Shares.io DESIGN.md.
- What font does Shares.io use?
- Shares.io's primary typeface is Aeonik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Shares.io design system?
- A precise, fintech-product interface built on a white canvas with light-gray panels and a single electric-violet accent for calls to action. The system reads as modern European fintech — large weight…