BackOffice Tools — Design System

palette Colors

Brand and semantic colour tokens. Always reference these via CSS custom properties — never hardcode a hex value in a new tool.

Brand

Surgical Red

#e11d2f

--ss-red

Surgical Navy

#01457c

--ss-navy

Topbar Black

#000000

hardcoded

Text

Ink

#0f172a

--ink

Text

#0b1220

--text

Muted

#64748b

--muted

Subtle

#94a3b8

--subtle

Surface & Border

Surface

#ffffff

--surface

Surface 2

#f1f5f9

--surface-2

BG

#f8fafc

--bg

Border

#e6e9ef

--border

Border 2

#d1d9e3

--border-2

Semantic

Success

#22c55e

Warning

#f59e0b

Error

#e11d2f

Info

#01457c

text_fields Typography

Roboto is the primary typeface across all BackOffice tools. Roboto Mono is used for tokens, IDs, code, and technical strings.

Type Scale

32px / 300

Page Hero Heading

24px / 600

Section Title

18px / 600

Card Title

15px / 500

Sub-heading / Label Large

14px / 400

Body text — the standard size for most content in internal tools.

13px / 400

Secondary / description text, card descriptions, form hints.

12px / 600

Label — form labels, table headers, meta info.

11px / 700

SECTION LABELS — UPPERCASE, TRACKED

12px mono

var(--ss-red) / --token-name / abc123xyz

Weights in use

Light 300

Hero taglines

Regular 400

Body copy

Medium 500

Nav links (active)

SemiBold 600

Titles, CTAs

Bold 700

Labels, badges

straighten Spacing

4px base unit. All spacing and sizing should be multiples of 4.

4px

xs — icon gaps, tight labels

8px

sm — between icon and text, badge padding

12px

md — card inner gaps, button horizontal pad

16px

lg — section horizontal padding (--spacing-x), form fields

20px

xl — card inner padding

24px

2xl — card/panel padding

32px

3xl — between major sections

48px

4xl — between page sections

64px

5xl — hero margin, page bottom padding

Layout

Token	Value	Usage
`--maxw`	1100px	Max content width on all pages
`--spacing-x`	16px	Horizontal page gutter
Grid gap	14px	Gap between tile cards
Tile grid cols	repeat(3, 1fr)	Three-column default, 2 at <1100px, 1 at <680px

layers Shadows & Borders

Elevation shadows and border-radius tokens. Use the appropriate shadow for each surface level.

Shadow scale

shadow-sm

0 1px 4px rgba(2,8,23,.06)

Subtle hover elements, side buttons

shadow

0 4px 16px rgba(2,8,23,.08)

Default tile cards, info cards

shadow-md

0 8px 24px rgba(2,8,23,.10)

Tile cards on hover, toast notifications

shadow-lg

0 12px 32px rgba(2,8,23,.12)

Modals, dropdowns, elevated panels

Border Radius

4px

8px
--radius-sm

12px
--radius

14px
portal hero

pill
--radius-pill

circle
50%

interests Icons

All icons use Material Symbols Outlined variable font. Use weight 300, opsz 24 for standard icons. Adjust via font-variation-settings.

Usage

/* Load in <head> */ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0" /> /* CSS standard rule */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1; } /* HTML usage */ <span class="material-symbols-outlined">menu_book</span>

Icons used in the portal

menu_book

folder_open

layers

bolt

extension

tune

translate

leaderboard

quiz

inventory_2

cloud_download

terminal

dns

key

analytics

compare

open_in_new

image_edit

settings

person

search

add

edit

delete

check_circle

error

warning

info

close

arrow_forward

download

upload

Size variants

settings

14px

settings

18px

settings

24px — default

settings

32px — tile watermark

settings

FILL 1

smart_button Buttons

Five button variants. Use btn-primary for the single main action on a page. Pair with btn-outline or btn-ghost for secondary actions.

Variants

Sizes

Icon only

/* Variants */ <button class="btn btn-primary">Save</button> <button class="btn btn-secondary">Deploy</button> <button class="btn btn-outline">Export</button> <button class="btn btn-ghost">Cancel</button> <button class="btn btn-danger">Delete</button> /* Sizes */ <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary btn-lg">Large</button> /* With icon */ <button class="btn btn-primary"> <span class="material-symbols-outlined">save</span> Save </button>

new_releases Badges & Tags

Inline status labels, category tags, and "New" announcements.

Error Info Active Pending Inactive New errorFailed check_circleDeployed

<span class="badge badge-red">Error</span> <span class="badge badge-navy">Info</span> <span class="badge badge-green">Active</span> <span class="badge badge-amber">Pending</span> <span class="badge badge-slate">Inactive</span> <span class="badge badge-new">New</span>

edit_note Forms

Input fields, selects, and labels. Use ds-field + ds-label wrappers for consistent vertical rhythm.

Tool name

This name appears in the portal tile.

dashboard Tile Cards

The main navigation unit in the portal. Each tile links to a tool. Uses a dashed border at rest, solid red tint on hover.

menu_book

Library Editor

Manage case libraries and structure.

Open analytics

Cloud Dashboard

Global usage & analytics.

Open key

Licensing Portal

License creation & management.

Open

<a class="tile" href="..." target="_blank">  <span class="material-symbols-outlined tile-icon">menu_book</span> <div class="tile-title">Library Editor</div> <div class="tile-desc">Manage case libraries and structure.</div> <span class="tile-cta">Open</span> </a>

tab Tabs

CSS-only tab navigation using hidden radio inputs. No JavaScript required. Active tab gets a red-tinted pill style.

settings Configuration analytics Analytics history Logs

Configuration settings content goes here.

Analytics charts and metrics go here.

Audit log entries appear here.

<input type="radio" name="tooltab" id="tab-dev" checked> <input type="radio" name="tooltab" id="tab-deploy">  <label for="tab-dev" class="tab">Development</label> /* CSS activation */ #tab-dev:checked ~ .tabs label[for="tab-dev"] { background: rgba(225,29,47,0.08); border-color: rgba(225,29,47,0.35); color: var(--ss-red); }

notifications Toasts & Notifications

Left-bordered notification panels. Use for inline feedback — success, error, warning, info. Float them in the bottom-right for transient messages.

check_circle

Deployment complete

Package v2.4.1 pushed to all sites.

error

Build failed

Check the console for details.

warning

VPN required

Connect to IL-Office VPN to access this tool.

info

New version available

Reload to get the latest changes.

table Tables

Wrap in an info-card for a bordered container, or use standalone for data-dense pages.

Tool	Category	Status	Access
Library Editor	Development	Online	Open →
AU Console	Deployment	Online	Open →
Licensing (UAT)	Deployment	Degraded	Open →
Events Editor	Development	Offline	Unavailable

fiber_manual_record Status Indicators

Dot indicators for service/connection state. Pair with short text labels.

Online Degraded Offline Error

<span class="status-dot status-online"></span> Online <span class="status-dot status-warning"></span> Degraded <span class="status-dot status-offline"></span> Offline <span class="status-dot status-error"></span> Error

web_asset Pattern: Topbar

All internal tools share a consistent black topbar with the white Surgical Science logo. The page title follows the logo separated by a pipe.

<header class="topbar"> <div class="topbar-inner"> <a class="brand" href="#"> <img src="suslogo.svg" class="brand-mark" alt="Surgical Science" /> <span class="brand-name">Tool Name</span> </a> </div> </header> .topbar { background: #000000; border-bottom: 1px solid rgba(225,29,47,.35); } .brand-mark { height: 22px; filter: none; /* use suslogo.svg — white version */ }

view_quilt Pattern: Page Layout

Standard page structure for any new internal tool. Content is max 1100px wide, centered, with 16px gutters.

<!doctype html> <html lang="en"> <head>  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0" />  <link rel="stylesheet" href="../design-system-tokens.css" /> </head> <body> <header class="topbar">...</header> <main class="page-content"> <div class="page-inner">  </div> </main> </body> .page-content { padding-top: 52px; } /* topbar height */ .page-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--spacing-x); }

code Token Reference

All CSS custom properties in one place. Copy the block below into design-system-tokens.css and import it in every new tool.

:root { /* Brand */ --ss-red: #e11d2f; --ss-navy: #01457c; /* Text */ --ink: #0f172a; /* headings */ --text: #0b1220; /* body */ --muted: #64748b; /* secondary text */ --subtle: #94a3b8; /* placeholders, labels */ /* Surfaces */ --bg: #f8fafc; /* page background */ --surface: #ffffff; /* cards, inputs */ --surface-2: #f1f5f9; /* hover rows, code bg, tabs */ /* Borders */ --border: #e6e9ef; /* default border */ --border-2: #d1d9e3; /* stronger border, input */ /* Radii */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 4px rgba(2,8,23,.06); --shadow: 0 4px 16px rgba(2,8,23,.08); --shadow-md: 0 8px 24px rgba(2,8,23,.10); --shadow-lg: 0 12px 32px rgba(2,8,23,.12); /* Typography */ --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --mono: 'Roboto Mono', 'Cascadia Code', Consolas, monospace; /* Layout */ --maxw: 1100px; --spacing-x: 16px; }

Full token table

Token	Value	Use case
`--ss-red`	#e11d2f	Primary CTAs, active tab indicator, badges, error
`--ss-navy`	#01457c	Icons, secondary buttons, info states, links
`--ink`	#0f172a	Headings, tile titles, strong labels
`--text`	#0b1220	Default body text
`--muted`	#64748b	Descriptions, secondary text, placeholders
`--subtle`	#94a3b8	Section labels, timestamps, watermark icons
`--bg`	#f8fafc	Page background
`--surface`	#ffffff	Cards, inputs, modals
`--surface-2`	#f1f5f9	Hover rows, striped tables, tab pane bg
`--border`	#e6e9ef	Card borders, dividers
`--border-2`	#d1d9e3	Input borders, stronger dividers
`--radius`	12px	Default card radius
`--radius-sm`	8px	Buttons, inputs, small panels
`--radius-pill`	999px	Badges, tab pills, avatar circles
`--shadow`	0 4px 16px…	Default card shadow
`--shadow-md`	0 8px 24px…	Hover elevation, toasts
`--shadow-lg`	0 12px 32px…	Modals, dropdowns
`--maxw`	1100px	Max content width, centered
`--spacing-x`	16px	Horizontal page gutter

BackOffice ToolsDesign System

palette Colors

text_fields Typography

straighten Spacing

layers Shadows & Borders

interests Icons

smart_button Buttons

new_releases Badges & Tags

edit_note Forms

dashboard Tile Cards

tab Tabs

notifications Toasts & Notifications

table Tables

fiber_manual_record Status Indicators

web_asset Pattern: Topbar

view_quilt Pattern: Page Layout

code Token Reference

BackOffice Tools
Design System