Fintech Indigo template

← Templates

Fintech Indigo

light

Professional payments feel. Indigo, refined gradients, trust-coded.

lightfintechpremiumindigotrust

━━ Use this template

━━ Live preview

━━ Name

Fintech Indigo

deep indigo primary, crisp white surfaces, navy text, clean neutral grotesque sans

━━ Colors

14 tokens
primary
#635bff
on-primary
#ffffff
primary-hover
#7a5af8
primary-soft
#f2f1ff
surface
#ffffff
surface-1
#f6f9fc
surface-2
#fafbfc
on-surface
#0a2540
neutral
#425466
neutral-2
#697386
border
#e3e8ee
success
#3ecf8e
error
#ed5f74
warning
#ffaa3c

━━ Typography

5 tokens
display-lgInter · 3.5rem · 600
The quick brown fox jumps
headline-mdInter · 1.625rem · 600
The quick brown fox jumps
body-mdInter · 1.0625rem · 400
The quick brown fox jumps
body-smInter · 0.9375rem · 400
The quick brown fox jumps
code-mdGeist Mono · 0.875rem · 500
The quick brown fox jumps

━━ Rounded

6 tokens
none
0
sm
4px
md
6px
lg
10px
xl
16px
full
9999px

━━ Spacing

6 tokens
1
4px
2
8px
4
16px
6
24px
8
32px
12
48px

━━ Components

5 tokens
button-primary
backgroundColor:{colors.primary}→ #635bff
textColor:{colors.on-primary}→ #ffffff
rounded:{rounded.md}→ 6px
padding:10px 16px
button-primary-hover
backgroundColor:{colors.primary-hover}→ #7a5af8
textColor:{colors.on-primary}→ #ffffff
button-secondary
backgroundColor:transparent
textColor:{colors.on-surface}→ #0a2540
rounded:{rounded.md}→ 6px
padding:10px 16px
card
backgroundColor:{colors.surface}→ #ffffff
rounded:{rounded.lg}→ 10px
padding:32px
badge
backgroundColor:{colors.primary-soft}→ #f2f1ff
textColor:{colors.primary}→ #635bff
rounded:{rounded.full}→ 9999px
padding:2px 10px

━━ Raw DESIGN.md

━━ Lint

091
  • contrast-ratio

    Component `badge` has contrast ratio 4.21:1 (background #f2f1ff / text #635bff). WCAG AA requires 4.5:1.

  • orphaned-tokens

    Color token `colors.surface-1` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.surface-2` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.neutral` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.neutral-2` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.border` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.success` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.error` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.warning` is defined but never referenced.

  • token-summary

    Tokens: 14 colors · 5 typography · 6 rounded · 6 spacing · 5 components