Make the complex understandable.
Use plain language, useful structure, and specific examples. Bring expertise without making people work to find the point.
Living document · v0.1
Eltropy
brand guidelines
The palette, type, and core brand voice are defined here. Use what's here exactly as specified — and check back as the system grows with new examples, templates, and product guidance.
Browse TemplatesLogo & Marks
The Mark And
Its Expressions.
The library includes SVG and PNG assets. Select an expression below to preview it, review its intended use, and download the production file.
Width
—
Height
—
Format
SVG & PNG
Clear space guidelines: Maintain minimum 48px padding around all logos. Never rotate, distort, or change colors. Use white or dark mark versions depending on background. For small applications (favicons, app icons), use dedicated icon versions provided.
Sizing & Clear Space
Full spacing guide showing minimum clear space (48px padding), width/height proportions, and recommended tilt angle (72°) for horizontal lockup.
Colour
Two Core Colours,
With A Supporting Accent.
Indigo and magenta remain the core brand colours. Solar Gold is an extended accent for dark-surface emphasis and creative highlights, while the neutrals continue to do the structural work. Click any value to copy it.
Supporting Accent
Solar Gold usage: Use #FDD942 selectively on Black or Midnight for high-visibility emphasis, creative highlights, and data visualisation. Use black text or marks on Solar Gold. It is a brand accent—not a functional warning or error colour.
Spectrums
Each brand colour has a spectrum from very light tints to dark shades. Use tints for hover states, backgrounds, and contrast relief. Use dark shades for emphasis on light surfaces.
Neutrals
Text sits on Midnight or White. Frost is a soft cool off-white for presentations and light surfaces where pure white feels stark. Mist and other mid greys are for borders, dividers, and non-critical metadata — never for body copy on a dark surface.
Functional colour exception: Success, warning, error, focus, and data-visualisation colours are product tokens—not brand accents. Define and test them against each surface before shipping, and never force indigo or magenta to represent a status they do not communicate clearly.
Gradient
Indigo To Magenta,
135°, Generated From Two Endpoints.
The gradient is the identity's most recognisable asset. Author only the two endpoints; the production export may contain generated sample stops to preserve an even OKLCH ramp across browsers.
Interpolation Comparison
Recommendation: ship OKLCH. The endpoints sit at L 52% and L 64% with almost identical chroma, so the only honest path between them is a straight lightness ramp. sRGB dips to a darker, duller purple at the midpoint; HSL overshoots into a violet brighter than either endpoint. OKLCH steps evenly, which is what the mark needs at small sizes. A two-stop sRGB fallback for older browsers is generated for you in the export panel.
- Angle135° for surfaces, bottom-left to top-right. The mark keeps its own fixed geometry.
- DirectionIndigo always precedes magenta. The order is not reversible.
- Don't author extra stopsUse the two endpoints only. Generated stops in the export are implementation detail.
- Don't set type in itGradient text fails contrast below 24px. Solid colour for anything readable.
Typography
Inter Tight Everywhere.
Poppins For Accent Moments.
One robust, hardworking family for the system. One accent family for personality. If a weight or style isn't listed here, it isn't part of the brand system; accessible system fallbacks remain permitted in production.
Aa
Inter Tight (Primary)
Everything. Headings, subheadings, body copy, navigation, buttons, tables, captions, dashboards, forms.
Light 300Regular 400Medium 500SemiBold 600
Compact design requires precision. Default tracking, 1.25 line-height. Robust at all sizes and weights from 13px to 95px.
Aa
Poppins (Optional accent)
Brand moments, marketing hero text, section callouts, limited short headlines where warmth and personality matter.
Regular 400Medium 500SemiBold 600Bold 700
Wide letterforms. Use sparingly — never for body text or anything requiring information density. Set restrained: −1.5% to −2% tracking above 32px.
Scale
Light & Dark Layouts
Dark mode
Where we live
The systems, in brief
Two colours shape the identity; everything else stays neutral. The type system moves from display all the way down to labels without changing families.
Updated July 2026 · Version 1.0
Light mode / Presentation
Where we live
The systems, in brief
Two colours shape the identity; everything else stays neutral. The type system moves from display all the way down to labels without changing families.
Updated July 2026 · Version 1.0
- Primary is Inter TightResponsive, compact, systems-oriented. Default choice for any new element.
- When to accentMarketing pages, hero moments, isolated callouts. Poppins draws the eye—use it for emphasis, not volume.
- NumeralsTabular figures in tables and dashboards, proportional in prose.
- No third brand familyUse Inter Tight and Poppins as specified. Add system fallbacks for resilience and accessibility.
- No Poppins paragraphsIts wide letterforms are hostile to reading at length. 3 lines maximum.
Voice & Tone · Messaging
Clear thinking.
Human conversations.
Draft working model · Validate with Marketing and Product Marketing
Eltropy speaks like a knowledgeable colleague: confident enough to lead, thoughtful enough to listen, and clear enough to make the next step feel possible.
The Personality
Our voice stays recognisable across a product screen, a customer story, a sales conversation, and a support moment.
Keep the relationship in view.
Sound warm, respectful, and present. Talk to people—not segments, tickets, or transactions.
Move with calm confidence.
Be direct and credible. Name the outcome, support it with evidence, and avoid inflated promises.
Messaging Pillars
Lead with the relationship, then explain the system that helps people do more with it.
Relationships first
Technology should make every interaction feel more considered, not more automated.
Clarity at scale
Bring the right information, context, and next step into focus for every team.
Progress you can feel
Connect practical improvements to outcomes people can see in their everyday work.
Built with empathy
Respect the people doing the work and the people depending on them.
One Voice.
Different Moments.
The voice stays clear, human, and assured. The tone shifts with the situation.
Product launch · Forward-looking
Make every conversation count—from the first hello to the next best step.
Lead with the customer outcome. Build energy through clarity, not hype.
Writing Rules
Practical checks for copy that feels like Eltropy.
Do
“See the full picture, then take the next right action.”
Don’t
“Unlock a revolutionary, best-in-class transformation engine.”
Do
Use active verbs, concrete outcomes, and language people use in real work.
Don’t
Hide the point behind jargon, stacked nouns, or claims without evidence.
Words Shape the Experience.
Use language that is direct, inclusive, and easy to carry across channels.
| Use this | Prefer this because | Avoid |
|---|---|---|
| member / customer | Choose the relationship term the audience uses. | user, unless the product context requires it |
| straightforward | Describes the experience without assuming what feels “easy.” | easy, effortless |
| sign in | Plain, familiar, and action-oriented. | authenticate, unless technically necessary |
| next step | Creates momentum without overpromising. | magic, game-changing solution |
Governance note: Pair this section with an approved product-name glossary, claims standards, inclusive-language review, and a named owner before it becomes final.
Web Design Standards
Hierarchy, Spacing,
And Rhythm At Scale.
Complete typographic specifications for web. Every heading level, line-height, and letter-spacing value is locked to ensure consistency across products and platforms.
Heading Hierarchy
Type Scale Reference
This is the canonical production scale. Inter Tight runs throughout, with weight by context. Line-height tightens as size increases, while letter-spacing moves from neutral or loose at small sizes to tighter display settings. The same values are used by the token export.
Element
Size
Weight
Line-height
Letter-spacing
Use case
Display
95px
600
0.98
−1.5%
Hero statements, full-page title
H1
64px
500
1.0
−1.5%
Page title, section hero
H2
41px
600
1.15
−1.5%
Major section heading
H3
28px
600
1.25
−1.2%
Subsection, card title
H4
20.5px
600
1.3
−0.8%
Block heading, feature title
H5
17.5px
500
1.35
−0.4%
Form label, card subheading
H6
14px
500
1.4
0%
Metadata, tertiary label
Body
16px
400
1.5
0%
Default paragraph text
Small
14px
400
1.45
0%
Secondary text, helper text
Caption
12px
400
1.4
0.5%
Image captions, timestamps
Spacing & Rhythm
Line-height rules
- Display (95px+) — 0.98–1.0 (tight, prevents awkward breaks)
- Headings (28–64px) — 1.0–1.25 (progressive loosening)
- Body (14–16px) — 1.45–1.5 (reading comfort, paragraph text)
- UI labels (<14px) — 1.3–1.4 (compact, scannable)
- Lists & multi-line UI — 1.5 (breathing room)
Letter-spacing (tracking)
- Display (95px) — −1.5% (controlled, readable)
- H1–H4 (20–64px) — −1.5% to −0.8% (proportional tightening)
- H5–H6 (<17px) — −0.4% to 0% (neutral)
- Body & small — 0% (default, unchanged)
- ALL CAPS labels — +0.08em to +0.16em (loose, readable)
Practical Rules
- Single unit systemSpacing follows a base grid (8px or 4px). Margins and padding scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px.
- Line-height + letter-spacing work togetherHeadings use restrained negative tracking (−1.5% at the largest sizes). Body text at 1.5 line-height uses neutral tracking (0%).
- Font weight hierarchy300 = reserved display accent, 400 = default paragraph text, 500 = UI emphasis (labels, buttons), 600 = headings only. Never use 600 for body text.
- All-caps is intentionalReserve for labels, eyebrows, and micro-copy. Always add tracking (+0.08em minimum). Never all-caps body text.
- Minimum size is 12px12px minimum for any readable content. 11px only for non-critical metadata. Never smaller.
- Measure mattersBody text lines should stay between 45–75 characters for comfortable reading. Use max-width: 65ch on paragraphs.
- Mobile scales proportionallyH1 64px desktop → 36px mobile. Use clamp() for fluid scaling between breakpoints. Never scale below the minimums.
- Don't override line-heightLine-height is locked per element. Overriding it breaks readability and the vertical rhythm system.
Accessibility
Contrast, Checked
Against The Real Surfaces.
Live WCAG 2.1 AA ratios for every palette colour on the two background surfaces. This recalculates when you change a token, so a palette edit can't quietly break compliance.
| Foreground | On dark | On light |
|---|
AA needs 4.5:1 for text under 24px (or under 19px bold), 3:1 above it. Large-only means the colour is fine for display type and unusable for body copy. Non-text UI elements and focus indicators should meet 3:1 against adjacent colours.
Planned Resources
Templates & Resources.
Access the current template library and email signature kiosk from the links below.
Template Library
Document templates and slide deck templates in one place
For: HR, Legal, Sales, All Teams
Open Template Library →Owner: Design + Marketing · Review quarterly
