A dark banking system where gains read green and the primary stays blue for everything else. Two tiers of near-black keep dense numbers from vibrating, and the text tone is desaturated so the screen never goes to a void.
Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.
:root {
--text: #0A0E16;
--secondary: #141A28;
--primary: #3B82F6;
--accent: #34D399;
--surface: #E7ECF5;
}
$midnight-fintech-text: #0A0E16; $midnight-fintech-secondary: #141A28; $midnight-fintech-primary: #3B82F6; $midnight-fintech-accent: #34D399; $midnight-fintech-surface: #E7ECF5;
// tailwind.config.js — theme.extend.colors
colors: {
'midnight-fintech': {
'text': '#0A0E16',
'secondary': '#141A28',
'primary': '#3B82F6',
'accent': '#34D399',
'surface': '#E7ECF5',
},
}
{
"midnight-fintech": {
"text": {
"value": "#0A0E16",
"type": "color"
},
"secondary": {
"value": "#141A28",
"type": "color"
},
"primary": {
"value": "#3B82F6",
"type": "color"
},
"accent": {
"value": "#34D399",
"type": "color"
},
"surface": {
"value": "#E7ECF5",
"type": "color"
}
}
}
{
"text": "#0A0E16",
"secondary": "#141A28",
"primary": "#3B82F6",
"accent": "#34D399",
"surface": "#E7ECF5"
}
/* Paste into Canva → Brand Kit → Brand Colors */ #0A0E16 #141A28 #3B82F6 #34D399 #E7ECF5