JoinArc
A restrained, fintech-editorial interface for Arc's cash-management product — warm off-white and pure-white canvases, near-black ink, and a single muted teal (#206d69) reserved for primary CTAs. The system reads as serious, institutional, and quietly premium — light-weight GT America display headlines (weight 300 at 64px), product-dashboard screenshots shown inside soft floating cards, alternating cream/white/near-black bands, and small pill tags labelling each feature. Brand voltage comes from the thin display type and the realistic product UI, not from saturated color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
64px · 300 · 1.1
The quick brown fox jumps
heading
30px · 400 · 1.15
The quick brown fox jumps
body
16px · 500 · 1.25
The quick brown fox jumps
button
30px · 400 · 1.15
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 30px | |
| xxl | 32px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 10px | |
| xl | 16px | |
| xxl | 20px |
FAQ
- What colors does JoinArc use?
- JoinArc's core palette includes #206d69, #11a080, #70e0b4, #68b9d9, #cbb46c. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the JoinArc DESIGN.md.
- What font does JoinArc use?
- JoinArc's primary typeface is GT America. 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 JoinArc design system?
- A restrained, fintech-editorial interface for Arc's cash-management product — warm off-white and pure-white canvases, near-black ink, and a single muted teal (#206d69) reserved for primary CTAs. The…