ava/grubflip-design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
grubflip-design/design-system.html
Ava 9fb5bd83a6 Add Payfrit design system, page templates, and component prototypes 
Core brand design system, page layout templates, avatar styles,
sponsor token purchase flow, and status dashboard — all as living
HTML/CSS design references for the team.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 05:56:18 +00:00

894 lines
No EOL
35 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payfrit Design System</title>
<style>
/* ========================================
PAYFRIT DESIGN SYSTEM v1.0
Created by Ava — 2026-03-19
======================================== */
/* --- CSS Custom Properties (Design Tokens) --- */
:root {
/* Brand Colors */
--color-primary: #0D6E6E;
--color-primary-light: #14A3A3;
--color-primary-dark: #094F4F;
--color-primary-bg: #E6F5F5;
/* Accent */
--color-accent: #F5A623;
--color-accent-light: #FFCF70;
--color-accent-dark: #C4841A;
/* Semantic */
--color-success: #2ECC71;
--color-success-bg: #EAFAF1;
--color-warning: #F39C12;
--color-warning-bg: #FEF5E7;
--color-error: #E74C3C;
--color-error-bg: #FDEDEC;
--color-info: #3498DB;
--color-info-bg: #EBF5FB;
/* Neutrals */
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
/* Background */
--color-bg: #FFFFFF;
--color-bg-subtle: #F9FAFB;
--color-bg-muted: #F3F4F6;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--font-normal: 400;
--font-medium: 500;
--font-semibold:600;
--font-bold: 700;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* Spacing Scale (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
}
/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font-family);
color: var(--color-gray-800);
background: var(--color-bg);
line-height: var(--leading-normal);
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
/* --- Page Layout --- */
.ds-page { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.ds-header {
text-align: center;
padding: var(--space-16) var(--space-6);
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
color: white;
border-radius: var(--radius-xl);
margin-bottom: var(--space-12);
}
.ds-header h1 { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.ds-header p { font-size: var(--text-lg); opacity: 0.85; }
.ds-section { margin-bottom: var(--space-16); }
.ds-section-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-gray-900);
border-bottom: 2px solid var(--color-primary);
padding-bottom: var(--space-2);
margin-bottom: var(--space-6);
}
.ds-subsection { margin-bottom: var(--space-8); }
.ds-subsection-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-gray-700);
margin-bottom: var(--space-4);
}
.ds-label {
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-1);
}
/* --- Color Swatches --- */
.ds-color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--space-4);
}
.ds-swatch {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-200);
}
.ds-swatch-color {
height: 80px;
width: 100%;
}
.ds-swatch-info {
padding: var(--space-3);
background: white;
}
.ds-swatch-name {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-gray-800);
}
.ds-swatch-hex {
font-size: var(--text-xs);
color: var(--color-gray-500);
font-family: var(--font-mono);
}
/* --- Typography Specimens --- */
.ds-type-row {
display: flex;
align-items: baseline;
gap: var(--space-6);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-gray-100);
}
.ds-type-meta {
flex: 0 0 120px;
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--color-gray-400);
}
/* --- Component Styles --- */
/* Buttons */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-family);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
line-height: 1;
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
}
.ds-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ds-btn-primary { background: var(--color-primary); color: white; }
.ds-btn-primary:hover { background: var(--color-primary-dark); color: white; }
.ds-btn-secondary { background: white; color: var(--color-primary); border-color: var(--color-primary); }
.ds-btn-secondary:hover { background: var(--color-primary-bg); color: var(--color-primary); }
.ds-btn-accent { background: var(--color-accent); color: white; }
.ds-btn-accent:hover { background: var(--color-accent-dark); color: white; }
.ds-btn-ghost { background: transparent; color: var(--color-gray-600); }
.ds-btn-ghost:hover { background: var(--color-gray-100); color: var(--color-gray-800); box-shadow: none; }
.ds-btn-danger { background: var(--color-error); color: white; }
.ds-btn-danger:hover { background: #C0392B; color: white; }
.ds-btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.ds-btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.ds-btn:disabled, .ds-btn-disabled {
opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.ds-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
/* Form Inputs */
.ds-form-group { margin-bottom: var(--space-5); }
.ds-form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-gray-700);
margin-bottom: var(--space-1);
}
.ds-form-hint {
font-size: var(--text-xs);
color: var(--color-gray-400);
margin-top: var(--space-1);
}
.ds-input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-family);
font-size: var(--text-base);
color: var(--color-gray-800);
background: white;
border: 1.5px solid var(--color-gray-300);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ds-input::placeholder { color: var(--color-gray-400); }
.ds-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.ds-input-error { border-color: var(--color-error); }
.ds-input-error:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
.ds-error-text { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); }
.ds-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--space-10);
}
.ds-textarea {
min-height: 100px;
resize: vertical;
}
.ds-checkbox-group, .ds-radio-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ds-checkbox-label, .ds-radio-label {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-gray-700);
cursor: pointer;
}
.ds-checkbox-label input, .ds-radio-label input {
accent-color: var(--color-primary);
width: 18px;
height: 18px;
}
/* Cards */
.ds-card {
background: white;
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--transition-base);
}
.ds-card:hover { box-shadow: var(--shadow-md); }
.ds-card-body { padding: var(--space-6); }
.ds-card-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-gray-900);
margin-bottom: var(--space-2);
}
.ds-card-text {
font-size: var(--text-sm);
color: var(--color-gray-500);
line-height: var(--leading-relaxed);
}
.ds-card-footer {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-gray-100);
background: var(--color-gray-50);
}
.ds-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-6);
}
/* Badges / Tags */
.ds-badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
border-radius: var(--radius-full);
}
.ds-badge-primary { background: var(--color-primary-bg); color: var(--color-primary-dark); }
.ds-badge-success { background: var(--color-success-bg); color: #1B7A43; }
.ds-badge-warning { background: var(--color-warning-bg); color: #956206; }
.ds-badge-error { background: var(--color-error-bg); color: #922B21; }
.ds-badge-info { background: var(--color-info-bg); color: #1A6FAD; }
.ds-badge-neutral { background: var(--color-gray-100); color: var(--color-gray-600); }
/* Alerts */
.ds-alert {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border-left: 4px solid;
font-size: var(--text-sm);
margin-bottom: var(--space-4);
}
.ds-alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: #1B7A43; }
.ds-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: #956206; }
.ds-alert-error { background: var(--color-error-bg); border-color: var(--color-error); color: #922B21; }
.ds-alert-info { background: var(--color-info-bg); border-color: var(--color-info); color: #1A6FAD; }
/* Table */
.ds-table-wrapper { overflow-x: auto; }
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.ds-table th {
text-align: left;
padding: var(--space-3) var(--space-4);
font-weight: var(--font-semibold);
color: var(--color-gray-600);
background: var(--color-gray-50);
border-bottom: 2px solid var(--color-gray-200);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ds-table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-gray-100);
color: var(--color-gray-700);
}
.ds-table tbody tr:hover { background: var(--color-gray-50); }
/* Avatar */
.ds-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-primary);
color: white;
font-weight: var(--font-semibold);
flex-shrink: 0;
}
.ds-avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.ds-avatar-md { width: 40px; height: 40px; font-size: var(--text-sm); }
.ds-avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg); }
/* Utility */
.ds-flex { display: flex; }
.ds-gap-2 { gap: var(--space-2); }
.ds-gap-3 { gap: var(--space-3); }
.ds-gap-4 { gap: var(--space-4); }
.ds-items-center { align-items: center; }
.ds-mt-2 { margin-top: var(--space-2); }
.ds-mt-4 { margin-top: var(--space-4); }
.ds-mb-4 { margin-bottom: var(--space-4); }
.ds-text-center { text-align: center; }
/* Spacing Demo */
.ds-spacing-demo {
display: flex;
align-items: flex-end;
gap: var(--space-4);
flex-wrap: wrap;
}
.ds-spacing-block {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.ds-spacing-box {
background: var(--color-primary-bg);
border: 1px solid var(--color-primary-light);
border-radius: var(--radius-sm);
}
.ds-spacing-label {
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--color-gray-500);
}
/* Shadow Demo */
.ds-shadow-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-6);
}
.ds-shadow-box {
padding: var(--space-6);
border-radius: var(--radius-lg);
background: white;
text-align: center;
}
/* Radius Demo */
.ds-radius-grid {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
}
.ds-radius-box {
width: 80px;
height: 80px;
background: var(--color-primary-bg);
border: 2px solid var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--color-primary-dark);
}
@media (max-width: 640px) {
.ds-page { padding: var(--space-4) var(--space-4); }
.ds-header { padding: var(--space-10) var(--space-4); }
.ds-header h1 { font-size: var(--text-3xl); }
.ds-color-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ds-type-row { flex-direction: column; gap: var(--space-2); }
.ds-type-meta { flex: none; }
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="ds-page">
<!-- Header -->
<div class="ds-header">
<h1>Payfrit Design System</h1>
<p>v1.0 &mdash; Brand colors, typography, components, and patterns</p>
</div>
<!-- ==================== COLORS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Color Palette</h2>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Brand Colors</h3>
<div class="ds-color-grid">
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#0D6E6E"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary</div><div class="ds-swatch-hex">#0D6E6E</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#14A3A3"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary Light</div><div class="ds-swatch-hex">#14A3A3</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#094F4F"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary Dark</div><div class="ds-swatch-hex">#094F4F</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#E6F5F5"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary BG</div><div class="ds-swatch-hex">#E6F5F5</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#F5A623"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Accent</div><div class="ds-swatch-hex">#F5A623</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#FFCF70"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Accent Light</div><div class="ds-swatch-hex">#FFCF70</div></div>
</div>
</div>
</div>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Semantic Colors</h3>
<div class="ds-color-grid">
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#2ECC71"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Success</div><div class="ds-swatch-hex">#2ECC71</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#F39C12"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Warning</div><div class="ds-swatch-hex">#F39C12</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#E74C3C"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Error</div><div class="ds-swatch-hex">#E74C3C</div></div>
</div>
<div class="ds-swatch">
<div class="ds-swatch-color" style="background:#3498DB"></div>
<div class="ds-swatch-info"><div class="ds-swatch-name">Info</div><div class="ds-swatch-hex">#3498DB</div></div>
</div>
</div>
</div>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Neutral Scale</h3>
<div class="ds-color-grid">
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#F9FAFB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 50</div><div class="ds-swatch-hex">#F9FAFB</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#F3F4F6"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 100</div><div class="ds-swatch-hex">#F3F4F6</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#E5E7EB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 200</div><div class="ds-swatch-hex">#E5E7EB</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#D1D5DB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 300</div><div class="ds-swatch-hex">#D1D5DB</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#9CA3AF"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 400</div><div class="ds-swatch-hex">#9CA3AF</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#6B7280"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 500</div><div class="ds-swatch-hex">#6B7280</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#4B5563"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 600</div><div class="ds-swatch-hex">#4B5563</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#374151"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 700</div><div class="ds-swatch-hex">#374151</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#1F2937"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 800</div><div class="ds-swatch-hex">#1F2937</div></div></div>
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#111827"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 900</div><div class="ds-swatch-hex">#111827</div></div></div>
</div>
</div>
</section>
<!-- ==================== TYPOGRAPHY ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Typography</h2>
<p class="ds-mb-4" style="color:var(--color-gray-500); font-size:var(--text-sm);">Font: <strong>Inter</strong> &mdash; Fallback: system sans-serif stack</p>
<div class="ds-type-row">
<div class="ds-type-meta">4xl / 36px<br>Bold</div>
<div style="font-size:var(--text-4xl); font-weight:var(--font-bold); line-height:var(--leading-tight);">Page Heading</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">3xl / 30px<br>Bold</div>
<div style="font-size:var(--text-3xl); font-weight:var(--font-bold); line-height:var(--leading-tight);">Section Title</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">2xl / 24px<br>Semibold</div>
<div style="font-size:var(--text-2xl); font-weight:var(--font-semibold);">Card Title</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">xl / 20px<br>Semibold</div>
<div style="font-size:var(--text-xl); font-weight:var(--font-semibold);">Subsection Heading</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">lg / 18px<br>Medium</div>
<div style="font-size:var(--text-lg); font-weight:var(--font-medium);">Lead paragraph or intro text</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">base / 16px<br>Normal</div>
<div style="font-size:var(--text-base);">Body text. This is the default reading size for all paragraph content across the Payfrit platform.</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">sm / 14px<br>Normal</div>
<div style="font-size:var(--text-sm);">Secondary text, table content, form labels, and supporting information.</div>
</div>
<div class="ds-type-row">
<div class="ds-type-meta">xs / 12px<br>Medium</div>
<div style="font-size:var(--text-xs); font-weight:var(--font-medium);">CAPTIONS, BADGES, TIMESTAMPS, AND MICRO LABELS</div>
</div>
</section>
<!-- ==================== SPACING ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Spacing Scale</h2>
<p class="ds-mb-4" style="color:var(--color-gray-500); font-size:var(--text-sm);">Base unit: 4px. All spacing uses multiples of 4.</p>
<div class="ds-spacing-demo">
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:16px;height:16px;"></div><div class="ds-spacing-label">4px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:24px;height:24px;"></div><div class="ds-spacing-label">8px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:32px;height:32px;"></div><div class="ds-spacing-label">12px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:40px;height:40px;"></div><div class="ds-spacing-label">16px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:52px;height:52px;"></div><div class="ds-spacing-label">24px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:68px;height:68px;"></div><div class="ds-spacing-label">32px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:84px;height:84px;"></div><div class="ds-spacing-label">40px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:100px;height:100px;"></div><div class="ds-spacing-label">48px</div></div>
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:128px;height:128px;"></div><div class="ds-spacing-label">64px</div></div>
</div>
</section>
<!-- ==================== SHADOWS & RADII ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Shadows &amp; Border Radius</h2>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Elevation (Shadows)</h3>
<div class="ds-shadow-grid">
<div class="ds-shadow-box" style="box-shadow: var(--shadow-sm);"><div class="ds-label">Shadow SM</div>Subtle</div>
<div class="ds-shadow-box" style="box-shadow: var(--shadow-md);"><div class="ds-label">Shadow MD</div>Cards</div>
<div class="ds-shadow-box" style="box-shadow: var(--shadow-lg);"><div class="ds-label">Shadow LG</div>Dropdowns</div>
<div class="ds-shadow-box" style="box-shadow: var(--shadow-xl);"><div class="ds-label">Shadow XL</div>Modals</div>
</div>
</div>
<div class="ds-subsection ds-mt-4">
<h3 class="ds-subsection-title">Border Radius</h3>
<div class="ds-radius-grid">
<div class="ds-radius-box" style="border-radius:var(--radius-sm);">4px</div>
<div class="ds-radius-box" style="border-radius:var(--radius-md);">8px</div>
<div class="ds-radius-box" style="border-radius:var(--radius-lg);">12px</div>
<div class="ds-radius-box" style="border-radius:var(--radius-xl);">16px</div>
<div class="ds-radius-box" style="border-radius:var(--radius-full);">Full</div>
</div>
</div>
</section>
<!-- ==================== BUTTONS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Buttons</h2>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Variants</h3>
<div class="ds-btn-row">
<button class="ds-btn ds-btn-primary">Primary</button>
<button class="ds-btn ds-btn-secondary">Secondary</button>
<button class="ds-btn ds-btn-accent">Accent</button>
<button class="ds-btn ds-btn-ghost">Ghost</button>
<button class="ds-btn ds-btn-danger">Danger</button>
</div>
</div>
<div class="ds-subsection">
<h3 class="ds-subsection-title">Sizes</h3>
<div class="ds-btn-row">
<button class="ds-btn ds-btn-primary ds-btn-sm">Small</button>
<button class="ds-btn ds-btn-primary">Default</button>
<button class="ds-btn ds-btn-primary ds-btn-lg">Large</button>
</div>
</div>
<div class="ds-subsection">
<h3 class="ds-subsection-title">States</h3>
<div class="ds-btn-row">
<button class="ds-btn ds-btn-primary">Normal</button>
<button class="ds-btn ds-btn-primary" disabled>Disabled</button>
</div>
</div>
</section>
<!-- ==================== FORM INPUTS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Form Inputs</h2>
<div style="max-width: 480px;">
<div class="ds-form-group">
<label class="ds-form-label">Full Name</label>
<input type="text" class="ds-input" placeholder="e.g. Jane Doe">
</div>
<div class="ds-form-group">
<label class="ds-form-label">Email Address</label>
<input type="email" class="ds-input" placeholder="jane@example.com">
<div class="ds-form-hint">We'll never share your email.</div>
</div>
<div class="ds-form-group">
<label class="ds-form-label">Amount (Error state)</label>
<input type="text" class="ds-input ds-input-error" value="abc">
<div class="ds-error-text">Please enter a valid dollar amount.</div>
</div>
<div class="ds-form-group">
<label class="ds-form-label">Plan Type</label>
<select class="ds-input ds-select">
<option>Select a plan...</option>
<option>Basic</option>
<option>Standard</option>
<option>Premium</option>
</select>
</div>
<div class="ds-form-group">
<label class="ds-form-label">Notes</label>
<textarea class="ds-input ds-textarea" placeholder="Additional notes..."></textarea>
</div>
<div class="ds-form-group">
<label class="ds-form-label">Notifications</label>
<div class="ds-checkbox-group">
<label class="ds-checkbox-label"><input type="checkbox" checked> Email notifications</label>
<label class="ds-checkbox-label"><input type="checkbox"> SMS notifications</label>
<label class="ds-checkbox-label"><input type="checkbox"> Push notifications</label>
</div>
</div>
<div class="ds-form-group">
<label class="ds-form-label">Payment Frequency</label>
<div class="ds-radio-group">
<label class="ds-radio-label"><input type="radio" name="freq" checked> Weekly</label>
<label class="ds-radio-label"><input type="radio" name="freq"> Bi-weekly</label>
<label class="ds-radio-label"><input type="radio" name="freq"> Monthly</label>
</div>
</div>
<button class="ds-btn ds-btn-primary ds-btn-lg" style="width:100%;">Submit</button>
</div>
</section>
<!-- ==================== CARDS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Cards</h2>
<div class="ds-card-grid">
<div class="ds-card">
<div class="ds-card-body">
<div class="ds-flex ds-items-center ds-gap-3 ds-mb-4">
<div class="ds-avatar ds-avatar-md">JD</div>
<div>
<div class="ds-card-title" style="margin-bottom:0">Jane Doe</div>
<div style="font-size:var(--text-xs); color:var(--color-gray-400);">Member since 2025</div>
</div>
</div>
<div class="ds-card-text">HSA balance: <strong style="color:var(--color-gray-900);">$2,450.00</strong></div>
</div>
<div class="ds-card-footer ds-flex ds-items-center" style="justify-content:space-between;">
<span class="ds-badge ds-badge-success">Active</span>
<button class="ds-btn ds-btn-ghost ds-btn-sm">View Details</button>
</div>
</div>
<div class="ds-card">
<div class="ds-card-body">
<div class="ds-card-title">Monthly Summary</div>
<div class="ds-card-text" style="margin-bottom:var(--space-4);">Your spending for March 2026</div>
<div style="font-size:var(--text-3xl); font-weight:var(--font-bold); color:var(--color-primary);">$1,234.56</div>
<div style="font-size:var(--text-xs); color:var(--color-success); margin-top:var(--space-1);">-12% from last month</div>
</div>
<div class="ds-card-footer">
<button class="ds-btn ds-btn-secondary ds-btn-sm" style="width:100%;">View Breakdown</button>
</div>
</div>
<div class="ds-card">
<div class="ds-card-body">
<div class="ds-card-title">Quick Actions</div>
<div class="ds-card-text ds-mb-4">Common tasks you can do right now.</div>
<div style="display:flex; flex-direction:column; gap:var(--space-2);">
<button class="ds-btn ds-btn-primary ds-btn-sm" style="width:100%;">Make a Payment</button>
<button class="ds-btn ds-btn-secondary ds-btn-sm" style="width:100%;">Request Reimbursement</button>
<button class="ds-btn ds-btn-ghost ds-btn-sm" style="width:100%;">Upload Receipt</button>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== BADGES ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Badges &amp; Tags</h2>
<div class="ds-flex ds-gap-3" style="flex-wrap:wrap;">
<span class="ds-badge ds-badge-primary">Primary</span>
<span class="ds-badge ds-badge-success">Approved</span>
<span class="ds-badge ds-badge-warning">Pending</span>
<span class="ds-badge ds-badge-error">Declined</span>
<span class="ds-badge ds-badge-info">Processing</span>
<span class="ds-badge ds-badge-neutral">Draft</span>
</div>
</section>
<!-- ==================== ALERTS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Alerts</h2>
<div class="ds-alert ds-alert-success"><strong>Success!</strong> Your payment of $250.00 has been processed.</div>
<div class="ds-alert ds-alert-warning"><strong>Heads up.</strong> Your HSA balance is running low.</div>
<div class="ds-alert ds-alert-error"><strong>Error.</strong> We could not process your transaction. Please try again.</div>
<div class="ds-alert ds-alert-info"><strong>Info:</strong> New plan options are available for your account.</div>
</section>
<!-- ==================== TABLE ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Data Table</h2>
<div class="ds-table-wrapper">
<table class="ds-table">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mar 18, 2026</td>
<td>CVS Pharmacy</td>
<td>Prescription</td>
<td>$45.00</td>
<td><span class="ds-badge ds-badge-success">Approved</span></td>
</tr>
<tr>
<td>Mar 15, 2026</td>
<td>Dr. Smith Office Visit</td>
<td>Medical</td>
<td>$180.00</td>
<td><span class="ds-badge ds-badge-warning">Pending</span></td>
</tr>
<tr>
<td>Mar 12, 2026</td>
<td>LensCrafters</td>
<td>Vision</td>
<td>$320.00</td>
<td><span class="ds-badge ds-badge-success">Approved</span></td>
</tr>
<tr>
<td>Mar 10, 2026</td>
<td>Gym Membership</td>
<td>Wellness</td>
<td>$49.99</td>
<td><span class="ds-badge ds-badge-error">Declined</span></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- ==================== AVATARS ==================== -->
<section class="ds-section">
<h2 class="ds-section-title">Avatars</h2>
<div class="ds-flex ds-items-center ds-gap-4">
<div class="ds-avatar ds-avatar-sm">A</div>
<div class="ds-avatar ds-avatar-md">JD</div>
<div class="ds-avatar ds-avatar-lg">PF</div>
<div class="ds-avatar ds-avatar-lg" style="background:var(--color-accent);">$</div>
</div>
</section>
<!-- Footer -->
<div style="text-align:center; padding:var(--space-12) 0 var(--space-6); color:var(--color-gray-400); font-size:var(--text-sm);">
Payfrit Design System v1.0 &mdash; Maintained by Ava &mdash; 2026
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink