A premium fintech startup that blends editorial photography with clean SaaS UI to project reliability and modern innovation.
02
Color
#5266EBAccent
#EDEDF3Ink
#C3C3CCInk soft
#171721BG
#1E1E2ABG soft
#9CB4E8BG quiet
rgba(237,237,243,0.1)Line
Deep, muted dark backgrounds with high-contrast light text and a single vibrant blue accent.
03
Typography
transitional-serif · humanist-sans
display56px · 500
h242px · 500
subtitle28px · 400
body16px · 420
caption12px · 400
Use transitional-serif for prominent display headlines to establish a premium editorial tone. · Use humanist-sans for body text and navigation to ensure high readability and a friendly demeanor. · Avoid decorative or overly stylized typefaces that might detract from the refined aesthetic.
04
Spacing
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px
Standard 4px base grid with specific horizontal and vertical padding increments.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(237,237,243,0.1)
0px 0px 6px 0px rgba(86, 86, 118, 0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed photographic hero followed by constrained grid sections.
07
Motion & Interaction
220msmicro
300mssmall
500msmedium
cubic-bezier(0, 0, 0.2, 1)easing
Smooth background-color and text-color transitions on hover states. · Subtle transform transitions for interactive elements.
Color and background-color transitions over 300ms. · Transform scale transitions over 300ms.
08
Components
buttonPill-shaped primary buttons with a solid blue (#5266EB) background and white text.
cardLarge feature cards with rounded corners (12px) and soft, subtle shadows.
chipNot prominently featured in the visible sections.
inputIntegrated inline form with a transparent background, rounded pill shape, and placeholder text.
heroFull-viewport height, background image with centered serif headline and inline form.
09
Voice & Don'ts
ToneConfident, professional, and forward-thinking.
HeadlinesBold, concise, and declarative (e.g., 'Radically different banking').
CTAsDirect and action-oriented (e.g., 'Open account').
don't use bright, saturated backgrounds — screenshot shows deep, muted dark backgrounds instead.
don't use purely geometric or grotesque sans-serif for headlines — screenshot shows a refined transitional serif font.
don't use sharp, boxy corners — screenshot shows consistently rounded corners (4px to pill-shaped).
don't use multiple competing accent colors — screenshot shows a single dominant blue (#5266EB) accent.
don't use dense, cluttered layouts — screenshot shows generous whitespace and centered alignment.
don't use harsh, high-contrast borders — screenshot shows very subtle, semi-transparent dividers.
Captured from the live site · real computed styles
11
System prompt
A premium fintech SaaS design system characterized by deep, muted dark backgrounds and a single vibrant blue accent. It features a mix of transitional-serif for display headlines and humanist-sans for body text, creating an editorial yet modern feel. The layout is clean and spacious, utilizing generous whitespace and centered alignment. Key colors include a dark navy background (#171721), light off-white text (#EDEDF3), and a signature blue (#5266EB) for primary actions. Critical constraints: maintain the refined, uncluttered aesthetic; avoid multiple accent colors; and ensure high readability through proper type contrast and spacing.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
