Design & Styling Guide

Guidelines for building Connected Apps that look and feel native to the Facilio platform.

Design Principles#

Blend in — Your widget should feel like a natural part of Facilio, not a foreign embed.
Keep it light — Use whitespace, subtle borders, and a neutral color palette.
Be responsive — Widgets appear in panels, sidebars, and dialogs of varying sizes. Design for flexible widths.
Prioritize readability — Use clear typography, adequate contrast, and logical information hierarchy.

Design tokens#

The primitives that drive the Facilio platform's look and feel — typography, color, spacing, radius, shadow, and gradient. Use these values directly in your widget's CSS so it visually matches Facilio. Tokens follow the DTCG format.

Typography#

Two font families and two weights drive the whole type scale.

Family	Stack
Sans (default)	`Roboto, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica`
Display serif	`"Roboto Serif", Roboto, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica`

Weights: regular 400, medium 500.

Token	Family	Size	Weight	Notes
`display-medium-32`	serif	32px	500	Page hero
`display-med-20`	serif	20px	500
`display-med-16`	serif	16px	500
`heading-med-32`	sans	32px	500	Section title
`heading-med-20`	sans	20px	500	Subsection
`heading-med-16`	sans	16px	500	Card / dialog title
`heading-med-14`	sans	14px	500	Inline heading
`body-reg-14`	sans	14px	400	Default body
`body-reg-ul-14`	sans	14px	400	+ `text-decoration: underline` (links)
`body-reg-st-14`	sans	14px	400	+ `text-decoration: line-through`
`caption-med-12`	sans	12px	500	Strong caption
`caption-reg-12`	sans	12px	400	Caption
`caption-med-ii-10`	sans	10px	500	+ `line-height: 130%`
`caption-med-10`	sans	10px	500	+ `letter-spacing: 0.5px; text-transform: uppercase` (tags / chips)
`caption-reg-10`	sans	10px	400	Small caption
`avatar-s`	sans	8px	500	Avatar initials, S
`avatar-xs`	sans	6px	500	Avatar initials, XS

All styles use line-height: normal unless noted.

Color palette#

Each color has 9 steps from 05 (lightest) to 90 (darkest). Steps 40–60 are the workhorses for backgrounds, fills, and text; 05–20 for subtle surfaces; 70–90 for high-contrast text and dark surfaces.

Blue#

Step	Swatch	Hex
`blue.05`		`#f0f6ff`
`blue.10`		`#cce2ff`
`blue.20`		`#a2c8fe`
`blue.30`		`#6ca8fc`
`blue.40`		`#3d8bfa`
`blue.50`		`#1673f6`
`blue.60`		`#0059d6` (primary brand)
`blue.70`		`#0047ab`
`blue.80`		`#002c6a`
`blue.90`		`#00214e`

Green (semantic — success / positive)#

Step	Swatch	Hex
`green.05`		`#f1fff0`
`green.10`		`#cbf3c7`
`green.20`		`#a7e7a1`
`green.30`		`#73d06a`
`green.40`		`#49b83f`
`green.50`		`#29a01e`
`green.60`		`#0f6f06`
`green.70`		`#0a3e06`
`green.80`		`#072605`
`green.90`		`#061904`

Orange (semantic — warning)#

Step	Swatch	Hex
`orange.05`		`#fff6f0`
`orange.10`		`#fad0b4`
`orange.20`		`#f5ac7b`
`orange.30`		`#fd8635`
`orange.40`		`#ff6700`
`orange.50`		`#d85903`
`orange.60`		`#8a3f0c`
`orange.70`		`#64300e`
`orange.80`		`#3d200c`
`orange.90`		`#221309`

Red (semantic — error / danger)#

Step	Swatch	Hex
`red.05`		`#fff2f2`
`red.10`		`#f7cccc`
`red.20`		`#f0a8a8`
`red.30`		`#dd6c6c`
`red.40`		`#c93d3d`
`red.50`		`#b61919`
`red.60`		`#870000`
`red.70`		`#500000`
`red.80`		`#340000`
`red.90`		`#240000`

Yellow#

Step	Swatch	Hex
`yellow.05`		`#fffae0`
`yellow.10`		`#ffed94`
`yellow.20`		`#ffe257`
`yellow.30`		`#ffd405`
`yellow.40`		`#e2bc00`
`yellow.50`		`#c6a400`
`yellow.60`		`#8d7500`
`yellow.70`		`#4d410a`
`yellow.80`		`#3b330b`
`yellow.90`		`#29240a`

Accent ramps — Cyan, Pink, Purple, Violet

Cyan#

Step	Swatch	Hex
`cyan.05`		`#f0feff`
`cyan.10`		`#c6f4f8`
`cyan.20`		`#9eebf2`
`cyan.30`		`#64d5e0`
`cyan.40`		`#34c0ce`
`cyan.50`		`#168f9b`
`cyan.60`		`#0c6068`
`cyan.70`		`#09494f`
`cyan.80`		`#073135`
`cyan.90`		`#062527`

Pink#

Step	Swatch	Hex
`pink.05`		`#fffbfd`
`pink.10`		`#ffdbed`
`pink.20`		`#ffbadc`
`pink.30`		`#fd82b9`
`pink.40`		`#f5519b`
`pink.50`		`#ed2780`
`pink.60`		`#ab185a`
`pink.70`		`#8a1549`
`pink.80`		`#480f28`
`pink.90`		`#320c1d`

Purple#

Step	Swatch	Hex
`purple.05`		`#fcf2ff`
`purple.10`		`#ebd4f3`
`purple.20`		`#dbb7e7`
`purple.30`		`#bd87cf`
`purple.40`		`#a160b7`
`purple.50`		`#88439f`
`purple.60`		`#5b1d6f`
`purple.70`		`#461257`
`purple.80`		`#330d3f`
`purple.90`		`#200927`

Violet#

Step	Swatch	Hex
`violet.05`		`#f3f0ff`
`violet.10`		`#ddd5fa`
`violet.20`		`#c7baf6`
`violet.30`		`#9e89ed`
`violet.40`		`#7d63dc`
`violet.50`		`#5e3ed3`
`violet.60`		`#3c229d`
`violet.70`		`#311e77`
`violet.80`		`#251952`
`violet.90`		`#16102d`

Neutrals#

Two neutral ramps: 01 (cool, blue-tinted) for primary UI surfaces and text, 02 (warm, true grey) for chrome and dividers.

Neutral 01 (cool)#

Step	Swatch	Hex
`neutral.01.05`		`#fcfeff`
`neutral.01.10`		`#edf5ff`
`neutral.01.20`		`#d8e3f1`
`neutral.01.30`		`#c4d1e4`
`neutral.01.40`		`#9cafca`
`neutral.01.50`		`#7b91b0`
`neutral.01.60`		`#607796` (caption text)
`neutral.01.70`		`#384a62` (description text)
`neutral.01.80`		`#283648` (default text)
`neutral.01.90`		`#192432`

Neutral 02 (warm grey)#

Step	Swatch	Hex
`neutral.02.05`		`#fafafa`
`neutral.02.10`		`#f5f5f5`
`neutral.02.20`		`#eae9e9`
`neutral.02.30`		`#dbdbdb`
`neutral.02.40`		`#c7c7c7`
`neutral.02.50`		`#a8aaaa`
`neutral.02.60`		`#898b8b`
`neutral.02.70`		`#555757`
`neutral.02.80`		`#414242`
`neutral.02.90`		`#2d2e2e`

Backdrops (overlays with alpha)#

Token	Swatch	Hex (incl. alpha)
`backdrops.white`		`#ffffff`
`backdrops.white-frost`		`#ffffff66` (40%)
`backdrops.white-half-tone`		`#ffffff7f` (50%)
`backdrops.grey-frost`		`#1924324c` (30%)
`backdrops.grey-frost-high`		`#283648b2` (70%)
`backdrops.grey-half-tone`		`#192432b2` (70% — modal blanket)

Semantic colors#

Pick a semantic token by intent, not by hex. The same token resolves to the right primitive across themes — for example, swapping primary later changes nothing in your code.

Text#

Token	Resolves to	Hex
`text.default` / `text.main`	`neutral.01.80`	`#283648`
`text.description`	`neutral.01.70`	`#384a62`
`text.caption`	`neutral.01.60`	`#607796`
`text.inverse-default` / `inverse-main`	`neutral.01.10`	`#edf5ff`
`text.inverse-description`	`neutral.01.20`	`#d8e3f1`
`text.inverse-caption`	`neutral.01.50`	`#7b91b0`
`text.primary.default`	`blue.60`	`#0059d6`
`text.primary.hovered`	`blue.40`	`#3d8bfa`
`text.primary.pressed`	`blue.70`	`#0047ab`
`text.semantic-green`	`green.50`	`#29a01e`
`text.semantic-orange`	`orange.50`	`#d85903`
`text.semantic-red`	`red.50`	`#b61919`

Background#

Surfaces#

Token	Resolves to	Hex	Use for
`background.canvas`	`backdrops.white`	`#ffffff`	App background
`background.container`	`backdrops.white`	`#ffffff`	Cards, panels
`background.container-halftone`	`backdrops.white-half-tone`	`#ffffff7f`	Over imagery
`background.midground-subtle`	`neutral.02.05`	`#fafafa`	Page strips
`background.midground-medium`	`neutral.02.10`	`#f5f5f5`	Section background
`background.midground-dark`	`neutral.02.20`	`#eae9e9`	Heavier section background
`background.blanket`	`backdrops.grey-half-tone`	`#192432b2`	Modal scrim
`background.frost`	`backdrops.white-frost`	`#ffffff66`	Glass overlay
`background.frost-high`	`#fafafacc` (80%)	`#fafafacc`	Stronger glass overlay
`background.selection`	`blue.05`	`#f0f6ff`	Selected row / highlight

Primary (brand)#

Token	Resolves to	Hex
`background.primary.default`	`blue.60`	`#0059d6`
`background.primary.hovered`	`blue.40`	`#3d8bfa`
`background.primary.pressed`	`blue.70`	`#0047ab`

Semantic — green / orange / red#

Each semantic color has 5 background steps. Use subtle / light for tinted backgrounds (alerts, badges) and medium / dark / darkest for solid fills (chip backgrounds, banners).

Token group	subtle	light	medium	dark	darkest
`background.semantic-green.*`	`#f1fff0`	`#cbf3c7`	`#49b83f`	`#0f6f06`	`#0a3e06`
`background.semantic-orange.*`	`#fff6f0`	`#fad0b4`	`#ff6700`	`#8a3f0c`	`#64300e`
`background.semantic-red.*`	`#f7cccc` (subtle) — also `subtler`=`#fff2f2`	`#c93d3d` (light)	`#b61919`	`#870000`	`#500000`

Accent — blue / yellow / pink / purple / violet / cyan#

Use accents for non-status color expression: tags, categories, charts, illustrations. Avoid using them to communicate state — that's what semantic-* is for.

Each accent color has subtle (05), light (10), medium (40), dark (60), darkest (70). accent-blue and accent-violet additionally have darker (70/60); accent-violet has selection (60).

Neutral#

Token	Resolves to	Hex	Use for
`background.neutral.default`	`neutral.02.10`	`#f5f5f5`	Default neutral fill
`background.neutral.hovered`	`neutral.02.20`	`#eae9e9`	Hover state
`background.neutral.pressed`	`neutral.02.30`	`#dbdbdb`	Pressed state
`background.neutral-inverse`	`neutral.01.70`	`#384a62`	Dark surface
`background.neutral-inverse.hovered`	`neutral.01.80`	`#283648`	Dark hover
`background.neutral-inverse.pressed`	`neutral.01.90`	`#192432`	Dark pressed

Plus full neutral-base.*, neutral-inverse-base.*, neutral-grey-01.*, neutral-grey-02.* ramps (subtler → darkest) mirroring the primitive neutrals — use these when you need consistent neutral steps across surfaces.

Border#

Mirror the same intents as background. Most common:

Token	Resolves to	Hex	Use for
`border.primary.default`	`blue.60`	`#0059d6`	Primary button / input focus ring
`border.primary.focused`	`blue.60`	`#0059d6`	Focused input
`border.neutral-base.subtle`	`neutral.02.30`	`#dbdbdb`	Default divider
`border.neutral-base.light`	`neutral.02.50`	`#a8aaaa`	Stronger divider
`border.neutral-grey-01.subtle`	`neutral.01.10`	`#edf5ff`	Subtle separator
`border.neutral-grey-01.light`	`neutral.01.20`	`#d8e3f1`	Card border
`border.semantic-green.medium`	`green.40`	`#49b83f`	Success input border
`border.semantic-orange.medium`	`orange.40`	`#ff6700`	Warning input border
`border.semantic-red.medium`	`red.50`	`#b61919`	Error input border

Full border.semantic-*, border.accent-*, border.neutral-* ramps exist with the same subtle / light / medium / dark / darkest steps as their background.* counterparts.

Icon#

Token	Resolves to	Hex	Use for
`icon.neutral.default` / `main`	`neutral.01.80`	`#283648`	Default icon
`icon.neutral.medium`	`neutral.01.70`	`#384a62`	Secondary icon
`icon.neutral.light`	`neutral.01.50`	`#7b91b0`	Tertiary icon
`icon.neutral.subtle`	`neutral.01.20`	`#d8e3f1`	Disabled icon
`icon.neutral-inverse` / `main`	`neutral.01.05`	`#fcfeff`	Icon on dark surface
`icon.primary.default`	`blue.60`	`#0059d6`	Primary icon
`icon.primary.hovered`	`blue.50`	`#1673f6`
`icon.primary.pressed`	`blue.70`	`#0047ab`
`icon.semantic-green`	`green.30`	`#73d06a`	Success icon
`icon.semantic-orange`	`orange.40`	`#ff6700`	Warning icon
`icon.semantic-red`	`red.50`	`#b61919`	Error icon
`icon.accent-cyan`	`cyan.50`	`#168f9b`	Tag / category icon
`icon.accent-pink`	`pink.50`	`#ed2780`	Tag / category icon
`icon.accent-purple`	`purple.50`	`#88439f`	Tag / category icon
`icon.accent-violet`	`violet.50`	`#5e3ed3`	Tag / category icon
`icon.accent-yellow`	`yellow.30`	`#ffd405`	Tag / category icon

A full icon.neutral-grey-01.* ramp (subtler → darkest) is also available.

Widget (chart / illustration palette)#

Use these in dashboards and visualisations. Every widget color has 5–7 steps (subtle → darkest) so you can build harmonious palettes without picking from primitives.

Group	Steps available
`widget.accent-blue`	`subtle, light, medium, dark, darker, darkest`
`widget.accent-cyan`	`subtle, light, medium, dark, darkest`
`widget.accent-pink`	`subtle, light, medium, dark, darkest`
`widget.accent-purple`	`subtle, light, medium, dark, darkest`
`widget.accent-violet`	`subtle, light, medium, dark, darkest`
`widget.accent-yellow`	`subtler, subtle, light, medium, dark, darker, darkest`
`widget.semantic-green`	`subtle, light, medium, dark, darkest`
`widget.semantic-orange`	`subtle, light, medium, dark, darkest`
`widget.semantic-red`	`subtler, subtle, light, medium, dark, darkest`
`widget.grey-*`	`subtler, subtle, light, medium, dark, darker, darkest` (single-level keys, e.g. `widget.grey-dark`)

Each step resolves to the matching palette.<color>.<NN> primitive — for example widget.accent-blue.medium → blue.40 → #3d8bfa.

Spacing#

The spacing scale is in 4-px increments. Use it for padding, margins, and gaps.

Token	Value
`spacing.scale.none`	`0px`
`spacing.scale.half`	`2px`
`spacing.scale.01`	`4px`
`spacing.scale.02`	`8px`
`spacing.scale.03`	`12px`
`spacing.scale.04`	`16px`
`spacing.scale.05`	`20px`
`spacing.scale.06`	`24px`
`spacing.scale.07`	`28px`
`spacing.scale.08`	`32px`
`spacing.scale.09`	`36px`
`spacing.scale.10`	`40px`

Semantic aliases — prefer these when the intent is clear:

Token	Resolves to	Value	Use for
`spacing.container.none`	`scale.none`	`0px`	Flush
`spacing.container.small`	`scale.half`	`2px`	Icon-to-text
`spacing.container.medium`	`scale.01`	`4px`	Inline gap
`spacing.container.large`	`scale.02`	`8px`	Default control gap
`spacing.container.x-large`	`scale.03`	`12px`	Stacked controls
`spacing.container.xx-large`	`scale.04`	`16px`	Card padding
`spacing.section.x-small`	`scale.04`	`16px`	Section padding (compact)
`spacing.section.small`	`scale.06`	`24px`	Section padding (default)
`spacing.section.medium`	`scale.08`	`32px`	Section padding (loose)
`spacing.section.large`	`scale.10`	`40px`	Page-level padding

Border radius#

Token	Value	Use for
`radius.none` (`scale.00`)	`0px`	Tables, edge-to-edge surfaces
`radius.low` (`scale.01`)	`2px`	Tags, chips
`radius.medium` (`scale.02`)	`4px`	Inputs, buttons (default)
`radius.high` (`scale.03`)	`8px`	Cards, dialogs
`radius.large` (`scale.04`)	`12px`	Hero panels
`radius.scale.05`	`24px`	Large illustrations
`radius.full` (`scale.06`)	`40px`	Pills, full-rounded buttons

Shadow (elevation)#

Five elevation levels, each a stack of two shadows. Use the Raw CSS column verbatim.

Token	Use for	Raw CSS
`shadow.elevation.light-low-01`	Subtle lift (inputs, table rows)	`0px 1px 1px 0px rgba(5, 16, 30, 0.25), 0px 0px 1px 0px rgba(5, 16, 30, 0.32)`
`shadow.elevation.light-low-02`	Cards	`0px 2px 4px 0px rgba(5, 16, 30, 0.10), 0px 1px 2px 0px rgba(5, 16, 30, 0.25)`
`shadow.elevation.light-med`	Popovers, dropdowns	`0px 8px 8px 0px rgba(5, 16, 30, 0.08), 0px 0px 2px 0px rgba(5, 16, 30, 0.05)`
`shadow.elevation.light-high`	Modals, dialogs	`0px 16px 16px 0px rgba(5, 16, 30, 0.14), 0px 2px 4px 0px rgba(5, 16, 30, 0.14)`
`shadow.elevation.light-reverse-high`	Bottom sheets (light from below)	`0px -12px 12px 0px rgba(5, 16, 30, 0.15), 0px 0px 4px 0px rgba(5, 16, 30, 0.10)`

Gradient#

Ten preset linear gradients. Use the CSS column verbatim in background.

Token	Preview	CSS
`gradient.blue`		`linear-gradient(270deg, #3D8BFA 0%, #0047AB 100%)`
`gradient.violet`		`linear-gradient(270deg, #7D63DC 0%, #3C229D 100%)`
`gradient.purple`		`linear-gradient(270deg, #88439F 0%, #461257 100%)`
`gradient.green`		`linear-gradient(90deg, #0A3E06 0%, #29A01E 100%)`
`gradient.yellow`		`linear-gradient(90deg, #8D7500 0%, #FFD405 100%)`
`gradient.red`		`linear-gradient(90deg, #500000 0%, #C93D3D 100%)`
`gradient.grey`		`linear-gradient(90deg, #384A62 0%, #607796 100%)`
`gradient.neutral-low`		`linear-gradient(180deg, #A2C8FE 0%, #F0F6FF 99%)`
`gradient.neutral-medium`		`linear-gradient(180deg, #9CAFCA 0%, #EDF5FF 100%)`
`gradient.neutral-high`		`linear-gradient(180deg, #192432 0%, #384A62 100%)`

Putting it together#

A typical Connected App card, styled with tokens:

.card {  background: #ffffff;                       /* background.container */  color: #283648;                             /* text.default */  border: 1px solid #d8e3f1;                  /* border.neutral-grey-01.light */  border-radius: 8px;                         /* radius.high */  padding: 16px;                              /* spacing.container.xx-large */  box-shadow:                                  /* shadow.elevation.light-low-02 */    0px 2px 4px 0px rgba(5, 16, 30, 0.10),    0px 1px 2px 0px rgba(5, 16, 30, 0.25);  font: 400 14px/normal Roboto, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica;  /* body-reg-14 */}
.card__title {  font: 500 16px/normal Roboto, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica;  /* heading-med-16 */  margin-bottom: 8px;                         /* spacing.container.large */}
.card__action {  background: #0059d6;                        /* background.primary.default */  color: #ffffff;  border-radius: 4px;                         /* radius.medium */  padding: 8px 16px;                          /* container.large container.xx-large */}.card__action:hover { background: #3d8bfa; } /* background.primary.hovered */.card__action:active { background: #0047ab; } /* background.primary.pressed */