What colors are in the DeFi Signal palette?

The DeFi Signal palette has 5 colors: #08090D, #171A24, #C6FF3D, #FF3DA5, #F0F2F6.

Where can I use this palette?

It's a Balanced palette — well suited to websites, product ui, presentations, marketing pages.

Is the DeFi Signal palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.76:1. 6 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the DeFi Signal palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #08090D Jet Black Secondary #171A24 Graphite Accent #C6FF3D Electric Lime Primary #FF3DA5 Deep Pink Surface #F0F2F6 Cool White

DeFi Signal

Bold DeFi landing pages 5 colors

Electric lime and magenta at full volume over ink — built for a landing page that has three seconds to convince. Structure stays black so the signal pops.

Open in generator All palettes

Text Jet Black — #08090D

Secondary Graphite — #171A24

Accent Electric Lime — #C6FF3D

Primary Deep Pink — #FF3DA5

Surface Cool White — #F0F2F6

Contrast matrix

Text on Surface 17.76 AAA

Primary on Surface 2.90 Fail

Text on Secondary 1.15 Fail

Surface on Primary 2.90 Fail

Accent on Text 16.84 AAA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #08090D;
  --secondary: #171A24;
  --accent: #C6FF3D;
  --primary: #FF3DA5;
  --surface: #F0F2F6;
}

$defi-signal-text: #08090D;
$defi-signal-secondary: #171A24;
$defi-signal-accent: #C6FF3D;
$defi-signal-primary: #FF3DA5;
$defi-signal-surface: #F0F2F6;

// tailwind.config.js — theme.extend.colors
colors: {
  'defi-signal': {
    'text': '#08090D',
    'secondary': '#171A24',
    'accent': '#C6FF3D',
    'primary': '#FF3DA5',
    'surface': '#F0F2F6',
  },
}

{
    "defi-signal": {
        "text": {
            "value": "#08090D",
            "type": "color"
        },
        "secondary": {
            "value": "#171A24",
            "type": "color"
        },
        "accent": {
            "value": "#C6FF3D",
            "type": "color"
        },
        "primary": {
            "value": "#FF3DA5",
            "type": "color"
        },
        "surface": {
            "value": "#F0F2F6",
            "type": "color"
        }
    }
}

{
    "text": "#08090D",
    "secondary": "#171A24",
    "accent": "#C6FF3D",
    "primary": "#FF3DA5",
    "surface": "#F0F2F6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#08090D
#171A24
#C6FF3D
#FF3DA5
#F0F2F6

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

DeFi Signal

Contrast matrix

Export tokens

How the roles work

Related palettes