Invenio Style

The unified design system for Invenio — tokens, brand assets, primitives, and rendered showcase pages used across every Invenio surface (marketing sites, the engineering platform demo, the MSR dashboard, and the Expo field + office app).

Live site: to be deployed at the InvenioStyle Netlify URL — drop the URL here once Netlify is connected.

For a quick visual tour, the showcase pages render in any browser. Open them locally with a static file server (e.g. npx serve docs/) or visit the deployed Netlify URL.

---

What's in here

InvenioStyle/
├── docs/                              ← Netlify publish dir
│   ├── index.html                     ← landing page (entry point)
│   ├── prototype.html                 ← design system showcase
│   ├── brand.html                     ← brand asset page
│   ├── email.html                     ← email-safe template + rules
│   ├── primitives.md                  ← React Native primitive reference
│   ├── favicon.svg
│   ├── og-image.svg · og-image.png    ← social preview (1200×630)
│   └── brand/
│       ├── invenio-mark.svg           ← primary mark (light)
│       ├── invenio-mark-dark.svg      ← primary mark (dark)
│       ├── invenio-lockup.svg         ← horizontal icon + wordmark
│       ├── invenio-lockup-dark.svg    ← lockup, dark variant
│       ├── app-icon.svg               ← iOS / source for assets/images/icon.png
│       ├── app-icon-adaptive.svg      ← Android adaptive icon foreground
│       └── splash-icon.svg            ← Expo splash screen mark
├── tokens/
│   ├── tokens.ts                      ← TypeScript source of truth
│   └── useTokens.ts                   ← dark-mode hooks (useTokens, useThemedStyles)
├── scripts/
│   └── lint-tokens.sh                 ← CI guard against raw hex literals
├── .claude/agents/
│   └── senior-design-reviewer.md      ← reviewer subagent for Claude Code
├── CHANGELOG.md                        ← v0.1.0 → v0.7.0 history
└── netlify.toml

---

Quick links

• Design system showcase — colors, type, buttons, stat tiles, cards, table with density variants, iconography, primitives, DataTable, paired light/dark swatches
• Brand assets — mark, lockup, favicon, size ladder, clearspace, gradient spec, do/don't
• Email template spec — table layout, inline styles, bulletproof CTA, safe palette, Outlook rules
• RN primitive reference — props, examples, and a11y notes for all 20 components
• CHANGELOG — version history with release rationale

---

Foundations at a glance

Token	Light	Dark
canvas	#F8FAFC	#0B1220
surface	#FFFFFF	#111A2E
text / primary	#1E293B	#F1F5F9
brand / primary	#0369A1 (sky-700)	#22D3EE (cyan-400)
success	#059669	#10B981
warn	#D97706	#F59E0B
danger	#DC2626	#EF4444
info	#7C3AED	#8B5CF6

• Type: Inter (UI), JetBrains Mono (numeric / code). Scale: 12 / 13 / 14 / 16 / 20 / 24 / 32 / 48.
• Spacing: 4px base. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
• Radius: 6 (chip) / 8 (button, input) / 12 (card) / 16 (modal).
• Motion: --motion-fast 120ms, --motion-standard 180ms, --motion-slow 260ms. Honors prefers-reduced-motion.

Full token surface in tokens/tokens.ts.

---

Using these tokens in another project

React Native / Expo

Copy tokens/tokens.ts and tokens/useTokens.ts into your project's lib/design/ folder:

cp tokens/*.ts your-app/lib/design/

Then in components:

import { colors, radius, space } from '@/lib/design/tokens';
import { useTokens, useThemedStyles } from '@/lib/design/useTokens';

function MyScreen() {
  const c = useTokens();                       // dark-mode-aware
  const styles = useThemedStyles((c) => ({
    container: { backgroundColor: c.canvas },
    title: { color: c.textPrimary, fontSize: 20 },
  }));
  return <View style={styles.container}><Text style={styles.title}>Hello</Text></View>;
}

Web / HTML / Tailwind

The CSS custom properties are inlined at the top of every page in docs/. Copy the :root and [data-theme="dark"] blocks from docs/prototype.html into your global stylesheet.

For Tailwind, mirror the values into theme.extend.colors in tailwind.config.js. The token names (canvas, surface, raised, border, textPrimary, etc.) translate 1:1.

---

Brand-asset export

Every brand asset is shipped as SVG (source of truth). PNG renditions for native-platform consumers are generated on macOS via:

qlmanage -t -s 2048 -o /tmp docs/brand/app-icon.svg
sips -z 1024 1024 /tmp/app-icon.svg.png --out icon.png

For 1200×630 social previews (non-square):

qlmanage -t -s 2400 -o /tmp docs/og-image.svg
sips -c 1260 2400 /tmp/og-image.svg.png --out /tmp/og-cropped.png
sips -z 630 1200 /tmp/og-cropped.png --out og-image.png

On Linux CI, rsvg-convert -w <W> -h <H> in.svg -o out.png is cleaner.

---

Governance

• Versioning: semver. Major = token rename / API break; minor = additive token or component; patch = visual / bug / a11y fix.
• Lint guard: scripts/lint-tokens.sh (run via npm run tokens:lint once a package.json is added). Fails CI on any quoted or template-literal hex literal. Escape hatch: add // tokens-lint-ignore: <reason> to the line.
• Reviewer agent: .claude/agents/senior-design-reviewer.md registers automatically in any Claude Code session opened in this repo. Invoke with "run a design review."

---

Provenance

Originally extracted from TomEnglish/IA_Draft_1 (the field + office Expo app) at v0.7.0. Kept in sync as the design system evolves; the IA_Draft_1 RN app continues to consume tokens from its own lib/design/ until a published @invenio/style npm package replaces both copies.