172 lines
8.6 KiB
TypeScript
172 lines
8.6 KiB
TypeScript
export function TypographySamples() {
|
||
return (
|
||
<div className="space-y-10">
|
||
{/* Serif - Source Serif Pro */}
|
||
<div className="border border-border rounded-md p-6 bg-card">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<span className="font-sans text-xs font-semibold uppercase tracking-wide text-primary bg-primary/10 px-2 py-1 rounded">
|
||
Primary
|
||
</span>
|
||
<h4 className="font-sans text-sm font-semibold text-muted-foreground">
|
||
Source Serif Pro — Reading & Explanation
|
||
</h4>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Display / H1</p>
|
||
<p className="font-serif text-4xl font-semibold tracking-tight">
|
||
Local-first AI systems shaped by real work
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H2</p>
|
||
<p className="font-serif text-2xl font-semibold tracking-tight">
|
||
Built where work happens. Contained end to end.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H3</p>
|
||
<p className="font-serif text-xl font-medium">
|
||
Systems run inside the perimeter. Nothing leaks.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Body</p>
|
||
<p className="font-serif text-base leading-relaxed text-muted-foreground max-w-2xl">
|
||
Real work is messy, distributed, and embedded in internal systems. Cloud AI often
|
||
cannot operate there. Useful AI runs inside the environment and supports human
|
||
decision-making — not abstract it away. We sit with the operators, map the steps,
|
||
and build a system that mirrors what actually happens.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Small / Caption</p>
|
||
<p className="font-serif text-sm text-muted-foreground">
|
||
Powered by Monadical's internal, open-source stack hardened over eight years.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sans - Aspekta */}
|
||
<div className="border border-border rounded-md p-6 bg-card">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<span className="font-sans text-xs font-semibold uppercase tracking-wide text-muted-foreground bg-muted px-2 py-1 rounded">
|
||
Secondary
|
||
</span>
|
||
<h4 className="font-sans text-sm font-semibold text-muted-foreground">
|
||
Aspekta — UI, Navigation & Labels
|
||
</h4>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Navigation</p>
|
||
<div className="flex gap-6">
|
||
<span className="font-sans text-sm font-medium">Overview</span>
|
||
<span className="font-sans text-sm font-medium text-primary">Documentation</span>
|
||
<span className="font-sans text-sm font-medium">Support</span>
|
||
<span className="font-sans text-sm font-medium">Contact</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Button Text</p>
|
||
<div className="flex gap-4">
|
||
<span className="font-sans text-sm font-semibold">Get Started</span>
|
||
<span className="font-sans text-sm font-medium">Learn More</span>
|
||
<span className="font-sans text-xs font-semibold uppercase tracking-wide">View All</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Labels & Form Elements</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<span className="font-sans text-sm font-medium">Email Address</span>
|
||
<span className="font-sans text-xs text-muted-foreground">Optional</span>
|
||
<span className="font-sans text-xs font-medium text-destructive">Required field</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Status & Metadata</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<span className="font-sans text-xs font-medium bg-primary/10 text-primary px-2 py-0.5 rounded">Active</span>
|
||
<span className="font-sans text-xs font-medium bg-muted text-muted-foreground px-2 py-0.5 rounded">Pending</span>
|
||
<span className="font-sans text-xs text-muted-foreground">Last updated: 2 hours ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Type Scale Reference */}
|
||
<div className="border border-border rounded-md p-6 bg-card">
|
||
<h4 className="font-sans text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
|
||
Type Scale — Brand Guidelines v1.1
|
||
</h4>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm font-sans">
|
||
<thead>
|
||
<tr className="border-b border-border text-left">
|
||
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Level</th>
|
||
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Print ref</th>
|
||
<th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Web token</th>
|
||
<th className="pb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">Tracking</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-border">
|
||
{[
|
||
{ level: "Display", print: "136pt", token: "--type-display", tracking: "−1%" },
|
||
{ level: "H1", print: "68pt", token: "--type-h1", tracking: "−1%" },
|
||
{ level: "H2", print: "51pt", token: "--type-h2", tracking: "−1%" },
|
||
{ level: "H3", print: "40pt", token: "--type-h3", tracking: "−1%" },
|
||
{ level: "H4", print: "36pt", token: "--type-h4", tracking: "−1%" },
|
||
{ level: "Body", print: "18px", token: "--type-body-lg", tracking: "2%" },
|
||
{ level: "Body sm", print: "15px", token: "--type-body-sm", tracking: "2%" },
|
||
{ level: "Caption", print: "10pt", token: "--type-caption", tracking: "2%" },
|
||
].map((row) => (
|
||
<tr key={row.level}>
|
||
<td className="py-2 pr-6 font-medium">{row.level}</td>
|
||
<td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.print}</td>
|
||
<td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.token}</td>
|
||
<td className="py-2 text-muted-foreground font-mono text-xs">{row.tracking}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Font Stack Reference */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="border border-border rounded-md p-4 bg-card">
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Primary — Serif</p>
|
||
<p className="font-mono text-xs text-muted-foreground">
|
||
'Source Serif Pro', 'Source Serif 4', Georgia, serif
|
||
</p>
|
||
</div>
|
||
<div className="border border-border rounded-md p-4 bg-card">
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Secondary — Sans</p>
|
||
<p className="font-mono text-xs text-muted-foreground">
|
||
'Aspekta', ui-sans-serif, system-ui, sans-serif
|
||
</p>
|
||
</div>
|
||
<div className="border border-border rounded-md p-4 bg-card">
|
||
<p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Logo only</p>
|
||
<p className="font-mono text-xs text-muted-foreground mb-2">
|
||
Circular Medium
|
||
</p>
|
||
<p className="font-sans text-xs text-muted-foreground">
|
||
Used exclusively for the Greyhaven wordmark and product logos. Do not use in UI.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|