Skip to main content

Design Tokens & Typography

Flo uses a design token system based on CSS custom properties. Tokens are defined in JSON theme files and injected into :root at runtime, enabling multi-brand theming.

How It Works​

  1. Theme JSON files live in public/configs/ (e.g., flo.theme.json, respirastudio.theme.json)
  2. On app startup, the appropriate theme is loaded based on hostname detection
  3. CSS variables are injected into :root via applyCssVariables()
  4. Tailwind CSS and component styles reference these variables

All CSS variables use the --r- prefix.

Color Tokens​

Flo Brand Colors​

TokenCSS VariableValueUsage
Primary--r-primary-color#9EE771Main brand color, buttons, links
Accent--r-accent-color#80e142Hover states, active elements
Alt Primary--r-alt-primary-color#80e142Alternative primary interactions
Secondary--r-secondary-color#76DD36Secondary actions, badges
Text--r-text-color#263717Body text, headings
Background--r-background-color#FFFFFFPage background
Black--r-black#2B2A29High-contrast text

Primary Color Scale​

TokenTailwind ClassFlo ValueUsage
--r-primary-100bg-primary-100#F2F9E6Lightest background tint
--r-primary-150bg-primary-150#E6F5D1Very light background
--r-primary-200bg-primary-200#DAF1BBLight background, focus rings
--r-primary-300bg-primary-300#CEF0A6Light accent
--r-primary-400bg-primary-400#C2EE91Medium accent
--r-primary-500bg-primary-500#9EE771Primary brand color
--r-primary-600bg-primary-600#8CD66BDarker primary
--r-primary-700bg-primary-700#7AC065Darkest primary

Secondary Color Scale​

TokenTailwind ClassFlo Value
--r-secondary-100bg-secondary-100#F0F9E3
--r-secondary-200bg-secondary-200#E1F3C7
--r-secondary-300bg-secondary-300#D2EDAB
--r-secondary-400bg-secondary-400#C3E98F
--r-secondary-500bg-secondary-500#76DD36
--r-secondary-600bg-secondary-600#68C630
--r-secondary-700bg-secondary-700#5AB22A

Tertiary Color Scale​

TokenTailwind ClassFlo Value
--r-tertiary-100bg-tertiary-100#F3F0FD
--r-tertiary-200bg-tertiary-200#E0D7FA
--r-tertiary-300bg-tertiary-300#CCBEF7
--r-tertiary-400bg-tertiary-400#B9A5F4
--r-tertiary-500bg-tertiary-500#A280E6
--r-tertiary-600bg-tertiary-600#8C74CC
--r-tertiary-700bg-tertiary-700#7569B3

Gray Scale​

TokenTailwind ClassFlo ValueUsage
--r-gray-000bg-gray-000#FFFFFFWhite
--r-gray-100bg-gray-100#faf9f6Surface background
--r-gray-200bg-gray-200#EDEFECBorders, dividers
--r-gray-300bg-gray-300#dedcd8Disabled elements
--r-gray-400bg-gray-400#c6c2bdPlaceholder text
--r-gray-500bg-gray-500#aea9a4Muted text
--r-gray-600bg-gray-600#96928dSecondary text
--r-gray-700bg-gray-700#7e7a75Strong muted text

Typography​

Font Families​

TokenCSS VariableFloRespirastudio
Primary--r-primary-font-familyBricolage GrotesquePlayfair Display
Secondary--r-secondary-font-familyInterLato

Tailwind usage:

<h1 class="font-primary">Heading</h1>
<p class="font-secondary">Body text</p>

Fonts are loaded from Google Fonts with a 3-second fallback timeout. The .fonts-loaded class is applied to <html> once fonts are available.

Font Weights​

TokenFlo Value
--r-primary-desktop-font-weigthsemi-bold
--r-secondary-desktop-font-weigthregular
--r-primary-mobile-font-weigthregular

Desktop Type Scale​

TokenTailwind ClassSizeUsage
--r-desktop-font-size-header-1text-desktop-header-13rem (48px)Page titles
--r-desktop-font-size-header-2text-desktop-header-22.5rem (40px)Section headers
--r-desktop-font-size-header-3text-desktop-header-32.062rem (33px)Subsection headers
--r-desktop-font-size-header-4text-desktop-header-41.75rem (28px)Card titles
--r-desktop-font-size-header-5text-desktop-header-51.238rem (20px)Small headers
--r-desktop-font-size-body-texttext-desktop-body1rem (16px)Body text
--r-desktop-font-size-body-caption-text-1text-desktop-caption-11rem (16px)Captions
--r-desktop-font-size-body-caption-text-2text-desktop-caption-20.812rem (13px)Small captions
--r-desktop-font-size-body-tiny-text—0.688rem (11px)Labels, badges

Mobile Type Scale​

TokenTailwind ClassSize
--r-primary-mobile-font-size-header-1text-mobile-header-12.625rem (42px)
--r-primary-mobile-font-size-header-2text-mobile-header-22.1875rem (35px)
--r-primary-mobile-font-size-header-3text-mobile-header-31.8125rem (29px)
--r-primary-mobile-font-size-header-4text-mobile-header-41.5rem (24px)
--r-primary-mobile-font-size-header-5text-mobile-header-51.25rem (20px)
--r-primary-mobile-font-size-body-texttext-mobile-body1.0625rem (17px)
--r-primary-mobile-font-size-body-caption-text-1text-mobile-caption-10.875rem (14px)
--r-primary-mobile-font-size-body-caption-text-2text-mobile-caption-20.75rem (12px)
--r-primary-mobile-font-size-body-tiny-text—0.625rem (10px)

Using Tokens in Code​

Tailwind Classes​

<!-- Colors -->
<div class="bg-primary-100 text-text-color">
<button class="bg-primary text-white hover:bg-alt-primary">

<!-- Typography -->
<h1 class="font-primary text-desktop-header-1">Title</h1>
<p class="font-secondary text-desktop-body">Body text</p>

<!-- Responsive typography -->
<h2 class="text-mobile-header-2 md:text-desktop-header-2">Heading</h2>

<!-- Gray scale -->
<div class="bg-gray-100 border border-gray-300">
<p class="text-gray-600">Muted text</p>

Raw CSS Variables​

.custom-element {
  background-color: var(--r-primary-200);
  color: var(--r-text-color);
  font-family: var(--r-primary-font-family);
  font-size: var(--r-desktop-font-size-header-4);
}

Important: Tailwind Classes with /​

When using Tailwind classes with / (opacity modifiers), use [ngClass] instead of class:

<!-- Correct -->
<div [ngClass]="'bg-primary-200/20'">

<!-- Will break -->
<div class="bg-primary-200/20">

PrimeNG Theme​

PrimeNG uses the Lara preset with custom CSS layer ordering:

tailwind-base → primeng → tailwind-utilities → overrides

This ensures Tailwind utilities can override PrimeNG styles, and custom overrides take highest priority.

Theme Files​

FilePurpose
public/configs/flo.theme.jsonFlo color and typography tokens
public/configs/respirastudio.theme.jsonRespirastudio tokens
public/configs/flo.configs.jsonFlo app config (title, fonts, PWA)
public/configs/respirastudio.configs.jsonRespirastudio app config
tailwind.config.jsMaps CSS variables to Tailwind classes
src/styles.scssGlobal styles and layer config
src/assets/styles/overrides/PrimeNG component style overrides