438 lines
11 KiB
JSON
438 lines
11 KiB
JSON
{
|
|
"$name": "Post Fund Management Console — Design Tokens",
|
|
"$description": "Standard W3C DTCG Design Token specification for PFM ConsoleUI (Funder Backoffice & Portfolio Governance Portal). Compatible with Figma Variables and Tokens Studio.",
|
|
"$version": "1.0.0",
|
|
"color": {
|
|
"primary": {
|
|
"50": {
|
|
"$type": "color",
|
|
"$value": "#eff6ff",
|
|
"$description": "Primary accent background tint"
|
|
},
|
|
"100": {
|
|
"$type": "color",
|
|
"$value": "#dbeafe",
|
|
"$description": "Primary accent light surface"
|
|
},
|
|
"200": {
|
|
"$type": "color",
|
|
"$value": "#bfdbfe",
|
|
"$description": "Primary accent subtle border"
|
|
},
|
|
"300": {
|
|
"$type": "color",
|
|
"$value": "#93c5fd",
|
|
"$description": "Primary accent muted indicator"
|
|
},
|
|
"400": {
|
|
"$type": "color",
|
|
"$value": "#60a5fa",
|
|
"$description": "Primary accent light text / icon"
|
|
},
|
|
"500": {
|
|
"$type": "color",
|
|
"$value": "#3b82f6",
|
|
"$description": "Primary accent interactive default"
|
|
},
|
|
"600": {
|
|
"$type": "color",
|
|
"$value": "#2563eb",
|
|
"$description": "Primary action button and brand accent"
|
|
},
|
|
"700": {
|
|
"$type": "color",
|
|
"$value": "#1d4ed8",
|
|
"$description": "Primary action button hover state"
|
|
},
|
|
"800": {
|
|
"$type": "color",
|
|
"$value": "#1e40af",
|
|
"$description": "Primary action button active state"
|
|
},
|
|
"900": {
|
|
"$type": "color",
|
|
"$value": "#1e3a8a",
|
|
"$description": "Primary dark container"
|
|
},
|
|
"950": {
|
|
"$type": "color",
|
|
"$value": "#172554",
|
|
"$description": "Primary deepest container"
|
|
}
|
|
},
|
|
"surface": {
|
|
"canvas": {
|
|
"$type": "color",
|
|
"$value": "#090d16",
|
|
"$description": "Main application body and viewport background"
|
|
},
|
|
"card": {
|
|
"$type": "color",
|
|
"$value": "#111111",
|
|
"$description": "Standard container card and panel surface"
|
|
},
|
|
"cardElevated": {
|
|
"$type": "color",
|
|
"$value": "#161616",
|
|
"$description": "Elevated cards, dropdowns, and modal dialogs"
|
|
},
|
|
"rowHighlight": {
|
|
"$type": "color",
|
|
"$value": "#202020",
|
|
"$description": "Active or selected list and table items"
|
|
},
|
|
"hover": {
|
|
"$type": "color",
|
|
"$value": "#1f1f1f",
|
|
"$description": "Table row and clickable surface hover background"
|
|
},
|
|
"input": {
|
|
"$type": "color",
|
|
"$value": "#141414",
|
|
"$description": "Form inputs, select boxes, and textareas"
|
|
}
|
|
},
|
|
"text": {
|
|
"primary": {
|
|
"$type": "color",
|
|
"$value": "#ffffff",
|
|
"$description": "High-emphasis headings, titles, and active labels"
|
|
},
|
|
"body": {
|
|
"$type": "color",
|
|
"$value": "#e2e8f0",
|
|
"$description": "Standard readable body copy"
|
|
},
|
|
"secondary": {
|
|
"$type": "color",
|
|
"$value": "#cbd5e1",
|
|
"$description": "Table headers, field labels, and secondary text"
|
|
},
|
|
"muted": {
|
|
"$type": "color",
|
|
"$value": "#94a3b8",
|
|
"$description": "Captions, metadata, and placeholder text"
|
|
},
|
|
"disabled": {
|
|
"$type": "color",
|
|
"$value": "#64748b",
|
|
"$description": "Disabled controls and inactive hints"
|
|
}
|
|
},
|
|
"border": {
|
|
"subtle": {
|
|
"$type": "color",
|
|
"$value": "#222222",
|
|
"$description": "Subtle card inner dividers"
|
|
},
|
|
"default": {
|
|
"$type": "color",
|
|
"$value": "#2d2d2d",
|
|
"$description": "Standard structural card and section border"
|
|
},
|
|
"strong": {
|
|
"$type": "color",
|
|
"$value": "#3d3d3d",
|
|
"$description": "Prominent borders and group dividers"
|
|
},
|
|
"input": {
|
|
"$type": "color",
|
|
"$value": "#383838",
|
|
"$description": "Form control border outline"
|
|
},
|
|
"divider": {
|
|
"$type": "color",
|
|
"$value": "#242424",
|
|
"$description": "Table row dividers and separator rules"
|
|
},
|
|
"focusRing": {
|
|
"$type": "color",
|
|
"$value": "#3b82f6",
|
|
"$description": "Keyboard accessibility focus outline"
|
|
}
|
|
},
|
|
"status": {
|
|
"success": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#10b98129",
|
|
"$description": "Success badge background tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b7",
|
|
"$description": "Success badge high-contrast text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b759",
|
|
"$description": "Success badge border"
|
|
},
|
|
"solid": {
|
|
"$type": "color",
|
|
"$value": "#10b981",
|
|
"$description": "Success solid accent indicator"
|
|
}
|
|
},
|
|
"warning": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#f59e0b29",
|
|
"$description": "Warning badge background tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#fcd34d",
|
|
"$description": "Warning badge high-contrast text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#fcd34d59",
|
|
"$description": "Warning badge border"
|
|
},
|
|
"solid": {
|
|
"$type": "color",
|
|
"$value": "#f59e0b",
|
|
"$description": "Warning solid accent indicator"
|
|
}
|
|
},
|
|
"danger": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#f43f5e29",
|
|
"$description": "Danger/Error badge background tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#fda4af",
|
|
"$description": "Danger/Error badge high-contrast text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#fda4af59",
|
|
"$description": "Danger/Error badge border"
|
|
},
|
|
"solid": {
|
|
"$type": "color",
|
|
"$value": "#f43f5e",
|
|
"$description": "Danger solid accent indicator"
|
|
}
|
|
},
|
|
"info": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#3b82f629",
|
|
"$description": "Info badge background tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#93c5fd",
|
|
"$description": "Info badge high-contrast text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#93c5fd59",
|
|
"$description": "Info badge border"
|
|
},
|
|
"solid": {
|
|
"$type": "color",
|
|
"$value": "#3b82f6",
|
|
"$description": "Info solid accent indicator"
|
|
}
|
|
},
|
|
"purple": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#8b5cf629",
|
|
"$description": "Governance badge background tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#d8b4fe",
|
|
"$description": "Governance badge high-contrast text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#d8b4fe59",
|
|
"$description": "Governance badge border"
|
|
},
|
|
"solid": {
|
|
"$type": "color",
|
|
"$value": "#8b5cf6",
|
|
"$description": "Governance solid accent indicator"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"typography": {
|
|
"fontFamily": {
|
|
"sans": {
|
|
"$type": "fontFamily",
|
|
"$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"],
|
|
"$description": "Primary UI font family"
|
|
},
|
|
"mono": {
|
|
"$type": "fontFamily",
|
|
"$value": ["JetBrains Mono", "ui-monospace", "monospace"],
|
|
"$description": "Monospace font family for code, identifiers, amounts, and dates"
|
|
}
|
|
},
|
|
"fontWeight": {
|
|
"light": {
|
|
"$type": "fontWeight",
|
|
"$value": 300,
|
|
"$description": "Light weight font"
|
|
},
|
|
"regular": {
|
|
"$type": "fontWeight",
|
|
"$value": 400,
|
|
"$description": "Regular weight font"
|
|
},
|
|
"medium": {
|
|
"$type": "fontWeight",
|
|
"$value": 500,
|
|
"$description": "Medium weight font"
|
|
},
|
|
"semibold": {
|
|
"$type": "fontWeight",
|
|
"$value": 600,
|
|
"$description": "Semibold weight font"
|
|
},
|
|
"bold": {
|
|
"$type": "fontWeight",
|
|
"$value": 700,
|
|
"$description": "Bold weight font"
|
|
},
|
|
"extrabold": {
|
|
"$type": "fontWeight",
|
|
"$value": 800,
|
|
"$description": "Extrabold weight font"
|
|
}
|
|
},
|
|
"fontSize": {
|
|
"xs": {
|
|
"$type": "dimension",
|
|
"$value": "12px",
|
|
"$description": "Extra small caption text"
|
|
},
|
|
"sm": {
|
|
"$type": "dimension",
|
|
"$value": "14px",
|
|
"$description": "Small table and label text"
|
|
},
|
|
"base": {
|
|
"$type": "dimension",
|
|
"$value": "16px",
|
|
"$description": "Standard body font size"
|
|
},
|
|
"lg": {
|
|
"$type": "dimension",
|
|
"$value": "18px",
|
|
"$description": "Large text / subheadings"
|
|
},
|
|
"xl": {
|
|
"$type": "dimension",
|
|
"$value": "20px",
|
|
"$description": "Section headings"
|
|
},
|
|
"2xl": {
|
|
"$type": "dimension",
|
|
"$value": "24px",
|
|
"$description": "Page and modal titles"
|
|
},
|
|
"3xl": {
|
|
"$type": "dimension",
|
|
"$value": "30px",
|
|
"$description": "Dashboard KPI summary values"
|
|
}
|
|
},
|
|
"lineHeight": {
|
|
"tight": {
|
|
"$type": "number",
|
|
"$value": 1.25,
|
|
"$description": "Tight line height for headings"
|
|
},
|
|
"normal": {
|
|
"$type": "number",
|
|
"$value": 1.5,
|
|
"$description": "Standard body line height"
|
|
},
|
|
"relaxed": {
|
|
"$type": "number",
|
|
"$value": 1.75,
|
|
"$description": "Relaxed paragraph line height"
|
|
}
|
|
}
|
|
},
|
|
"borderRadius": {
|
|
"none": {
|
|
"$type": "dimension",
|
|
"$value": "0px"
|
|
},
|
|
"sm": {
|
|
"$type": "dimension",
|
|
"$value": "4px",
|
|
"$description": "Small tags and tooltips"
|
|
},
|
|
"md": {
|
|
"$type": "dimension",
|
|
"$value": "8px",
|
|
"$description": "Form inputs and buttons"
|
|
},
|
|
"lg": {
|
|
"$type": "dimension",
|
|
"$value": "12px",
|
|
"$description": "Standard cards and panels"
|
|
},
|
|
"xl": {
|
|
"$type": "dimension",
|
|
"$value": "16px",
|
|
"$description": "Modal dialogs and popovers"
|
|
},
|
|
"full": {
|
|
"$type": "dimension",
|
|
"$value": "9999px",
|
|
"$description": "Pill badges and circular avatars"
|
|
}
|
|
},
|
|
"spacing": {
|
|
"1": {
|
|
"$type": "dimension",
|
|
"$value": "4px"
|
|
},
|
|
"2": {
|
|
"$type": "dimension",
|
|
"$value": "8px"
|
|
},
|
|
"3": {
|
|
"$type": "dimension",
|
|
"$value": "12px"
|
|
},
|
|
"4": {
|
|
"$type": "dimension",
|
|
"$value": "16px"
|
|
},
|
|
"5": {
|
|
"$type": "dimension",
|
|
"$value": "20px"
|
|
},
|
|
"6": {
|
|
"$type": "dimension",
|
|
"$value": "24px"
|
|
},
|
|
"8": {
|
|
"$type": "dimension",
|
|
"$value": "32px"
|
|
},
|
|
"10": {
|
|
"$type": "dimension",
|
|
"$value": "40px"
|
|
},
|
|
"12": {
|
|
"$type": "dimension",
|
|
"$value": "48px"
|
|
}
|
|
}
|
|
}
|
|
|