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

feat: replace v0 defaults with Greyhaven brand — icons, fonts (Aspekta), colors, and type scale from brand guidelines

Browse Source
This commit is contained in:
Joyce
2026-04-10 09:41:14 -04:00
parent 52b4156653
commit b6a2c908c6
13 changed files with 1823 additions and 1949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/globals.css
View File

@@ -145,7 +145,7 @@
@theme inline {
/* Typography - Using CSS variables from Next.js font loading */
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
--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;
@@ -188,6 +188,7 @@
--color-sidebar-ring: rgb(var(--sidebar-ring));
/* Greyhaven-specific colors for direct use */
/* Orange: PANTONE 1595 C */
--color-greyhaven-orange: #D95E2A;
--color-greyhaven-offblack: #161614;
--color-greyhaven-offwhite: #F9F9F7;
@@ -198,6 +199,29 @@
--color-greyhaven-grey5: #7F7F79;
--color-greyhaven-grey7: #575753;
--color-greyhaven-grey8: #2F2F2C;
/* ==========================================================================
TYPE SCALE — Greyhaven Brand Guidelines v1.1
Source: brand guidelines deck, slide 22
Print pt values converted to px at 1pt = 1.333px.
Web scale is proportionally reduced from print scale.
Primary typeface: Source Serif Pro (Source Serif 4)
Secondary typeface: Aspekta (commercial) — Inter used as substitute
Logo typeface: Circular Medium (logo use only, not loaded here)
========================================================================== */
--type-display: clamp(3rem, 6vw, 7.5rem); /* 136pt print reference */
--type-h1: clamp(2.25rem, 4vw, 4.25rem); /* 68pt print reference */
--type-h2: clamp(1.75rem, 3vw, 3rem); /* 51pt print reference */
--type-h3: clamp(1.375rem, 2vw, 2.25rem); /* 40pt print reference */
--type-h4: clamp(1.125rem, 1.5vw, 2rem); /* 36pt print reference */
--type-body-lg: 1.125rem; /* 18px */
--type-body: 1rem; /* 16px */
--type-body-sm: 0.9375rem; /* 15px */
--type-caption: 0.75rem; /* 10pt / 12px */
--type-tracking-tight: -0.01em; /* 1% — headings */
--type-tracking-body: 0.02em; /* 2% — body text */
}
@layer base {

24
app/layout.tsx
View File

@@ -1,28 +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)
// Primary typeface: Source Serif Pro (Source Serif 4 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
// 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',
description: 'Visual Identity and Brand Guidelines - Greyhaven',
generator: 'v0.app',
icons: {
icon: [
{
@@ -48,7 +38,13 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en" className={`${sourceSerif.variable} ${inter.variable}`}>
<html lang="en" className={sourceSerif.variable}>
<head>
<link
href="https://api.fontshare.com/v2/css?f[]=aspekta@400,500,600,700&display=swap"
rel="stylesheet"
/>
</head>
<body className="font-sans antialiased bg-background text-foreground">
{children}
</body>

2
app/page.tsx
View File

@@ -73,7 +73,7 @@ export default function DesignSystemPage() {
<section className="mb-16">
<SectionHeader
title="Typography"
description="Source Serif Pro for explanation and human-readable detail. Aspekta (displayed as Inter) for structure, navigation, and UI."
description="Source Serif Pro for explanation and human-readable detail. Aspekta for structure, navigation, and UI."
/>
<TypographySamples />
</section>