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

design system token v0.2

Browse Source
This commit is contained in:
Juan
2026-04-13 15:46:38 -05:00
parent c3215945f2
commit c9209a6271
30 changed files with 1190 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/globals.css
View File

@@ -3,6 +3,17 @@
@import './tokens/tokens-light.css';
@import './tokens/tokens-dark.css';
/* Aspekta — self-hosted sans font (canonical UI typeface) */
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Aspekta-100.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Aspekta-200.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Aspekta-300.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Aspekta-800.woff2') format('woff2'); }
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Aspekta-900.woff2') format('woff2'); }
@custom-variant dark (&:is(.dark *));
/* =============================================================================
@@ -30,8 +41,8 @@
============================================================================= */
@theme inline {
/* Typography — Aspekta is the canonical sans font, Inter is fallback */
--font-sans: 'Aspekta', var(--font-inter, 'Inter'), ui-sans-serif, system-ui, sans-serif;
/* Typography — Aspekta (self-hosted) is the canonical sans font */
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

15
app/layout.tsx
View File

@@ -1,23 +1,18 @@
import type { Metadata } from 'next'
import { Source_Serif_4, Inter } from 'next/font/google'
import { Source_Serif_4 } from 'next/font/google'
import './globals.css'
// Primary typeface: Source Serif Pro (using Source Serif 4 which is the updated version)
// Used for headings, body text, and reading content
const sourceSerif = Source_Serif_4({
const sourceSerif = Source_Serif_4({
subsets: ["latin"],
variable: '--font-source-serif',
display: 'swap',
})
// Secondary typeface: Inter (Aspekta alternative from Google Fonts)
// Aspekta is the brand typeface, Inter is a suitable system alternative
// Secondary typeface: Aspekta (self-hosted in public/fonts/)
// Loaded via @font-face in globals.css — no Next.js font loader needed
// Used for UI labels, nav, buttons, small utility text
const inter = Inter({
subsets: ["latin"],
variable: '--font-inter',
display: 'swap',
})
export const metadata: Metadata = {
title: 'Greyhaven Design System',
@@ -48,7 +43,7 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en" className={`${sourceSerif.variable} ${inter.variable}`}>
<html lang="en" className={sourceSerif.variable}>
<body className="font-sans antialiased bg-background text-foreground">
{children}
</body>

2
app/tokens/TOKENS.md
View File

@@ -144,7 +144,7 @@
| Token | Value | Description |
|-------|-------|-------------|
| `typography.fontFamily.sans` | `Aspekta, Inter, ui-sans-serif, system-ui, sans-serif` | UI labels, buttons, nav, forms — Aspekta primary, Inter fallback |
| `typography.fontFamily.sans` | `Aspekta, ui-sans-serif, system-ui, sans-serif` | UI labels, buttons, nav, forms — Aspekta self-hosted |
| `typography.fontFamily.serif` | `'Source Serif 4', 'Source Serif Pro', Georgia, serif` | Headings, body content, reading — Source Serif primary |
| `typography.fontFamily.mono` | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` | Code blocks and monospaced content |
| `typography.fontSize.xs` | `0.75rem` | 12px — metadata, fine print |