MaaSAI · Brand & Identity

Design system reference

Official colour palette and typography for every MaaSAI subsystem. Click any swatch or code block to copy. Keep these values consistent across dashboards, HMIs, reports and slide decks.

Brand Colours

Click a swatch to copy its hex value

Typography

Outfit · Google Fonts

Display · 64 / 80

The quick brown fox

Body · 18 / 28

The quick brown fox jumps over the lazy dog. La rápida zorra parda salta sobre el perro perezoso.

Light · 300Aa Bb Cc 0123 — MaaSAI

Regular · 400Aa Bb Cc 0123 — MaaSAI

Medium · 500Aa Bb Cc 0123 — MaaSAI

Semibold · 600Aa Bb Cc 0123 — MaaSAI

Bold · 700Aa Bb Cc 0123 — MaaSAI

Extrabold · 800Aa Bb Cc 0123 — MaaSAI

Usage snippets

Drop these into your project

CSS variables

:root {
  --brand-navy:   #223F61;
  --brand-orange: #E78C3A;
  --brand-sand:   #D8D1BE;
  --brand-bg:     #F3F2EE;
  --brand-ink:    #262626;
}

SCSS

$brand-navy:   #223F61;
$brand-orange: #E78C3A;
$brand-sand:   #D8D1BE;
$brand-bg:     #F3F2EE;
$brand-ink:    #262626;

Tailwind

// tailwind.config.js
theme: {
  extend: {
    colors: {
      'brand-navy':   '#223F61',
      'brand-orange': '#E78C3A',
      'brand-sand':   '#D8D1BE',
      'brand-bg':     '#F3F2EE',
      'brand-ink':    '#262626'
    }
  }
}