316 lines
8.0 KiB
JSON
316 lines
8.0 KiB
JSON
{
|
|
"$name": "Post Fund Management Partner Portal — Design Tokens",
|
|
"$description": "Standard W3C DTCG Design Token specification for PFM PartnerUI (External Grantee & Recipient Portal). Compatible with Figma Variables and Tokens Studio.",
|
|
"$version": "1.0.0",
|
|
"color": {
|
|
"primary": {
|
|
"50": {
|
|
"$type": "color",
|
|
"$value": "#ecfdf5",
|
|
"$description": "Emerald tint 50"
|
|
},
|
|
"100": {
|
|
"$type": "color",
|
|
"$value": "#d1fae5",
|
|
"$description": "Emerald light surface 100"
|
|
},
|
|
"200": {
|
|
"$type": "color",
|
|
"$value": "#a7f3d0",
|
|
"$description": "Emerald subtle border 200"
|
|
},
|
|
"300": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b7",
|
|
"$description": "Emerald text & glowing highlight 300"
|
|
},
|
|
"400": {
|
|
"$type": "color",
|
|
"$value": "#34d399",
|
|
"$description": "Emerald vibrant accent 400"
|
|
},
|
|
"500": {
|
|
"$type": "color",
|
|
"$value": "#10b981",
|
|
"$description": "Primary Brand Action & Laser Accent 500"
|
|
},
|
|
"600": {
|
|
"$type": "color",
|
|
"$value": "#059669",
|
|
"$description": "Primary action button hover 600"
|
|
},
|
|
"700": {
|
|
"$type": "color",
|
|
"$value": "#047857",
|
|
"$description": "Primary deep accent 700"
|
|
},
|
|
"800": {
|
|
"$type": "color",
|
|
"$value": "#065f46",
|
|
"$description": "Primary dark container 800"
|
|
},
|
|
"900": {
|
|
"$type": "color",
|
|
"$value": "#064e3b",
|
|
"$description": "Primary dark container 900"
|
|
},
|
|
"950": {
|
|
"$type": "color",
|
|
"$value": "#022c22",
|
|
"$description": "Primary deepest container 950"
|
|
}
|
|
},
|
|
"secondary": {
|
|
"300": {
|
|
"$type": "color",
|
|
"$value": "#67e8f9",
|
|
"$description": "Cyan highlight for glow gradients"
|
|
},
|
|
"400": {
|
|
"$type": "color",
|
|
"$value": "#22d3ee",
|
|
"$description": "Cyan vibrant secondary"
|
|
},
|
|
"500": {
|
|
"$type": "color",
|
|
"$value": "#06b6d4",
|
|
"$description": "Cyan secondary action"
|
|
}
|
|
},
|
|
"surface": {
|
|
"canvas": {
|
|
"$type": "color",
|
|
"$value": "#020617",
|
|
"$description": "Deep obsidian slate-950 viewport background"
|
|
},
|
|
"glassCard": {
|
|
"$type": "color",
|
|
"$value": "#0f172a66",
|
|
"$description": "Frosted glassmorphic card backdrop (slate-900 with 40% opacity)"
|
|
},
|
|
"solidCard": {
|
|
"$type": "color",
|
|
"$value": "#0b1120",
|
|
"$description": "Solid container card surface"
|
|
},
|
|
"cardHover": {
|
|
"$type": "color",
|
|
"$value": "#1e293b80",
|
|
"$description": "Card and interactive row hover background"
|
|
},
|
|
"input": {
|
|
"$type": "color",
|
|
"$value": "#090e1a",
|
|
"$description": "Form input and dropdown background"
|
|
}
|
|
},
|
|
"text": {
|
|
"primary": {
|
|
"$type": "color",
|
|
"$value": "#f8fafc",
|
|
"$description": "High-emphasis text and titles (slate-100)"
|
|
},
|
|
"secondary": {
|
|
"$type": "color",
|
|
"$value": "#cbd5e1",
|
|
"$description": "Secondary labels and table headings (slate-300)"
|
|
},
|
|
"muted": {
|
|
"$type": "color",
|
|
"$value": "#94a3b8",
|
|
"$description": "Captions and placeholder copy (slate-400)"
|
|
},
|
|
"accent": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b7",
|
|
"$description": "Vibrant emerald highlighted text"
|
|
}
|
|
},
|
|
"border": {
|
|
"glass": {
|
|
"$type": "color",
|
|
"$value": "#ffffff1f",
|
|
"$description": "Glass card boundary (white 12% opacity)"
|
|
},
|
|
"glassHighlight": {
|
|
"$type": "color",
|
|
"$value": "#ffffff40",
|
|
"$description": "Glass card top-edge specular highlight (white 25% opacity)"
|
|
},
|
|
"subtle": {
|
|
"$type": "color",
|
|
"$value": "#ffffff0f",
|
|
"$description": "Subtle container rule (white 6% opacity)"
|
|
},
|
|
"accent": {
|
|
"$type": "color",
|
|
"$value": "#10b98140",
|
|
"$description": "Emerald glowing border"
|
|
}
|
|
},
|
|
"status": {
|
|
"verified": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#10b98129",
|
|
"$description": "Verified milestone / KYC badge tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b7",
|
|
"$description": "Verified milestone text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#6ee7b759",
|
|
"$description": "Verified milestone border"
|
|
}
|
|
},
|
|
"inProgress": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#06b6d429",
|
|
"$description": "In-progress activity badge tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#67e8f9",
|
|
"$description": "In-progress activity text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#67e8f959",
|
|
"$description": "In-progress activity border"
|
|
}
|
|
},
|
|
"pendingAction": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#f59e0b29",
|
|
"$description": "Action required / drawdown pending tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#fcd34d",
|
|
"$description": "Action required text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#fcd34d59",
|
|
"$description": "Action required border"
|
|
}
|
|
},
|
|
"rejected": {
|
|
"bg": {
|
|
"$type": "color",
|
|
"$value": "#f43f5e29",
|
|
"$description": "Evidence revision / rejected request tint"
|
|
},
|
|
"text": {
|
|
"$type": "color",
|
|
"$value": "#fda4af",
|
|
"$description": "Evidence revision text"
|
|
},
|
|
"border": {
|
|
"$type": "color",
|
|
"$value": "#fda4af59",
|
|
"$description": "Evidence revision border"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"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 award codes, hash IDs, and currency amounts"
|
|
}
|
|
},
|
|
"fontWeight": {
|
|
"light": {
|
|
"$type": "fontWeight",
|
|
"$value": 300
|
|
},
|
|
"regular": {
|
|
"$type": "fontWeight",
|
|
"$value": 400
|
|
},
|
|
"medium": {
|
|
"$type": "fontWeight",
|
|
"$value": 500
|
|
},
|
|
"semibold": {
|
|
"$type": "fontWeight",
|
|
"$value": 600
|
|
},
|
|
"bold": {
|
|
"$type": "fontWeight",
|
|
"$value": 700
|
|
},
|
|
"extrabold": {
|
|
"$type": "fontWeight",
|
|
"$value": 800
|
|
}
|
|
},
|
|
"fontSize": {
|
|
"xs": {
|
|
"$type": "dimension",
|
|
"$value": "12px"
|
|
},
|
|
"sm": {
|
|
"$type": "dimension",
|
|
"$value": "14px"
|
|
},
|
|
"base": {
|
|
"$type": "dimension",
|
|
"$value": "16px"
|
|
},
|
|
"lg": {
|
|
"$type": "dimension",
|
|
"$value": "18px"
|
|
},
|
|
"xl": {
|
|
"$type": "dimension",
|
|
"$value": "20px"
|
|
},
|
|
"2xl": {
|
|
"$type": "dimension",
|
|
"$value": "24px"
|
|
},
|
|
"3xl": {
|
|
"$type": "dimension",
|
|
"$value": "30px"
|
|
}
|
|
}
|
|
},
|
|
"borderRadius": {
|
|
"button": {
|
|
"$type": "dimension",
|
|
"$value": "18px",
|
|
"$description": "Specular glow button border radius"
|
|
},
|
|
"card": {
|
|
"$type": "dimension",
|
|
"$value": "28px",
|
|
"$description": "Border glow card container radius"
|
|
},
|
|
"modal": {
|
|
"$type": "dimension",
|
|
"$value": "24px",
|
|
"$description": "Evidence upload and dialog modal radius"
|
|
},
|
|
"full": {
|
|
"$type": "dimension",
|
|
"$value": "9999px",
|
|
"$description": "Full pill badges"
|
|
}
|
|
}
|
|
}
|
|
|