Brand Style GuideBuild on brand, every time.
Everything you need to ship pages, campaigns, and content that looks unmistakably Flooencer. Copy the code. Follow the rules. Ship it.
Colours
The Flooencer palette. Click any swatch to copy the hex.
Core Palette
Accent Palette
Primary Gradient
/* CSS Variables */
--purple: #6513D1;
--deep-purple: #280752;
--near-black: #0f0f0f;
--white: #ffffff;
--off-white: #efefef;
--green: #2FC12F;
--amber: #FFB717;
--red: #D31A35;
--lavender: #cd9cec;
--mid-purple: #7755FA;
/* Primary Gradient */
--gradient-primary: linear-gradient(135deg, #280752 0%, #6513D1 100%);
/* Text gradient */
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;Typography
Two typefaces. Degular Display for all headings and UI. DM Sans for body copy.
--font-display: 'Degular Display', 'Helvetica Neue', sans-serif;
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
/* Headings — always Degular Display */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
}
/* Body — always DM Sans */
body, p, li { font-family: var(--font-body); line-height: 1.6; }
/* Labels / pills */
.label {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}Logo & Icon
Eight approved logo variants — full wordmark and icon-only, across four colourways. Always include the "." — it's part of the mark.
Full Wordmark
Gradient
Purple
White
BlackIcon Only
Gradient
Purple
White
BlackComponents
Buttons, pills, and cards — light and dark contexts.
Buttons — Light
Buttons — Dark
Pills & Tags — Always DM Sans Bold, ALL CAPS
Cards
/* Primary button — gradient */
.btn-primary {
background: linear-gradient(135deg, #280752 0%, #6513D1 100%);
color: #fff;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
border-radius: 8px;
padding: 12px 24px;
border: none;
}
/* Secondary button — outlined */
.btn-secondary {
background: transparent;
color: #6513D1;
border: 1.5px solid #6513D1;
border-radius: 8px;
padding: 12px 24px;
}
/* Pill / Tag */
.pill {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 12px;
border-radius: 100px;
background: #f3eaff;
color: #6513D1;
border: 1px solid #d4b3f5;
}Spacing & Layout
8px base grid. All spacing is a multiple of 8.
/* Layout tokens */
--max-width: 1200px;
--page-padding-x: 64px; /* desktop */
--page-padding-x-m: 24px; /* mobile */
--section-padding: 80px 64px;
--card-padding: 28px 32px;
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 16px;CSS Snippets
Ready-to-paste for common Flooencer patterns.
Hero — gradient background
.hero-gradient {
background: linear-gradient(135deg, #280752 0%, #6513D1 100%);
padding: 96px 64px;
color: #fff;
}
.hero-gradient h1 {
font-family: 'Degular Display', sans-serif;
font-size: 72px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
}Hero — light background with gradient text
.hero-light h1 .gradient-word {
background: linear-gradient(135deg, #280752 0%, #6513D1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Imagery
Real creators, real results. Never staged stock.
- ✓ Real creators in natural work environments
- ✓ SaaS product UI in clean device mockups
- ✓ High contrast, editorial quality
- ✓ Brand gradient as overlay on dark photography
- ✓ Diverse, professional but human talent
- ✗ Handshake / lightbulb / whiteboard stock
- ✗ Oversaturated or heavily filtered images
- ✗ Competitor brand logos visible
- ✗ Generic "team collaboration" poses
- ✗ AI-generated faces that look uncanny
AI Image Generation Prefix
Always start AI image prompts with this:
Brand Strategy
Who we are, who we serve, and why it matters.
Flooencer is the B2B influencer marketing agency for SaaS, AI and Tech.
Flooencer runs influencer marketing campaigns for B2B SaaS and tech companies. We manage everything — creator sourcing, contracts, briefs, content, and reporting.
B2B buying has changed. Your buyers are on LinkedIn, YouTube, and podcasts — learning from creators they trust before they ever speak to your sales team. Flooencer helps technology companies get in front of those buyers through the right creators, at the right time, with content that actually converts.
Brand Attributes
Copy, Voice & Tone
One source of truth for how Flooencer sounds.
“Creator content outperforms paid ads for B2B consideration. Here's the data.”
“We believe creator marketing could potentially be a great fit for some B2B brands.”
“We find the creator. We write the brief. We manage the campaign. You get the results.”
“Our comprehensive end-to-end managed service encompasses all aspects of the influencer marketing lifecycle.”
“Armis ran 3 campaigns. 44 posts. Over £44k in creator spend. Still running.”
“We deliver incredible results for some of the world's leading technology companies.”