Brand Guide · v2.0

FUNDSXML Brand & Resources

The visual identity of FundsXML.org — the European standard for fund data. Use these assets, colours, typography and components to keep everything we publish consistent and recognisable.

02 · Colours

Colour Palette

The FundsXML colour palette combines professional and modern tones that convey trust and innovation. Click any swatch to copy its hex value.

Primary Colours
Primary Blue
#4A90E2
RGB 74, 144, 226
Links, CTAs, key UI elements
Secondary Purple
#7B68EE
RGB 123, 104, 238
Secondary actions, highlights
Accent Pink
#E83E8C
RGB 232, 62, 140
Accents, numbers, statistics
Success Green
#20C997
RGB 32, 201, 151
Success, positive indicators
Secondary Colours
Light Blue
#63B3ED
RGB 99, 179, 237
Backgrounds, hover states
Bright Blue
#00BFFF
RGB 0, 191, 255
CTA buttons, interactive
Yellow Accent
#F6E05E
RGB 246, 224, 94
Warnings, special notices
Orange Accent
#ED8936
RGB 237, 137, 54
Statistics, charts
Neutral Colours
Black
#000000
RGB 0, 0, 0
Primary text, logo
Dark Gray
#2D3748
RGB 45, 55, 72
Headings, important text
Gray
#718096
RGB 113, 128, 150
Secondary text
Light Gray
#E2E8F0
RGB 226, 232, 240
Borders, dividers
Off-White
#F7FAFC
RGB 247, 250, 252
Backgrounds, cards
Color Combinations
Primary Button
Call-to-Action

Primary Blue (#4A90E2) on white for primary buttons and CTAs.

Highlight Areas

Purple → Pink gradient for special announcements.

Info
Info Boxes

Off-white with a coloured border for info areas.

Accessibility & Contrast
All colour combinations meet WCAG 2.1 Level AA standards
Minimum contrast of 4.5:1 for normal text
Minimum contrast of 3:1 for large text (18pt+)
Don’t use colour alone to convey information
03 · Typography

Typography

Clean, modern sans-serif typography that ensures readability and professionalism.

Typefaces

PRIMARY TYPEFACE

Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Used for all headings, body text and UI elements.

FALLBACK

System-UI
Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Fallback for optimal system integration.

Font Weights
Regular · 400The quick brown fox
Medium · 500The quick brown fox
Semi Bold · 600The quick brown fox
Bold · 700The quick brown fox
Type Scale
Headline 148px · Bold · 1.2
Headline 236px · Bold · 1.3
Headline 330px · Bold · 1.3
Headline 424px · Bold · 1.4
Headline 520px · Semi-Bold · 1.4
Body Large18px · Regular · 1.6
Body Regular16px · Regular · 1.6
Body Small14px · Regular · 1.5
Caption12px · Regular · 1.4
Best Practices
Do's
Use line height 1.5–1.6 for body text
Limit line length to ~75 characters
Use font weights for emphasis
Ensure sufficient contrast
Don'ts
Avoid too many font sizes
No full text in uppercase
No line height below 1.4
No gray text on coloured backgrounds
05 · Icons

Icons & Symbols

Clear, minimalist line icons for a modern and consistent appearance. We use Lucide icons.

Characteristics

Line-based design

2px stroke weight

Rounded caps

24×24px grid

Colours

Primary #4A90E2

Neutral #718096

Dark #2D3748

Light #CBD5E0

Sizes

Small 16px

Default 20px

Medium 24px

Large 32px

Usage

Navigation

Buttons

Features

Status indicators

Primary Icons
Data
Compliance
Cross-Border
Collaboration
Documentation
Validation
Growth
Integration
Functional Icons
Search
Settings
Download
Upload
Notifications
Email
Calendar
Activity
Data & Charts
Bar Chart
Pie Chart
Trending
Integration
Icon Sizes
Small16px
Default20px
Medium24px
Large32px
Icon Colours
Primary Blue
Success Green
Purple
Dark Gray
Medium Gray
Light Gray
Best Practices
Do's
Use icons in consistent sizes
Coloured icons for important actions
Combine icons with text labels
Sufficient padding around icons
Align icons vertically with text
Don'ts
Distort or stretch icons
Mix too many different sizes
Use icons without context
Combine different icon styles
Use icons as sole information
06 · Components

UI Components

Standardised UI components for a consistent user experience across all FundsXML applications.

Buttons

Primary

Background #4A90E2 · Text #FFFFFF · Radius 8px · Padding 12px 24px

Secondary

Sizes

Cards
Basic Card

Standard card with rounded corners and subtle border.

Radius 12px · Border 1px #E2E8F0 · Padding 24px

Total Datasets

107

+12% from last month

Action Card

Interactive card with hover effect.

Form Elements
Navigation
Badges & Tags
New Success Featured Popular Warning Default

Radius 9999px (full) · Padding 4px 12px

Alerts & Notifications
Information

This is an informational message with important details.

Success

Your action has been completed successfully!

Warning

Please review this information carefully before proceeding.

Error

An error occurred. Please try again or contact support.

General Guidelines
07 · Spacing & Shapes

Spacing & Shapes

A consistent spacing system and defined shapes ensure a harmonious, professional design. The system is based on a 4px grid.

Spacing Scale
XXS4pxInner spacing in small elements
XS8pxSmall spacing, icon padding
SM12pxButton padding, small gaps
MD16pxStandard spacing, card padding
LG24pxBetween elements, section padding
XL32pxLarge spacing between sections
2XL48pxMain sections, hero padding
3XL64pxPage padding, large separations
Shapes & Roundness
None0px
SM4px
MD8px
LG12px
XL16px
2XL24px
Full9999px
Customas needed
Layout Grid

Container widths

Max 1280px · default container
Max 768px · content container
Max 640px · forms

12-column grid

1 2 3 4 5 6 7 8 9 10 11 12

Base: 12 columns · Gap: 16px or 24px

Shadows
Nonenone
Small0 1px 3px
Medium0 4px 8px
Large0 10px 20px
Best Practices
Do's
Use consistent spacing in a 4px grid
Larger spacing between main sections
Uniform border-radius values
Use shadows sparingly
Generous use of white space
Don'ts
No arbitrary spacing values
Too little spacing between elements
Different roundness on similar elements
Too many or too strong shadows
Inconsistent padding values
Resources

Templates

On-brand document templates for FundsXML communications. Each is available in editable Office and OpenDocument formats, with a PDF preview.

Presentation Template

Slide deck master for FundsXML presentations — title, section and content layouts in the brand style.

↧ View PDF preview

📄

Whitepaper Template

Document master for FundsXML whitepapers and reports — cover, headings and body styles ready to use.

↧ View PDF preview