Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
Brand
The Integral Technologies brand identity. This page covers logo usage, approved colour versions, safe space requirements, forbidden practices, and the official brand colour palette mapped to our design tokens.
Logotype
The Integral logo combines the brand mark with the “Integral Technologies” wordmark set in the Aeonik typeface. Download the SVG for each colour version below.
Integral Spark
The Integral Spark is the brand mark used for Integral Intelligence. It can be used independently as an app icon, favicon, or product identifier. Download both colour versions below.
Integral Icon
The Integral Icon is the standalone brand mark extracted from the full logotype. Use it as an app icon, favicon, or compact brand identifier where the full logotype cannot fit.
Colour Versions
The logo has two approved colour versions. Use the dark version on light backgrounds and the white version on dark or brand-coloured backgrounds. Never apply unapproved colours.
Approved: dark logo on light backgrounds
Approved: white logo on dark / brand backgrounds
In code: The header component applies brightness(0) invert(1) filter in dark mode to automatically switch the logo to white.
Forbidden Practices
To maintain the integrity of the Integral brand, the following modifications to the logo are strictly forbidden.
Do not stretch the logo
The logo must maintain its original aspect ratio at all times. Scaling must be uniform.
Do not apply unapproved colours
Only use the approved colour versions. Never recolour the logo or brand mark with non-brand colours.
Do not apply effects
Never apply drop shadows, gradients, glows, outlines, or other visual effects to the logo.
Do not use insufficient contrast
Ensure the logo has enough contrast against its background to remain fully legible.
Do not change logo proportions
The relationship between the brand mark and wordmark is fixed. Do not alter the spacing, size, or arrangement.
Brand Colour Palette
The official Integral brand colours mapped to design system tokens.
Integral White
#FFFFFF
base.white
Integral Dark Purple
#2D2148
tertiary.900
Integral Purple
#492496
secondary.900
Integral Light Purple
#931FF0
brand.500
Typography
The Integral brand uses the Aeonik typeface by CoType Foundry. Headlines are set in Aeonik Bold and body text in Aeonik Regular. The design system substitutes Inter as the primary web font.
Brand Font
Aeonik
Headline: Aeonik Bold
Body: Aeonik Regular
Design System Font
Inter
Headline: Inter SemiBold / Bold
Body: Inter Regular
Best Practices
Do
Use the approved dark or white logo versions
Maintain the required safe space around the logo
Scale the logo uniformly (lock aspect ratio)
Ensure sufficient contrast between logo and background
Use brand colours from the approved palette
Follow the approved brand colour palette for all usage
Don't
Stretch, squash, or rotate the logo
Apply drop shadows, gradients, or effects
Recolour the logo with non-brand colours
Place the logo on busy or low-contrast backgrounds
Change the spacing between mark and wordmark
Use the logo at sizes below the minimum legible size