The Medico24 brand kit, for partners and engineers.
Everything you need to represent Medico24 consistently - logos, colours, typography and developer tokens. Designed for partners, journalists, designers and engineers working with our platform.
Brand logos
Files: logo.png
Use on light backgrounds.
Files: branding/logo-white.svg, branding/logo-white.png
Use on dark or branded backgrounds.
File: logo.png
Browser favicon and small-format icon.
Files: branding/logo-round.svg, branding/logo-round.png
Circular variant for avatars and social.
Files: branding/logo-square.svg, branding/logo-square.png
1:1 ratio for store listings and tiles.
Colour system
Our palette is shared with the Flutter mobile app, so colours stay identical across every surface a patient sees.
#E23744
HSL: 356° 77% 55%
Buttons, links, primary accents.
#F8D149
HSL: 46° 93% 63%
Secondary actions, badges, warnings.
#2781E7
HSL: 204° 81% 53%
Informational states, data viz, links.
Usage examples
Buttons
Text colours
Primary text (red)
Secondary text (yellow)
Accent text (blue)
Muted foreground
Typography
Primary font
Outfit
Google Fonts - Outfit
Display large
The quick brown fox
Heading 1
The quick brown fox
Heading 2
The quick brown fox
Heading 3
The quick brown fox
Body
The quick brown fox jumps over the lazy dog.
Small
The quick brown fox jumps over the lazy dog.
Developer resources
--primary: 356 77% 55%
--secondary: 46 93% 63%
--accent: 204 81% 53%
--foreground: 0 0% 11%
--background: 0 0% 100%
Use with hsl(var(--primary))
bg-primary text-primary-foreground
bg-secondary text-secondary-foreground
bg-accent text-accent-foreground
text-primary hover:text-primary/90
border-primary/50