DESIGN SYSTEM

[SV-DS-001]

Visual language, typography, tokens, and component library for SEVERALGIA®. Reference this page when reviewing or extending the UI.

[DS-COL]COLOR TOKENS
WHITE--color-white#FFFFFF
PAPER--color-paper#FAFAF8
ASH--color-ash#F2F1EE
RULE--color-rule#DDDBD5
MUTED--color-muted#8A8880
INK--color-ink#0A0A0A
ALERT--color-alert#CE1126
CAUTION--color-caution#E8860A
CONFIRM--color-confirm#00875A
TINT RED--color-tint-red#FFF5F5
TINT INK--color-tint-ink#F5F4F0
[DS-TYP]TYPOGRAPHY
ANTONIO — var(--font-antonio) — .font-display
PATIENT DIGEST REPORT
DIAGNOSTIC SUMMARY — 800 weight
SECTION HEADER — 700 WEIGHT
LABEL MUTED — 600 WEIGHT / MUTED
DM SERIF TEXT — var(--font-serif) — .font-serif-editorial

"The first clinically-developed treatment for Chronic Chrono-Amnesia."

"Attended stand-up and resolved the blocker on authentication middleware. Spent the rest of the morning on the Kubernetes migration with several very important Slack threads."

Regular weight, muted — used for inline quotes and supporting editorial text.

LIBRE FRANKLIN — var(--font-franklin) — body default

Body text at 1rem — this is the default body font for all prose content, instructions, and descriptions within the application interface.

Small body at 0.875rem (14px) — used for form fields, panel content, and secondary information.

Reduced at 0.8125rem (13px) muted — labels, captions, hint text.

Smallest prose at 0.75rem (12px) muted — secondary labels, fine print.

SOURCE CODE PRO — var(--font-code) — .font-mono-clinical
LOT: SV-2026-0224 | EXP: PERPETUAL | PROFESSIONAL USE ONLY
[SV-DAILY-001] FORM · DIAGNOSTIC SUMMARY · ROUTE · COGNITIVE REVIEW
0.55rem — [SV-CAL] CALENDAR · [SV-EML] EMAIL · [SV-SLK] SLACK
0.5rem — CONTRAINDICTION: DO NOT ADMINISTER WITHOUT COMPLETING CONFIGURATION.
GEMINI_API_KEY=your_api_key_here GOOGLE_CLIENT_ID=... SLACK_USER_TOKEN=xoxp-...
[DS-BTN]BUTTONS
[DS-BDG]STATUS BADGES
✓ CONFIGURED✕ MISSING⚠ WARNINGINACTIVE✓ ANALYZED○ PENDING
[DS-PNL]PANELS
.panel-clinical — Ink left border

Used for primary content areas and integration configuration cards.

Alert left border

Error state, auth failure notice, or warning panel.

Confirm left border

Success state — e.g. Google account connected.

"Met with client to clarify requirements, resolved merge conflict in auth branch, reviewed PR from Matti on the calendar integration."

EDITORIAL QUOTE BLOCK — AI summary output
RECOMMENDED BILLABLE ENTRY
7.50H · 5 TASKS · MONDAY 23 FEBRUARY 2026
COPY TO SEVERA
[DS-RUL]SECTION RULES
[SV-001]RAW SOURCE DATA
[SV-CAL]CALENDAR ENTRIES
[DS-INT]DATA SOURCES — Integration Status
[⚠ ERR]SYNTHESIS ERROR
[DS-FRM]FORM ELEMENTS
H
[DS-ANI]ANIMATIONS
.loading-pulse
CALENDARCOLLECTING…
EMAILCOLLECTING…
SLACKCOLLECTING…
GITHUBCOLLECTING…
BITBUCKETCOLLECTING…
AI SYNTHESISCOLLECTING…
.reveal .reveal-1 through .reveal-5 — staggered fade-in from above (reload page to replay)
80ms
160ms
240ms
320ms
400ms
.slide-in — slides in from left (used in week detail panel)
Panel content that enters horizontally
[DS-SPC]SPACING SCALE
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px
--space-16
64px
[DS-NAV]HEADER ANATOMY
SEVERALGIA®
CLINICAL RELIEF FOR CHRONIC CHRONO-AMNESIA
DAYWEEK
SETUP
LOT: SV-2026-0224 · EXP: PERPETUAL · PROFESSIONAL USE ONLY · ©2026 SEVERALGIA®

SEVERALGIA® DESIGN SYSTEM REV. 1.0 · LOT: DS-2026-0224 · THIS DOCUMENT IS FOR INTERNAL USE ONLY · NOT FOR REDISTRIBUTION · ALL VISUAL ELEMENTS ARE PROPRIETARY AND PROTECTED UNDER TRADEMARK · UNAUTHORIZED REPRODUCTION MAY RESULT IN VERY ACCURATE UNDERSTANDING OF HOW MUCH TIME IT TOOK