Brand Guide

Server-rendered static HTML from the canonical guide.

Expanso Brand Guidelines

Source: brand.expanso.io (Internal Brand Central)

Mission

Our mission is to power innovation and security through seamless, truly distributed computing. We're committed to advancing computing in a way that benefits all of humanity.

Voice & Communication

Our mission is ambitious and requires clear, effective communication as we engage with diverse audiences, from researchers to policymakers, leaders, and the general public.

As we extend the boundaries of compute infrastructures, it's essential that our messaging reflects the integrity, innovation, and inclusiveness of our work. To ensure that every interaction aligns with our values and goals, we have established the following guidelines, ensuring that our revolutionary work is understood and accessible to everyone.

We're shaping tomorrow, today.

This is how we communicate:

Our communication style is inspired by the world's leading tech visionaries. We value clarity, authenticity, and forward-thinking insights. Every message should be concise, impactful, and aligned with our mission to innovate and lead. Speak with confidence, embrace transparency, and always focus on how we are shaping the future.

Communication Principles

Principle	Description
Concise and To-The-Point	Every word counts. Deliver information without unnecessary elaboration. Be efficient in your communication to respect the reader's time.
Clear and Direct	Our communication should be straightforward. We aim to eliminate confusion by being as clear as possible. Avoid jargon and technical language unless it is widely understood.
Authentic and Honest	Always communicate in an authentic tone. Honesty builds trust; hence, our messages should reflect our true intentions and operations.
Inclusive and Respectful	Address all audiences with respect and consideration. Our language should be inclusive, promoting an environment where everyone feels welcome and valued.
Innovative and Insightful	We're in the business of breaking new ground, so our communication should reflect innovation. Offer new perspectives and thoughtful insights in all forms of communication.

Primary Colors

Violet (Primary Brand Color)

Violet embodies creativity, innovation, and a forward-thinking mindset, aligning perfectly with our brand's mission to push the boundaries of what's possible. It signifies a balance between the stability of blue and the energy of red, reflecting our commitment to both thoughtful precision and bold action. Paired with the timeless elegance of black and the clarity of white, violet helps us communicate our vision clearly and confidently, standing out in a world of constant change and innovation.

Violet Palette

Name	Hex	RGB
violet-950	`#140034`	-
violet-900	`#27065B`	R: 39, G: 6, B: 91
violet-800	`#501E99`	R: 80, G: 30, B: 153
violet-700	`#6823CD`	R: 104, G: 35, B: 205
violet-600	`#883FFD`	R: 136, G: 63, B: 253
violet-500	`#9259ED`	R: 146, G: 89, B: 237
violet-400	`#B087F1`	R: 176, G: 135, B: 241
violet-300	`#C8A9FA`	R: 200, G: 169, B: 250
violet-200	`#DFCBFD`	R: 223, G: 203, B: 253
violet-100	`#F0E6FF`	R: 240, G: 230, B: 255
violet-50	`#FAF6FF`	R: 250, G: 246, B: 255

Primary violet values:

#501E99 (violet-800) - Primary
#9259ED (violet-500)
#DFCBFD (violet-200)

Blue (Open Source / Bacalhau)

Our two distinct shades of blue (Blue / Ice) are carefully chosen to reflect the essence of our open-source product. The deep blue hues symbolize trust, reliability, and the vast potential of 'compute over data' (CoD), highlighting the robust and dependable nature of our technology.

The turquoise-like blue hints at innovation and the ocean, tying back to the name 'Bacalhau,' which means 'cod' in Portuguese. This connection to the ocean evokes a sense of depth, exploration, and boundless possibilities. Together, these colors create a brand identity that is both modern and rooted in the expansive, dynamic nature of data computation and the ocean.

Blue Palette

Name	Hex	RGB
blue-950	`#000924`	-
blue-900	`#000F3B`	R: 0, G: 15, B: 59
blue-800	`#001C70`	R: 0, G: 28, B: 112
blue-700	`#0037A6`	R: 0, G: 55, B: 166
blue-600	`#0055FF`	R: 0, G: 85, B: 255
blue-500	`#256EFF`	R: 37, G: 110, B: 255
blue-400	`#5A91FF`	R: 90, G: 145, B: 255
blue-300	`#8CB2FF`	R: 140, G: 178, B: 255
blue-200	`#BED3FF`	R: 190, G: 211, B: 255
blue-100	`#DAE6FF`	R: 218, G: 230, B: 255
blue-50	`#EFF4FF`	R: 239, G: 244, B: 255

Primary blue values:

#001C70 (blue-800)
#0055FF (blue-600)

Ice Palette

Name	Hex	RGB
ice-900	`#0A2731`	R: 10, G: 39, B: 49
ice-800	`#005A79`	R: 0, G: 90, B: 121
ice-700	`#008CBB`	R: 0, G: 140, B: 187
ice-600	`#00B8F6`	R: 0, G: 184, B: 246
ice-500	`#33CCFF`	R: 51, G: 204, B: 255
ice-400	`#68D9FF`	R: 104, G: 217, B: 255
ice-300	`#95E5FF`	R: 149, G: 229, B: 255
ice-200	`#AFEBFF`	R: 175, G: 235, B: 255
ice-100	`#D0F4FF`	R: 208, G: 244, B: 255
ice-50	`#F1FCFF`	R: 241, G: 252, B: 255

Primary ice value:

#33CCFF (ice-500)

Grey Palette

Name	Hex
grey-900	`#000000`
grey-800	`#454545`
grey-700	`#727272`
grey-600	`#9F9F9F`
grey-500	`#CFCFCF`
grey-400	`#E3E3E3`
grey-300	`#ECECEC`
grey-200	`#F6F6F6`
grey-100	`#FCFCFC`
grey-50	`#FFFFFF`

Secondary Colors

Green Palette

Name	Hex
green-900	`#122D0F`
green-800	`#2A6A22`
green-700	`#42A435`
green-600	`#52CD42`
green-500	`#59E248`
green-400	`#6DF15D`
green-300	`#96FA89`
green-200	`#B7FCAE`
green-100	`#DEFDDA`
green-50	`#F2FFF0`

Orange Palette

Name	Hex
orange-900	`#321600`
orange-800	`#672E00`
orange-700	`#B5570B`
orange-600	`#FF7B0F`
orange-500	`#FF953F`
orange-400	`#FFA861`
orange-300	`#FFC698`
orange-200	`#FFD6B5`
orange-100	`#FFECDB`
orange-50	`#FFF7F0`

Yellow Palette

Name	Hex
yellow-900	`#2B2A0D`
yellow-800	`#69661E`
yellow-700	`#B2AC18`
yellow-600	`#D4CD00`
yellow-500	`#EDE633`
yellow-400	`#F9F348`
yellow-300	`#FBF784`
yellow-200	`#FCF9AB`
yellow-100	`#FDFCC8`
yellow-50	`#FEFEED`

Red Palette

Name	Hex
red-900	`#4E1603`
red-800	`#982D09`
red-700	`#E63A02`
red-600	`#FF4A0E`
red-500	`#FF7244`
red-400	`#FF9470`
red-300	`#FFB197`
red-200	`#FFCCBA`
red-100	`#FFE4DA`
red-50	`#FFF3EF`

Cyan Palette

Name	Hex
cyan-900	`#0C3433`
cyan-800	`#134E4C`
cyan-700	`#066D6A`
cyan-600	`#009D97`
cyan-500	`#00BBB4`
cyan-400	`#00DFD8`
cyan-300	`#00FFF7`
cyan-200	`#79FFFB`
cyan-100	`#B5FFFC`
cyan-50	`#ECFFFE`

Magenta Palette

Name	Hex
magenta-900	`#4A1848`
magenta-800	`#7D207A`
magenta-700	`#BB32B6`
magenta-600	`#F84FF2`
magenta-500	`#F972F5`
magenta-400	`#FA89F6`
magenta-300	`#FCAEF9`
magenta-200	`#FDC8FB`
magenta-100	`#FDE7FF`
magenta-50	`#FFF3FF`

Brown Palette

Name	Hex
brown-900	`#301804`
brown-800	`#522401`
brown-700	`#72390A`
brown-600	`#965826`
brown-500	`#BF895E`
brown-400	`#D3AE90`
brown-300	`#E2C9B5`
brown-200	`#EBDACD`
brown-100	`#F1E6DF`
brown-50	`#F9F3EF`

Color Themes

We have 35 predefined color themes, based on 11 core colors. Each theme has light, mid, and dark versions for flexibility. These themes help create emphasis and should be chosen by the designer based on their suitability for the project.

Main Theme Combinations

Violet Themes

violet-700 + grey-50 (Light)
violet-900 + grey-50 (Mid)
violet-900 + cyan-200 (Dark)
violet-100 + grey-900 (Inverted)

Blue Themes

blue-600 + grey-50 (Light)
blue-800 + grey-50 (Mid)
blue-900 + cyan-200 (Dark)
blue-50 + grey-900 (Inverted)

Neutral Themes

grey-50 + grey-900 (Light)
grey-500 + grey-900 (Mid)
grey-900 + grey-50 (Dark)

Ice Themes

ice-100 + violet-700 (Light)
ice-500 + grey-50 (Mid)
ice-700 + grey-50 (Dark)

Cyan Themes

cyan-100 + violet-700 (Light)
cyan-300 + violet-900 (Mid)
cyan-800 + violet-200 (Dark)

Red Themes

red-100 + yellow-800 (Light)
red-600 + yellow-300 (Mid)
red-800 + yellow-400 (Dark)

Green Themes

green-100 + violet-700 (Light)
green-500 + violet-900 (Mid)
green-900 + violet-300 (Dark)

Magenta Themes

magenta-100 + green-800 (Light)
magenta-600 + grey-900 (Mid)
magenta-800 + green-300 (Dark)

Yellow Themes

yellow-100 + blue-600 (Light)
yellow-400 + grey-900 (Mid)
yellow-900 + blue-200 (Dark)

Brown Themes

brown-100 + violet-700 (Light)
brown-600 + grey-50 (Mid)
brown-800 + violet-300 (Dark)

Orange Themes

orange-100 + blue-600 (Light)
orange-600 + grey-50 (Mid)
orange-900 + blue-300 (Dark)

Additional Color Theme Guidelines

Each of our color palettes—Radiant, Grounded, and Timeless—can stand alone to create distinct, compelling designs, but they can also be combined for greater versatility.

When mixing palettes, visual harmony is key—one palette should remain dominant, meaning over 50% of the colors used should come from it.

Mandatory Color Rules

Violet must always be present in any Expanso design.
Blue/Ice must always be included in any open-source Bacalhau-focused design.
Violet, Ice, and Blue can be used in any design.

Guidelines for Working with Additional Themes

Dominance: Ensure that one palette is dominant, comprising more than 50% of the colors in your design. This helps maintain cohesion and a clear visual hierarchy.
Balance and Thoughtfulness: Our additional color themes are tools for those with an advanced sense of design. When combining colors, explore combinations thoughtfully. Ensure the balance fits the context of your communication and achieves a visually pleasing outcome.
Contextual Relevance: Always consider the purpose and audience of your design. The colors should enhance the message and suit the context of the communication you are working on.

Color Palettes by Theme

Radiant Palette

This palette is bold and dynamic, capturing our drive to redefine boundaries and possibilities.

The vibrant colors reflect our platform's transformative impact, symbolizing our bold vision, the strength of our technology, the energy of our teams, and our users' bright futures.

Colors: #ffffff, #9F9F9F, #F1E6DF, #FCF9AB, #FFC698, #FF7B0F, #FFB197, #FF4A0E, #FDC8FB, #F84FF2, #DFCBFD, #883FFD, #00B8F6, #59E248, #0055ff, #501E99

Grounded Palette

This palette celebrates human diversity, drawing inspiration from the vast spectrum of cultures and identities. It reflects our company's dedication to accessibility and inclusion, welcoming everyone with its soft, warm, and organic hues.

These colors, with their non-binary undertones, promote a sense of unity, collaboration, and universal acceptance.

Colors: #ffffff, #454545, #F9F3EF, #F1E6DF, #E2C9B5, #965826, #522401, #FCF9AB, #F9F348, #FFC698, #FF7B0F, #672E00, #982D09, #00B8F6, #000F3B, #301804, #001C70, #DFCBFD, #883FFD, #501E99, #27065B

Timeless Palette

The "Timeless" color palette embodies a nuanced blend of classic neutrals and digital pastels, creating a versatile range that is both foundational and forward-thinking. This palette reflects the virtual and hyperreal nature of our technology, offering a modern yet enduring aesthetic for Expanso.

These colors embody the wisdom gained from our experience and the advanced nature of our approach, creating a feel that's both cutting-edge and timeless.

Colors: #ffffff, #FAF6FF, #E3E3E3, #454545, #F9F3EF, #F1E6DF, #69661E, #FDC8FB, #F84FF2, #7D207A, #DFCBFD, #883FFD, #501E99, #AFEBFF, #00B8F6, #005A79, #B5FFFC, #00DFD8, #134E4C, #B7FCAE, #2A6A22, #27065B, #000F3B, #301804, #000000, #BED3FF, #0055ff, #001C70

Design System

The core of Expanso's visual brand identity revolves around the concept of connected nodes, symbolizing the seamless orchestration and connectivity we provide. This system uses simple geometric shapes (nodes) and connecting lines to represent the flow and distribution of data and workloads.

Shapes and Lines

1. Nodes (Squares)

Nodes represent data points or workloads.
Fill colors completely to create bold, easily recognizable elements.
Border radius for squares should be consistent to maintain visual harmony.
Standard border radius: 20% of the side length of the square.
Nodes can be used on their own or in combination with other design elements (lines, circles).

2. Connections (Lines)

Lines represent the flow and connection between nodes.
Standard angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°.

Tip: If you're unsure - laying the 40x40 grid on your square and then adding a circle within 12x12 can help you visualize and adjust the border rounding without technical or tool specific knowledge.

3. Data (Circles)

Circles represent the actual data.
Fill colors completely to create bold, easily recognizable elements.

As our standard, we use squares to represent nodes and this is our primary shape. Circles can be used as an added, secondary design element (representing data).

Grid System

As a standard the 40x40 grid determines all possible size combinations between elements. A square or a circle can be within one grid element or fill out the entire 8x8 grid. This opens up many opportunities but helps us maintain a clean and consistent look.

(Exceptions to this can be made, but require pre-approval before starting to work on it.)

Mascots

Have fun, but don't overuse.

Professional Usage

Have fun with them, but don't overuse. We aim to be approachable, but our brand should still reflect a corporate professional vibe.

What does that mean? Think Docker Whale or Microsoft Clippy.

Logos

Find all Expanso and Bacalhau logos on Google Drive. Both for light and dark backgrounds and in different formats.

Clear Space Requirements

The logos should have ample clear space for optimal clarity. No graphic elements of any kind should encroach into this space at any time.

As a guide, use an "a" from the word mark as a spacer to establish sufficient clear space around the logo.

Typography

At Expanso, we care about innovation, clarity, and efficiency. We need a font that reflects these values and stands up to the varied demands of our communications, from code documentation to investor reports.

Primary Font: Figtree

A clean, yet friendly sans serif font. Designed by Erik Kennedy

Figtree is a geometric sans serif font walking the line between simplicity and friendliness. It is minimalist but not stiff, casual but not silly.

Its most characteristic forms are t, f, y – all with unabashed curves that convey energy and fun. Unusual for similar fonts, the g descender terminates at the same angle as the latter.

Download: Google Fonts Source: GitHub

Figtree Usage

Figtree is our workhorse sans-serif typeface, providing the clean, modern aesthetic we need for clarity and efficiency. It pairs seamlessly with Signifier, our serif typeface, to create a dynamic contrast in many applications.

Use Figtree Semibold for emphasis and texture in elements like list item headers or secondary section titles. This combination ensures our communications are clear, engaging, and professional.

Secondary Font: Signifier

"Signifier" is a serif typeface known for its modern take on traditional serif design, offering a balance between elegance, innovation and readability.

Signifier is a Brutalist response to 17th century typefaces. Designed by Kris Sowersby, Signifier's digital immateriality draws on a deeply material past. Acknowledging the processes and tools of digital form-making, Sowersby worked consciously with the computer to recast the lead, antimony, and tin of the 17th century Fell Types into ones and zeros. Signifier emerged from this alchemy with Bézier curves and sharp vectors determined by machine logic and a Brutalist ethos.

While Figtree serves as our workhorse font, providing modern simplicity, we need a complementary typeface that brings a touch of elegance and helps create visual hierarchy.

'Signifier' fits this role perfectly. Its refined serifs add a level of sophistication ideal for formal documents and presentations, without compromising readability. Using Signifier alongside Figtree, we can ensure our communications are not only clear and impactful but also professional and polished.

Recommended weight: Signifier Light

Signifier License Information

⚠️ Note: Please be aware that Signifier is a commercial font. As such, it cannot be used in Bacalhau, our open-source software. For anything Bacalhau, please make sure to use the open-source font Figtree to maintain consistency and adhere to licensing requirements.

Current License:

Desktop: 20 users
Web: 320,000 monthly unique users
Advertisement: 320,000 monthly impressions

You are responsible for ensuring proper and compliant usage. Read the license agreements before downloading and using commercial fonts. Every user is required to add themselves to the active user tracking.

Photography

We embrace authenticity. We capture emotion. And we celebrate people in relatable ways. Our photography reflects our values and beliefs.

Open, caring, and inclusive, our photography celebrates empowerment from a variety of perspectives. It helps us connect with our audiences in meaningful, real-world ways.

Real people. Real moments. Real experiences.

Photography Principles

Emotions

Our photography captures the authentic richness of real feelings, showcasing people as they truly are. We aim to express the full range of human emotions, highlighting genuine moments and real connections. This approach ensures our visuals resonate deeply and authentically with our audience.

Points of View

Our photography embraces diverse perspectives, giving each story a unique context. We select images that showcase a variety of backgrounds, scenarios, and environments. This approach not only enriches our storytelling but also ensures that our visuals reflect the diversity and depth of human experience. By highlighting different points of view, we create a more inclusive and relatable narrative.

In Action

Our photography should feel spontaneous and natural, capturing people in real interactions with their devices and environments. We prioritize unposed, unfiltered, and imperfect moments over slick, polished, and staged shots. By focusing on these dynamic interactions, we bring authenticity and energy to our storytelling.

Diversity and Inclusion

Our photography reflects the diverse and multifaceted world we live in. We showcase people from all walks of life, demonstrating that everyone has a place at our table and can achieve anything. We aim to empower and celebrate individuals by highlighting their unique stories and perspectives. This approach ensures our visuals are inclusive and inspiring, fostering a sense of belonging and possibility for everyone.

Photography Do's

Rich, warm, and neutral color tones to make our photography feel human and approachable.
Capture natural compositions where the subject matter feels authentic and unstaged.
Use light and shadow creatively to add visual interest and depth to our photography.
Use reflections to add depth and intrigue, enriching our storytelling with dynamic compositions.

Photography Don'ts

Avoid tilted camera angles.
Avoid unnatural and artificial lighting.
Avoid staged photos.
Avoid unnaturally dark photos.
Avoid overly stylized shots.
Avoid portraits with too much contrast.

Data Visualization

Data visualization is for making complex data clear and understandable. The most important aspect is clarity, ensuring the data is presented accurately and effectively to communicate the intended message to the audience.

Spacing and Measurements

Template based on a 704x704 pixel square:

At least 25px distance to chart
10px margins on edges
45px for title area
23px for subtitle area

Line Specifications

Element	Weight	Color
Box	1px	grey-900
Grid	1px	grey-500 or grey-900 at 25%
Baseline	1px	grey-900
Source text	-	grey-600 or grey-900 at 25%
Data lines	2px	See color palette
Markers	~8px	See color palette

Typography in Charts

Title: Figtree Semibold; grey-900 (20px)
Subtitle: Figtree Regular; grey-900 (12px)
Axis labels: Figtree Regular; grey-600 (12px) or grey-900 at 25%
Source: Figtree Regular; grey-900 (10px)

Primary Colors for Data Visualization

We prefer using primary colors for representing data in charts and graphs (Grey, violet, blue and ice).

For added contrast and depth, red, green, and blue can be used as accent colors to highlight specific data sets. These accents, combined with shades of gray, help clearly represent multiple data points, ensuring each set is distinct and easily understandable.

Color	Hex	Use
blue-600	`#0055FF`	Primary data
red-600	`#FF4A0E`	Accent
green-600	`#52CD42`	Accent
violet-600	`#883FFD`	Primary data
grey-900	`#000000`	Primary
grey-800	`#454545`	Secondary
grey-700	`#727272`	Secondary
grey-600	`#9F9F9F`	Tertiary
grey-500	`#CFCFCF`	Tertiary
grey-400	`#E3E3E3`	Background
grey-300	`#ECECEC`	Background
grey-200	`#F6F6F6`	Background

Secondary Colors for Data Visualization

Secondary colors can supplement primary colors when more contrast is needed to represent data clearly. However, primary colors are preferred for most data visualizations.

Try to be sparing with color. Too much color or insufficient contrast can confuse the reader and misrepresent your data.

Chart Types

Line Charts

A line chart shows data points (often having 'markers') connected by straight lines. It's great for visualizing trends over time, with lines often drawn chronologically.

Best practice: To keep things clear, don't use more than five lines on the same graph.

Scatterplot Charts

Use scatterplot charts to display the relationship between two variables. Scatterplots show individual data points plotted along two axes, making it easy to see correlations, patterns, or outliers.

They're ideal for identifying trends and relationships in data sets where both variables are continuous.

Warning: Be mindful and avoid interpreting correlation as causation.

Bar and Column Charts

Bar charts show categorical data with bars that represent values proportionally. You can use them vertically or horizontally.

Column charts are a type of bar chart for comparing ordinal values.

Rule of thumb: Make the bars twice as wide as the gaps between them.

Best practice: Using alternating light and dark bars in bar charts makes data comparison harder. Instead, shade bars from light to dark for easier comparison. When having multiple bars, make sure to use clear titles and subtitles to guide the viewer.

Stacked Bar Charts

Stacked bar charts are great for showing relationships and value differences in complex categories and subcategories.

You can also use stacked column charts to show group relationships within subsets of ordinal data.

Area Charts

Area charts visually represent quantitative data. They come in different types, like stacked and overlapped area charts.

Pie Charts

A pie chart breaks data into slices to show proportions. The size of each slice represents its value.

Donut Charts

A donut chart is similar to a pie chart but has a blank center; sometimes for extra info.

Donut charts are more efficient and give a better data-to-space ratio than pie charts.

Expanso vs. Competitor Comparisons

When comparing Expanso to others, use a purple highlight to make it stand out clearly.

If you want to highlight Expanso versus a specific competitor while still showing others, use two highlights:

Highlight Expanso in violet
If it's an open source context, highlight 'Bacalhau' in blue

Make sure the colors complement each other and look good side by side.

Icons

An effective icon is a graphic asset that expresses a single concept in ways people instantly understand. Whether on our website, in documentation, presentations, videos, or diagrams, we often use simple icons to help convey our message clearly.

Icon Principles

Simplicity and Recognition

Create recognizable, highly simplified designs. Avoid too many details that can make an icon confusing or unreadable. Strive for simple, universal designs that most people will recognize quickly.
Use familiar visual metaphors. Icons work best when they represent actions or content in ways that are immediately understood by the user.

Inclusivity

Create inclusive designs. Avoid unnecessary references to specific genders and ensure icons are welcoming and understandable to everyone.

Consistency

Maintain visual consistency across all icons. Whether you're using custom icons or a mix of custom and standard ones, ensure all icons share a consistent size, level of detail, stroke thickness (or weight), and perspective. If an environment requires a slightly different approach due to layout differences, maintain consistency within that specific environment.
Match the weights of icons and adjacent text. To ensure a uniform appearance and level of emphasis, use the same weight for both icons and text unless there's a specific reason to highlight one over the other.

Text and Localization

Include text in icons only when essential. If text is necessary to convey meaning (e.g., characters representing text formatting), ensure it is localized.

Formats and Scalability

Use vector formats for custom icons. Formats like PDF or SVG scale automatically for high-resolution displays, eliminating the need for multiple versions. PNG, used for icons with effects like shading or textures, requires multiple resolutions for proper scaling.

Optical Alignment

Asymmetric icons can look unbalanced when centered geometrically. Ensure that icons appear balanced by adjusting padding as needed for optical alignment.

Moving the icon a few pixels can achieve optical centering. Including these pixels in the padding simplifies the centering process.

An asymmetric icon can appear off-center even when it's geometrically centered.

Quick Reference: Essential Brand Elements

Core Colors (Hex)

Purpose	Color	Hex
Expanso Primary	Violet-800	`#501E99`
Expanso Secondary	Violet-600	`#883FFD`
Bacalhau Primary	Blue-600	`#0055FF`
Bacalhau Secondary	Ice-500	`#33CCFF`
Dark Background	Blue-900	`#000F3B`
Dark Background Alt	Violet-950	`#140034`
Text Primary	Grey-900	`#000000`
Text Secondary	Grey-600	`#9F9F9F`
Background Light	Grey-50	`#FFFFFF`

Fonts

Type	Font	Weight	Use Case
Primary	Figtree	Regular	Body text
Primary	Figtree	Semibold	Headers, emphasis
Secondary	Signifier	Light	Formal documents (licensed)

Mandatory Rules

✅ Violet must always be present in any Expanso design
✅ Blue/Ice must always be included in any Bacalhau-focused design
✅ One color palette must be dominant (>50%)
✅ Use Figtree (open source) for Bacalhau materials
✅ Border radius on nodes: 20% of side length
✅ Standard line angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°

Document generated from brand.expanso.io

Quick Links

Brand API Status

Canonical Source