Midnight Magenta template

← Templates

Midnight Magenta

dark

Pure black and white restraint, ruthless minimalism, one magenta moment.

darkpremiumdevelopergeistminimal

━━ Use this template

━━ Live preview

━━ Name

Midnight Magenta

pure black canvas, white type, one electric magenta accent, tight geometric sans

━━ Colors

14 tokens
primary
#ffffff
on-primary
#000000
accent
#ff0080
accent-hover
#ff3399
accent-soft
#330018
surface
#000000
surface-1
#0a0a0a
surface-2
#171717
on-surface
#ededed
neutral
#a3a3a3
border
#262626
success
#0070f3
error
#ff0000
warning
#f5a623

━━ Typography

5 tokens
display-2xlGeist · 5rem · 700
The quick brown fox jumps
display-lgGeist · 3rem · 700
The quick brown fox jumps
headline-mdGeist · 1.5rem · 600
The quick brown fox jumps
body-mdGeist · 1rem · 400
The quick brown fox jumps
code-mdGeist Mono · 0.875rem · 500
The quick brown fox jumps

━━ Rounded

5 tokens
none
0
sm
4px
md
6px
lg
8px
full
9999px

━━ Spacing

6 tokens
1
4px
2
8px
4
16px
6
24px
8
32px
16
64px

━━ Components

4 tokens
button-primary
backgroundColor:{colors.primary}→ #ffffff
textColor:{colors.on-primary}→ #000000
rounded:{rounded.md}→ 6px
padding:8px 14px
button-primary-hover
backgroundColor:{colors.neutral}→ #a3a3a3
textColor:{colors.on-primary}→ #000000
button-accent
backgroundColor:{colors.accent}→ #ff0080
textColor:{colors.on-primary}→ #000000
rounded:{rounded.md}→ 6px
padding:8px 14px
card
backgroundColor:{colors.surface-1}→ #0a0a0a
rounded:{rounded.lg}→ 8px
padding:24px

━━ Raw DESIGN.md

━━ Lint

091
  • orphaned-tokens

    Color token `colors.accent-hover` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.accent-soft` is defined but never referenced.

  • orphaned-tokens

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

  • orphaned-tokens

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

  • orphaned-tokens

    Color token `colors.on-surface` 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 · 5 rounded · 6 spacing · 4 components