monadical/greyhaven-design-system
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: first approach from tanel

Browse Source
This commit is contained in:
Mathieu Virbel
2026-01-23 09:35:37 -05:00
commit 0c21f55dda
86 changed files with 11603 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
components/design-system/typography-samples.tsx Normal file
View File

@@ -0,0 +1,124 @@
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&apos;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>
{/* Font Stack Reference */}
<div className="grid grid-cols-1 md:grid-cols-2 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">Serif Stack</p>
<p className="font-mono text-xs text-muted-foreground">
&apos;Source Serif Pro&apos;, &apos;Source Serif 4&apos;, 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-2">Sans Stack</p>
<p className="font-mono text-xs text-muted-foreground">
&apos;Aspekta&apos;, ui-sans-serif, system-ui, sans-serif
</p>
</div>
</div>
</div>
)
}