204 lines
18 KiB
JSON
204 lines
18 KiB
JSON
{
|
|
"schemaVersion": 2,
|
|
"generatedAt": "2026-08-26T10:10:15.926Z",
|
|
"title": "Design System: ThothII",
|
|
"extensions": {
|
|
"colorMeta": {
|
|
"instrument-red": {
|
|
"role": "primary",
|
|
"displayName": "Instrument Red",
|
|
"canonical": "oklch(55.87% 0.1881 23.2)",
|
|
"tonalRamp": ["oklch(15% 0.07 23.2)", "oklch(28% 0.12 23.2)", "oklch(42% 0.16 23.2)", "oklch(56% 0.1881 23.2)", "oklch(68% 0.17 23.2)", "oklch(78% 0.13 23.2)", "oklch(88% 0.07 23.2)", "oklch(95% 0.03 23.2)"]
|
|
},
|
|
"instrument-red-hover": {
|
|
"role": "primary",
|
|
"displayName": "Instrument Red Pressed",
|
|
"canonical": "oklch(50.95% 0.1812 24.1)",
|
|
"tonalRamp": ["oklch(15% 0.07 24.1)", "oklch(28% 0.12 24.1)", "oklch(42% 0.16 24.1)", "oklch(51% 0.1812 24.1)", "oklch(68% 0.16 24.1)", "oklch(78% 0.12 24.1)", "oklch(88% 0.07 24.1)", "oklch(95% 0.03 24.1)"]
|
|
},
|
|
"porcelain-background": {
|
|
"role": "neutral",
|
|
"displayName": "Porcelain Background",
|
|
"canonical": "oklch(99.18% 0.0011 17.2)",
|
|
"tonalRamp": ["oklch(15% 0.0011 17.2)", "oklch(28% 0.0011 17.2)", "oklch(42% 0.0011 17.2)", "oklch(56% 0.0011 17.2)", "oklch(68% 0.0011 17.2)", "oklch(78% 0.0011 17.2)", "oklch(88% 0.0011 17.2)", "oklch(95% 0.0011 17.2)"]
|
|
},
|
|
"porcelain-card": {
|
|
"role": "neutral",
|
|
"displayName": "Porcelain Card",
|
|
"canonical": "oklch(99.85% 0.0006 17.2)",
|
|
"tonalRamp": ["oklch(15% 0.0006 17.2)", "oklch(28% 0.0006 17.2)", "oklch(42% 0.0006 17.2)", "oklch(56% 0.0006 17.2)", "oklch(68% 0.0006 17.2)", "oklch(78% 0.0006 17.2)", "oklch(88% 0.0006 17.2)", "oklch(95% 0.0006 17.2)"]
|
|
},
|
|
"warm-surface": {
|
|
"role": "neutral",
|
|
"displayName": "Warm Surface",
|
|
"canonical": "oklch(97.09% 0.0011 17.2)",
|
|
"tonalRamp": ["oklch(15% 0.0011 17.2)", "oklch(28% 0.0011 17.2)", "oklch(42% 0.0011 17.2)", "oklch(56% 0.0011 17.2)", "oklch(68% 0.0011 17.2)", "oklch(78% 0.0011 17.2)", "oklch(88% 0.0011 17.2)", "oklch(95% 0.0011 17.2)"]
|
|
},
|
|
"sunken-surface": {
|
|
"role": "neutral",
|
|
"displayName": "Sunken Surface",
|
|
"canonical": "oklch(94.08% 0.0011 17.2)",
|
|
"tonalRamp": ["oklch(15% 0.0011 17.2)", "oklch(28% 0.0011 17.2)", "oklch(42% 0.0011 17.2)", "oklch(56% 0.0011 17.2)", "oklch(68% 0.0011 17.2)", "oklch(78% 0.0011 17.2)", "oklch(88% 0.0011 17.2)", "oklch(95% 0.0011 17.2)"]
|
|
},
|
|
"warm-graphite": {
|
|
"role": "neutral",
|
|
"displayName": "Warm Graphite",
|
|
"canonical": "oklch(26.78% 0.0097 355.6)",
|
|
"tonalRamp": ["oklch(15% 0.0097 355.6)", "oklch(28% 0.0097 355.6)", "oklch(42% 0.0097 355.6)", "oklch(56% 0.0097 355.6)", "oklch(68% 0.008 355.6)", "oklch(78% 0.006 355.6)", "oklch(88% 0.004 355.6)", "oklch(95% 0.002 355.6)"]
|
|
},
|
|
"muted-graphite": {
|
|
"role": "neutral",
|
|
"displayName": "Muted Graphite",
|
|
"canonical": "oklch(51.33% 0.0088 345.6)",
|
|
"tonalRamp": ["oklch(15% 0.0088 345.6)", "oklch(28% 0.0088 345.6)", "oklch(42% 0.0088 345.6)", "oklch(56% 0.0088 345.6)", "oklch(68% 0.007 345.6)", "oklch(78% 0.005 345.6)", "oklch(88% 0.003 345.6)", "oklch(95% 0.002 345.6)"]
|
|
},
|
|
"quiet-border": {
|
|
"role": "neutral",
|
|
"displayName": "Quiet Border",
|
|
"canonical": "oklch(90.93% 0.0035 354.7)",
|
|
"tonalRamp": ["oklch(15% 0.0035 354.7)", "oklch(28% 0.0035 354.7)", "oklch(42% 0.0035 354.7)", "oklch(56% 0.0035 354.7)", "oklch(68% 0.0035 354.7)", "oklch(78% 0.0035 354.7)", "oklch(88% 0.003 354.7)", "oklch(95% 0.002 354.7)"]
|
|
},
|
|
"success-mint": {
|
|
"role": "secondary",
|
|
"displayName": "Success Mint",
|
|
"canonical": "oklch(75.77% 0.1581 165)",
|
|
"tonalRamp": ["oklch(15% 0.06 165)", "oklch(28% 0.1 165)", "oklch(42% 0.14 165)", "oklch(56% 0.1581 165)", "oklch(68% 0.15 165)", "oklch(78% 0.12 165)", "oklch(88% 0.07 165)", "oklch(95% 0.03 165)"]
|
|
},
|
|
"warning-amber": {
|
|
"role": "tertiary",
|
|
"displayName": "Warning Amber",
|
|
"canonical": "oklch(85.23% 0.1386 78.9)",
|
|
"tonalRamp": ["oklch(15% 0.05 78.9)", "oklch(28% 0.09 78.9)", "oklch(42% 0.12 78.9)", "oklch(56% 0.1386 78.9)", "oklch(68% 0.13 78.9)", "oklch(78% 0.1 78.9)", "oklch(88% 0.06 78.9)", "oklch(95% 0.025 78.9)"]
|
|
},
|
|
"information-blue": {
|
|
"role": "tertiary",
|
|
"displayName": "Information Blue",
|
|
"canonical": "oklch(70.35% 0.1128 221.3)",
|
|
"tonalRamp": ["oklch(15% 0.045 221.3)", "oklch(28% 0.075 221.3)", "oklch(42% 0.1 221.3)", "oklch(56% 0.1128 221.3)", "oklch(68% 0.105 221.3)", "oklch(78% 0.08 221.3)", "oklch(88% 0.045 221.3)", "oklch(95% 0.02 221.3)"]
|
|
}
|
|
},
|
|
"typographyMeta": {
|
|
"display": {"displayName": "Display", "purpose": "Authentication and exceptional page-level statements only."},
|
|
"headline": {"displayName": "Headline", "purpose": "Major page and persisted artifact titles."},
|
|
"title": {"displayName": "Title", "purpose": "Panel and document section hierarchy."},
|
|
"body": {"displayName": "Body", "purpose": "Operational prose and sustained reading."},
|
|
"control": {"displayName": "Control", "purpose": "Buttons, inputs, tabs, and compact actions."},
|
|
"label": {"displayName": "Machine Label", "purpose": "Uppercase metadata and machine-oriented micro-labels."}
|
|
},
|
|
"shadows": [
|
|
{"name": "contact", "value": "0 1px 2px oklch(var(--shadow-tint) / 0.05)", "purpose": "Contact shadow for controls and code blocks."},
|
|
{"name": "panel", "value": "0 1px 2px oklch(var(--shadow-tint) / 0.05), 0 2px 6px -1px oklch(var(--shadow-tint) / 0.05)", "purpose": "Small structural lift for selected cards."},
|
|
{"name": "overlay", "value": "0 2px 4px -2px oklch(var(--shadow-tint) / 0.06), 0 12px 32px -8px oklch(var(--shadow-tint) / 0.1)", "purpose": "Broad low-opacity lift for dialogs and floating layers."}
|
|
],
|
|
"motion": [
|
|
{"name": "control-feedback", "value": "140ms cubic-bezier(0.22, 1, 0.36, 1)", "purpose": "Button hover, focus, and press feedback."},
|
|
{"name": "overlay-transition", "value": "100ms ease-out", "purpose": "Dialog fade and scale transitions."},
|
|
{"name": "activity-pulse", "value": "1.5s ease-in-out infinite", "purpose": "Live model activity only; disabled for reduced motion."}
|
|
],
|
|
"breakpoints": [
|
|
{"name": "sm", "value": "640px"},
|
|
{"name": "lg", "value": "1024px"}
|
|
]
|
|
},
|
|
"components": [
|
|
{
|
|
"name": "Primary Button",
|
|
"kind": "button",
|
|
"refersTo": "button-primary",
|
|
"description": "The authoritative action for the current workflow step.",
|
|
"html": "<button class=\"ds-button-primary\">Confirm review</button>",
|
|
"css": ".ds-button-primary { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border:1px solid transparent; border-radius:8px; background:oklch(var(--primary)); color:oklch(var(--primary-foreground)); font:600 14px/1.25 var(--font-sans); letter-spacing:0.005em; box-shadow:var(--shadow-xs); transition:color 140ms cubic-bezier(0.22,1,0.36,1),background-color 140ms cubic-bezier(0.22,1,0.36,1),box-shadow 140ms cubic-bezier(0.22,1,0.36,1),transform 140ms cubic-bezier(0.22,1,0.36,1); } .ds-button-primary:hover { background:oklch(var(--primary-hover)); } .ds-button-primary:focus-visible { outline:3px solid oklch(var(--ring)/0.25); outline-offset:2px; } .ds-button-primary:active { transform:scale(0.97); box-shadow:none; }"
|
|
},
|
|
{
|
|
"name": "Outline Button",
|
|
"kind": "button",
|
|
"refersTo": "button-secondary",
|
|
"description": "A compact secondary action that preserves the primary action hierarchy.",
|
|
"html": "<button class=\"ds-button-outline\">Inspect details</button>",
|
|
"css": ".ds-button-outline { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border:1px solid oklch(var(--border)); border-radius:8px; background:oklch(var(--card)); color:oklch(var(--foreground)); font:600 14px/1.25 var(--font-sans); box-shadow:var(--shadow-xs); transition:background-color 140ms cubic-bezier(0.22,1,0.36,1),transform 140ms cubic-bezier(0.22,1,0.36,1); } .ds-button-outline:hover { background:oklch(var(--muted)); } .ds-button-outline:focus-visible { outline:3px solid oklch(var(--ring)/0.25); outline-offset:2px; } .ds-button-outline:active { transform:scale(0.97); box-shadow:none; }"
|
|
},
|
|
{
|
|
"name": "Status Badge",
|
|
"kind": "chip",
|
|
"refersTo": "badge-primary",
|
|
"description": "A compact state label that always carries readable text.",
|
|
"html": "<span class=\"ds-status-badge\">Ready for review</span>",
|
|
"css": ".ds-status-badge { display:inline-flex; align-items:center; height:20px; padding:2px 8px; border:1px solid transparent; border-radius:6px; background:oklch(var(--primary)); color:oklch(var(--primary-foreground)); font:600 12px/1.25 var(--font-sans); white-space:nowrap; } .ds-status-badge:focus-visible { outline:3px solid oklch(var(--ring)/0.5); outline-offset:2px; }"
|
|
},
|
|
{
|
|
"name": "Text Field",
|
|
"kind": "input",
|
|
"refersTo": "input-default",
|
|
"description": "A readable operational field with an explicit focus state.",
|
|
"html": "<input class=\"ds-text-field\" value=\"Fascia pediatrica\" aria-label=\"Session name\">",
|
|
"css": ".ds-text-field { width:280px; height:40px; padding:0 12px; border:1px solid oklch(var(--input)); border-radius:8px; background:oklch(var(--background)); color:oklch(var(--foreground)); font:400 14px/1.5 var(--font-sans); outline:none; } .ds-text-field:hover { border-color:oklch(var(--muted-foreground)/0.65); } .ds-text-field:focus-visible { border-color:oklch(var(--ring)); box-shadow:0 0 0 3px oklch(var(--ring)/0.25); } .ds-text-field:disabled { opacity:0.5; cursor:not-allowed; }"
|
|
},
|
|
{
|
|
"name": "Work Card",
|
|
"kind": "card",
|
|
"refersTo": "card-default",
|
|
"description": "A single-level container for a coherent review surface.",
|
|
"html": "<section class=\"ds-work-card\"><h3>Schema linking</h3><p>Review the linked tables and columns before continuing.</p></section>",
|
|
"css": ".ds-work-card { width:320px; padding:16px; border:1px solid oklch(var(--border)/0.7); border-radius:12px; background:oklch(var(--card)); color:oklch(var(--card-foreground)); box-shadow:var(--shadow-sm); } .ds-work-card h3 { margin:0 0 8px; font:500 16px/1.35 var(--font-heading); letter-spacing:-0.01em; } .ds-work-card p { margin:0; color:oklch(var(--muted-foreground)); font:400 14px/1.6 var(--font-sans); } .ds-work-card:focus-within { outline:3px solid oklch(var(--ring)/0.25); outline-offset:2px; }"
|
|
},
|
|
{
|
|
"name": "Session Navigation Item",
|
|
"kind": "nav",
|
|
"description": "A dense session row with restrained hover and active hierarchy.",
|
|
"html": "<button class=\"ds-session-item\"><span class=\"ds-session-dot\"></span><span><strong>Patient cohorts</strong><small>Schema linking</small></span></button>",
|
|
"css": ".ds-session-item { display:flex; width:260px; align-items:center; gap:8px; padding:4px 8px; border:0; border-radius:8px; background:transparent; color:oklch(var(--foreground)); text-align:left; font-family:var(--font-sans); transition:background-color 140ms cubic-bezier(0.22,1,0.36,1); } .ds-session-item:hover,.ds-session-item[aria-current=\"page\"] { background:oklch(var(--accent)); } .ds-session-item:focus-visible { outline:2px solid oklch(var(--ring)/0.4); outline-offset:1px; } .ds-session-dot { width:6px; height:6px; flex:none; border-radius:9999px; background:oklch(var(--success)); } .ds-session-item strong,.ds-session-item small { display:block; } .ds-session-item strong { font-size:13px; font-weight:600; } .ds-session-item small { margin-top:2px; color:oklch(var(--muted-foreground)); font-size:11px; }"
|
|
},
|
|
{
|
|
"name": "Curated Evidence Document",
|
|
"kind": "custom",
|
|
"description": "The table-free reading hierarchy for persisted evidence.",
|
|
"html": "<article class=\"ds-evidence\"><h2>Fascia pediatrica</h2><div class=\"ds-evidence-summary\"><strong>Dominio</strong> · Italiano<br><span>Scopi: Disambiguazione · Generazione SQL</span></div><h3>Ambito di applicazione</h3><ul><li>fascia pediatrica</li><li>paziente minore</li></ul><h3>Regola</h3><p>La fascia pediatrica comprende i pazienti con età inferiore a 18 anni.</p><details><summary>Dettagli tecnici e provenienza</summary><code>evidence:fascia-pediatrica</code></details></article>",
|
|
"css": ".ds-evidence { max-width:70ch; color:oklch(var(--foreground)); font:400 15px/1.65 var(--font-sans); } .ds-evidence h2,.ds-evidence h3 { font-family:var(--font-heading); letter-spacing:-0.01em; } .ds-evidence h2 { margin:0 0 16px; font-size:24px; } .ds-evidence h3 { margin:24px 0 8px; font-size:18px; } .ds-evidence-summary { padding:12px 14px; border:1px solid oklch(var(--border)); border-radius:8px; background:oklch(var(--muted)); color:oklch(var(--muted-foreground)); } .ds-evidence-summary strong { color:oklch(var(--foreground)); } .ds-evidence ul { padding-left:20px; } .ds-evidence details { margin-top:24px; padding:10px 12px; border:1px solid oklch(var(--border)); border-radius:8px; background:oklch(var(--card)); } .ds-evidence summary { cursor:pointer; font-weight:600; } .ds-evidence code { font-family:var(--font-mono); }"
|
|
}
|
|
],
|
|
"narrative": {
|
|
"northStar": "The Clinical Workbench",
|
|
"overview": "ThothII should feel like a well-kept clinical workbench: warm enough for sustained reading, exact enough for consequential review, and quiet enough that evidence, state, and decisions remain in the foreground. The visual system is calm, precise, and trustworthy. It uses familiar product patterns, restrained color, and deliberate density instead of decorative spectacle.\n\nThe primary physical scene is an analyst reviewing persisted evidence and SQL on a large monitor in a well-lit working environment. This makes the warm light theme the default. The supported dark theme serves lower-light work without becoming a separate neon aesthetic. Both themes preserve the same hierarchy and semantic roles.\n\nThe system rejects generic SaaS ornament, conspicuous ripples, bounce or elastic motion, long choreographed transitions, and effects that compete with the analytical task. Controls should feel disciplined and tactile, never playful, sluggish, or visually unstable.",
|
|
"keyCharacteristics": [
|
|
"Warm, restrained surfaces with one scarce red accent.",
|
|
"Editorial headings paired with highly legible operational body text.",
|
|
"Dense information organized through hierarchy, rhythm, and progressive disclosure.",
|
|
"Persisted artifacts and reviewer decisions presented as the visual source of truth.",
|
|
"Fast state feedback with reduced-motion parity."
|
|
],
|
|
"rules": [
|
|
{"name": "The Workbench Rule", "body": "Every visual element must support inspection, action, state, or provenance. Decoration without an operational purpose is forbidden.", "section": "overview"},
|
|
{"name": "The Persisted Truth Rule", "body": "Persisted artifacts and reviewer decisions receive stronger hierarchy than transient model narration.", "section": "overview"},
|
|
{"name": "The Density with Rhythm Rule", "body": "Preserve information density, but vary spacing between groups so users can scan structure without adding nested containers.", "section": "overview"},
|
|
{"name": "The One Voice Rule", "body": "Instrument Red should occupy no more than roughly ten percent of a screen. Its rarity is what makes it authoritative.", "section": "colors"},
|
|
{"name": "The State Has a Name Rule", "body": "Success, warning, information, and destructive colors are reserved for their named states. Color is never the only state indicator.", "section": "colors"},
|
|
{"name": "The Three Registers Rule", "body": "Serif means authority, sans means interaction and reading, mono means machine identity. Do not exchange these roles for novelty.", "section": "typography"},
|
|
{"name": "The Read Once Rule", "body": "A heading, label, and body must be distinguishable on first glance through size and weight. Do not repeat headings in explanatory copy.", "section": "typography"},
|
|
{"name": "The Flat by Default Rule", "body": "A resting surface has no shadow unless it is physically above another surface. If every panel floats, none of them has hierarchy.", "section": "elevation"},
|
|
{"name": "The Borders Structure, Shadows Elevate Rule", "body": "Never use shadow as a substitute for grouping or a border as a decorative accent.", "section": "elevation"},
|
|
{"name": "The Review Surface Rule", "body": "The visible Markdown must be readable without understanding the machine contract. Technical metadata belongs in progressive disclosure, not above the title.", "section": "components"}
|
|
],
|
|
"dos": [
|
|
"Do make every state change unmistakable without interrupting flow.",
|
|
"Do use Instrument Red only for primary action, current selection, focus identity, or explicit destructive meaning.",
|
|
"Do preserve information density with headings, rhythm, and progressive disclosure.",
|
|
"Do keep keyboard focus explicit and pair color with text, shape, icon, or position.",
|
|
"Do respect prefers-reduced-motion while preserving immediate non-kinetic feedback.",
|
|
"Do use English for interface chrome and the workspace language for persisted document content.",
|
|
"Do render curated metadata and scope as Markdown prose or lists, never as a frontmatter table."
|
|
],
|
|
"donts": [
|
|
"Don't add generic SaaS ornament, conspicuous ripples, bounce or elastic motion, long choreographed transitions, or effects that compete with the analytical task.",
|
|
"Don't make controls feel playful, sluggish, or visually unstable.",
|
|
"Don't use gradient text, decorative glassmorphism, or full-saturation accents on inactive states.",
|
|
"Don't use a colored side stripe greater than one pixel on cards, callouts, list items, or blockquotes. Use a full border, tonal background, icon, or heading instead.",
|
|
"Don't nest cards or wrap every section in a container.",
|
|
"Don't use a modal before exhausting inline or progressive alternatives.",
|
|
"Don't use tables for applies_to, metadata, enum values, or other one-dimensional content.",
|
|
"Don't use color as the sole carrier of success, warning, error, selection, or progress.",
|
|
"Don't use display typography for buttons, labels, or data.",
|
|
"Don't add em dashes to interface copy. Use commas, colons, semicolons, or parentheses."
|
|
]
|
|
}
|
|
}
|