FIMS/ Design System
Theme
Design System

FIMS v2.0 design system

Tokens, foundations, and patterns that govern the Facilities Information Management System. Trustworthy, governance-minded, European public-sector. Gold-accented navy and stone palette, Source Serif 4 over Manrope, dense information on a calm rhythm.

Base size
14px
Shell width
240px
Topbar height
62px
Canvas max
1440px
Brand colours Gold wordmark, navy landing, shell charcoal, brand ink.
FIMS
Gold · the brand colour
Wordmark, version chips, highlights on dark surfaces. The only saturated brand fill, never used as a page background or a large block.
#FCCD41
Chrome tones · backgrounds for dark app surfaces
ShellSidebar · topbar
#353e3f
NavyLanding card
#1a2744
InkCard 3px accent
#4e565b

Neutrals

canvas · cards · borders · text
Canvas#e0e4e4
Card Sub#f0f2f2
Card#ffffff
Border Light#e2e6e6
Border#d4d9d9
FG3 tertiary#94a3b8
FG2 body#596578
FG1 primary#1a2332

Semantic · status

solid + ~.08 tint
Teal · Primary#0d9488
Blue · Info#2563eb
Amber · Warn#d97706
Green · OK#059669
Red · Danger#dc2626
Purple · DC#7c3aed

Environmental accents

module sub-accents
Energy#2563eb
Air#7c3aed
Water#0891b2
Waste#d97706
Land#059669
FTE#475569
Typography Source Serif 4 for display, Manrope for UI. Dense, calm, institutional.

Display scale

Source Serif 4 · tight tracking
HeroPortfolio at a glance32px / -0.05em
H1Energy & Environment28px / -0.04em
H2EMAS Reporting20.8px / -0.02em
H3Attention required16px / -0.02em
KPI47,302 kWhSerif 700 · unit in Manrope

Body scale

Manrope · 14px root
Kicker
Portfolio highlights
800 / 0.62rem / .14em
Label
Total floor area
800 / 0.62rem / .08em
Body
Portfolio, site, and building reporting for management oversight across the EUSPA estate.
0.82rem / 1.62
Body SM
Periodic environmental capture at facility level, monthly or quarterly.
0.78rem
Caption
Last reviewed 18 April 2026 by R. Van Beek
0.72rem
Spacing & radii Numeric scale from 4 to 28px. Radii from 4 to 999px.

Spacing scale

--fims-sp-*
sp-1
4px · tight inline gap
sp-2
8px · between chips
sp-3
12px · small card gutter
sp-4
14px · grid gap
sp-5
16px · card padding
sp-6
18px · section padding
sp-7
20px · large card
sp-9
28px · workspace outer

Radii

--fims-r-*
XS4px · badges
SM6px · inputs
MD10px · small cards
LG14px · cards
XL16px · routes
Pill999px · capsules
Elevation Outer shadows only. No inner shadows on content surfaces.
Default0 4 16 / 0.08
Hover0 8 24 / 0.12
Popover · Modal0 20 45 / 0.12
Buttons Primary teal, default outline, pill chips.
Primary
Default
Pill7 EU statesLast 90 days
Badges & status P1/P2/P3 priority, workflow, row-state pills.
PriorityP1P2P3
WorkflowNewReviewResolvedClosed
Row stateValidatedVariancePendingDraft
Form fields 34px height, 6px radius, teal focus ring.
Default
Prague HQ
Placeholder
Prague HQ
Focus
Prague HQ
Disabled
Prague HQ
Read-only
Prague HQ
Error
Prague HQ
KPI cards Serif value, Manrope unit, delta pill top-right.
▼ 4.2%
Total spend YTD
€12.4M
▲ 2.1%
Scope 2 emissions
1,842 tCO₂e
— flat
Compliance score
94/100
Section card 3px top accent, section chip with colour dot, serif KPI.
Portfolio highlights
47,302 kWh
Indirect Emissions (Scope 2), April 2026
3px top accent · section chip · serif KPI · sentence-case sub
Data table Uppercase tracked headers, 1px dividers, flag glyph + link colour.
CountrySiteTypeFloor m²
CzechiaPrague HQOffice14,220
BelgiumBrussels liaisonOffice2,180
FranceToulouse DCDC6,402
Logos Gold wordmark on shell tone, standalone symbol on white.
Wordmark on shell tone
Symbol only
Iconography 24×24 grid, 2px round strokes, inherits currentColor.
Grid
24 × 24
Padding
2px keyline
Stroke
2 · round
Fill
none
Core set · inherits currentColor
Portfolio
Building
Energy
Spend
Contracts
Compliance
Data centre
Assets
Inline SVG only · paired with Lucide (CDN) for anything outside this set · no icon font bundled.
Flags Seven EU member states represented in current portfolio.
BE
CZ
DE
ES
FR
GR
NL