tools-ict design system

One quiet look for every tool in the suite: neutral greys, Inter, 40px controls and a single accent colour per app. Everything below is plain CSS classes; no framework required.

npm install @tools-ict/design-system

// main.jsx
import '@tools-ict/design-system';
import { initTheme, bindThemeToggle } from '@tools-ict/design-system/theme';
initTheme({ storageKey: 'myapp:theme', accent: 'teal' });
// or, for a theme button in the top bar:
bindThemeToggle(document.getElementById('theme-toggle'), { storageKey: 'myapp:theme', accent: 'teal' });

Accent

Each app picks one accent with <html data-accent="…">. All presets reach 4.5:1 contrast in light and dark mode.

Colour tokens

Use the tokens, never raw colours, so dark mode keeps working.

Top bar

Every app has one. The .suite-mark on the right links back to the overview of all tools.

<header class="topbar">
  <a class="brand" href="./"><span class="logo">…</span>Noted</a>
  <span class="topbar-title">…</span>
  …actions…
  <a class="suite-mark" href="{SUITE.overviewUrl}">tools-ict</a>
</header>

Buttons

<button class="btn primary">…</button>   .ghost .danger .small .block .on
<button class="icon-btn" aria-label="…">…</button>
<button class="link-btn">…</button>

Choosing

Show names Checkbox Radio

<div class="segmented" role="group"><button class="on">…</button>…</div>
<button class="chip on">…</button>
<label class="switch"><input type="checkbox"><span>…</span></label>

Forms

Class nameShown at the top of every list.

Group sizeChoose at least 2.

Method

<div class="field"><label>…</label><input><span class="hint">…</span></div>   .invalid + .error

Surfaces and status

Link card

Hover lifts it.

accent

Card

Static surface.

ok warn danger

Notice: a neutral hint in the accent tone.

Warning: unsaved changes stay in this browser only.

Error: the file could not be read.

Saved.

.card  a.card  .card-grid   .notice(.warn|.danger|.ok)   .badge(.accent|.ok|.warn|.danger)   .meter>span

Tabs, menu, tooltip

<nav class="tabs"><button class="on">…</button></nav>   <div class="menu"><button>…</button></div>
<span class="tip" tabindex="0">?<span class="tip-text" role="tooltip">…</span></span>

Dialog and toast

<dialog class="dialog"><div class="dialog-head"><h2>…</h2></div><div class="dialog-body">…</div><div class="dialog-actions">…</div></dialog>
<div class="toast-region" role="status" aria-live="polite"><div class="toast">…</div></div>

Empty state

No classes yet

Import a list from Excel or add students by hand.