Dense Indigo Dark template

← Templates

Dense Indigo Dark

dark

Software-grade dark mode. A single indigo signal, geometric and dense.

darksaasmodernpurplegeometric

━━ Use this template

━━ Live preview

━━ Name

Dense Indigo Dark

near-black canvas, single indigo accent, tone-lifted surfaces, compact neutral sans

━━ Colors

15 tokens
primary
#5e6ad2
on-primary
#ffffff
primary-hover
#7170ff
primary-soft
#1e1f3a
surface
#08090a
surface-1
#101113
surface-2
#18191c
surface-3
#222326
on-surface
#f7f8f8
neutral
#8a8f98
neutral-2
#62666d
border
#23252a
success
#4cb782
error
#eb5757
warning
#f2c94c

━━ Typography

6 tokens
display-lgInter · 3.5rem · 700
The quick brown fox jumps
display-mdInter · 2.5rem · 700
The quick brown fox jumps
headline-mdInter · 1.5rem · 600
The quick brown fox jumps
body-mdInter · 0.9375rem · 400
The quick brown fox jumps
body-smInter · 0.8125rem · 400
The quick brown fox jumps
label-mdInter · 0.75rem · 500
The quick brown fox jumps

━━ Rounded

7 tokens
none
0
xs
3px
sm
6px
md
8px
lg
10px
xl
14px
full
9999px

━━ Spacing

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

━━ Components

5 tokens
button-primary
backgroundColor:{colors.primary}→ #5e6ad2
textColor:{colors.on-primary}→ #ffffff
rounded:{rounded.sm}→ 6px
padding:8px 16px
button-primary-hover
backgroundColor:{colors.primary-hover}→ #7170ff
textColor:{colors.on-primary}→ #ffffff
button-secondary
backgroundColor:{colors.surface-2}→ #18191c
textColor:{colors.on-surface}→ #f7f8f8
rounded:{rounded.sm}→ 6px
padding:8px 16px
card
backgroundColor:{colors.surface-1}→ #101113
rounded:{rounded.md}→ 8px
padding:24px
badge
backgroundColor:{colors.primary-soft}→ #1e1f3a
textColor:{colors.primary-hover}→ #7170ff
rounded:{rounded.full}→ 9999px
padding:2px 8px

━━ Raw DESIGN.md

━━ Lint

0101
  • contrast-ratio

    Component `button-primary-hover` has contrast ratio 3.84:1 (background #7170ff / text #ffffff). WCAG AA requires 4.5:1.

  • contrast-ratio

    Component `badge` has contrast ratio 4.16:1 (background #1e1f3a / text #7170ff). WCAG AA requires 4.5:1.

  • orphaned-tokens

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

  • orphaned-tokens

    Color token `colors.surface-3` 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: 15 colors · 6 typography · 7 rounded · 7 spacing · 5 components