refactor(design): align typography, colors, and card surfaces to DESIGN.md (#859)

* refactor(design): align surface tokens to DESIGN.md §2

* refactor(design): canonicalize tracked-mono kickers and display rungs

* refactor(design): collapse to five-slot palette and align card surfaces
This commit is contained in:
Anso
2026-05-01 03:01:00 -04:00
committed by GitHub
parent 7663f4cd8b
commit f62716f557
41 changed files with 248 additions and 181 deletions
@@ -232,7 +232,7 @@ export function AccountSection() {
>
<div className="flex items-center gap-2">
<ShieldCheck className="h-4 w-4 text-brand" strokeWidth={1.5} />
<span className="font-mono text-[12px] uppercase tracking-[0.16em] text-stat-value">
<span className="font-mono text-[10px] leading-3 uppercase tracking-[0.18em] text-stat-value">
enrolled
</span>
</div>
@@ -166,7 +166,7 @@ export function LabelsSection({ onLabelsChanged }: LabelsSectionProps = {}) {
{labels.map(label => (
<div key={label.id} className="flex items-center gap-3 px-4 py-3 group transition-colors hover:bg-accent/5">
<LabelDot color={label.color} />
<span className="font-mono text-[13px] flex-1">{label.name}</span>
<span className="font-mono text-sm flex-1">{label.name}</span>
<span className="text-xs text-muted-foreground tabular-nums">
{assignmentCounts[label.id] || 0} stack{(assignmentCounts[label.id] || 0) !== 1 ? 's' : ''}
</span>
@@ -388,7 +388,7 @@ function UpgradeCard({ tone, icon, title, blurb, features, action }: UpgradeCard
<div className="border border-card-border rounded-md bg-card p-4 flex flex-col gap-3">
<div className="flex items-center gap-2">
<span className={iconClass}>{icon}</span>
<span className="font-display italic text-base text-stat-value">{title}</span>
<span className="font-sans text-base text-stat-value">{title}</span>
</div>
<p className="text-xs text-stat-subtitle">{blurb}</p>
<ul className="space-y-1.5 flex-1">
@@ -41,7 +41,7 @@ export const SettingsPrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
className={cn(
'bg-brand text-brand-foreground shadow-btn-glow hover:bg-brand/90',
'font-mono uppercase tracking-[0.16em] text-xs',
'font-mono uppercase tracking-[0.18em] text-[10px] leading-3',
className,
)}
/>
@@ -57,7 +57,7 @@ export const SettingsSecondaryButton = forwardRef<HTMLButtonElement, ButtonProps
size={size ?? 'sm'}
{...props}
className={cn(
'font-mono uppercase tracking-[0.16em] text-xs',
'font-mono uppercase tracking-[0.18em] text-[10px] leading-3',
className,
)}
/>