Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0993fa5a91 | ||
|
|
9df702eaaf | ||
|
|
a9d0ac182d | ||
|
|
b6a2c908c6 |
@@ -1,3 +1,35 @@
|
||||
@font-face {
|
||||
font-family: 'Aspekta';
|
||||
src: url('/fonts/Aspekta-400.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aspekta';
|
||||
src: url('/fonts/Aspekta-500.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aspekta';
|
||||
src: url('/fonts/Aspekta-600.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aspekta';
|
||||
src: url('/fonts/Aspekta-700.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@@ -144,11 +176,31 @@
|
||||
============================================================================= */
|
||||
|
||||
@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-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
|
||||
/* Typography - Calibrated to Slides 19-24 */
|
||||
--font-serif: 'Source Serif Pro', 'Source Serif 4', 'Georgia', serif;
|
||||
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Institutional Type Scale - Hard-Calibrated to Slide 22 Scale Table */
|
||||
--type-display: clamp(4rem, 12vw, 9.375rem); /* 150px Display */
|
||||
--type-h1: clamp(2.5rem, 10vw, 6.25rem); /* 100px H1 */
|
||||
--type-h2: clamp(2rem, 6vw, 4.6875rem); /* 75px H2 */
|
||||
--type-h3: clamp(1.5rem, 4vw, 3.75rem); /* 60px H3 */
|
||||
--type-h4: clamp(1.25rem, 2vw, 2.25rem); /* 36px H4 */
|
||||
--type-body-lg: 1.125rem; /* 18px Body */
|
||||
--type-body: 0.9375rem; /* 15px Body SM */
|
||||
--type-caption: 10px; /* 10pt/px exact fallback */
|
||||
|
||||
/* Tracking - Slide 22 Table Definitions */
|
||||
--type-tracking-heading: -0.01em; /* -1% for Display/H1/H2/H3/H4 */
|
||||
--type-tracking-body: 0.02em; /* +2% for Body/Caption */
|
||||
|
||||
/* Institutional Spacing & Construction */
|
||||
--border-institutional: 0.5px;
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
|
||||
/* Color mappings */
|
||||
--color-background: rgb(var(--background));
|
||||
--color-foreground: rgb(var(--foreground));
|
||||
@@ -169,35 +221,13 @@
|
||||
--color-border: rgb(var(--border));
|
||||
--color-input: rgb(var(--input));
|
||||
--color-ring: rgb(var(--ring));
|
||||
--color-chart-1: rgb(var(--chart-1));
|
||||
--color-chart-2: rgb(var(--chart-2));
|
||||
--color-chart-3: rgb(var(--chart-3));
|
||||
--color-chart-4: rgb(var(--chart-4));
|
||||
--color-chart-5: rgb(var(--chart-5));
|
||||
--radius-sm: calc(var(--radius) - 2px);
|
||||
--radius-md: var(--radius);
|
||||
--radius-lg: calc(var(--radius) + 2px);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: rgb(var(--sidebar));
|
||||
--color-sidebar-foreground: rgb(var(--sidebar-foreground));
|
||||
--color-sidebar-primary: rgb(var(--sidebar-primary));
|
||||
--color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
|
||||
--color-sidebar-accent: rgb(var(--sidebar-accent));
|
||||
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
|
||||
--color-sidebar-border: rgb(var(--sidebar-border));
|
||||
--color-sidebar-ring: rgb(var(--sidebar-ring));
|
||||
|
||||
/* Greyhaven-specific colors for direct use */
|
||||
--color-greyhaven-orange: #D95E2A;
|
||||
--color-greyhaven-offblack: #161614;
|
||||
--color-greyhaven-offwhite: #F9F9F7;
|
||||
--color-greyhaven-grey1: #F0F0EC;
|
||||
--color-greyhaven-grey2: #DDDDD7;
|
||||
--color-greyhaven-grey3: #C4C4BD;
|
||||
--color-greyhaven-grey4: #A6A69F;
|
||||
--color-greyhaven-grey5: #7F7F79;
|
||||
--color-greyhaven-grey7: #575753;
|
||||
--color-greyhaven-grey8: #2F2F2C;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -205,6 +235,23 @@
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-feature-settings: "ss01", "ss02", "cv01", "cv11";
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
letter-spacing: var(--type-tracking-heading);
|
||||
font-weight: 500; /* Medium weight matching Slide 19 */
|
||||
}
|
||||
|
||||
p, span, li {
|
||||
letter-spacing: var(--type-tracking-body);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.institutional-grid {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-rule='evenodd' stroke='%23C4C4BD' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
|
||||
background-size: 30px 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className={`${sourceSerif.variable} ${inter.variable}`}>
|
||||
<html lang="en" className={sourceSerif.variable}>
|
||||
<head />
|
||||
<body className="font-sans antialiased bg-background text-foreground">
|
||||
{children}
|
||||
</body>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,18 +1,23 @@
|
||||
export function ColorSwatches() {
|
||||
const primaryColors = [
|
||||
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card" },
|
||||
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true },
|
||||
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true },
|
||||
{ name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215", token: "--secondary", pantone: null },
|
||||
{ name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", token: "--card (dark)", dark: true, pantone: null },
|
||||
{ name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true, pantone: "PANTONE Black 6 C" },
|
||||
]
|
||||
|
||||
const accentColors = [
|
||||
{ name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true, pantone: "PANTONE 1595 C" },
|
||||
{ name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
|
||||
]
|
||||
|
||||
const greyScale = [
|
||||
{ name: "Grey 1 (5%)", hex: "#F0F0EC", rgb: "240 240 236" },
|
||||
{ name: "Grey 2 (10%)", hex: "#DDDDD7", rgb: "221 221 215" },
|
||||
{ name: "Grey 3 (20%)", hex: "#C4C4BD", rgb: "196 196 189" },
|
||||
{ name: "Grey 4 (50%)", hex: "#A6A69F", rgb: "166 166 159" },
|
||||
{ name: "Grey 5 (60%)", hex: "#7F7F79", rgb: "127 127 121", dark: true },
|
||||
{ name: "Grey 7 (70%)", hex: "#575753", rgb: "87 87 83", dark: true },
|
||||
{ name: "Grey 8 (80%)", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
|
||||
{ name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215" },
|
||||
{ name: "Grey 2", hex: "#C4C4BD", rgb: "196 196 189" },
|
||||
{ name: "Grey 3", hex: "#A6A69F", rgb: "166 166 159" },
|
||||
{ name: "Grey 4", hex: "#7F7F79", rgb: "127 127 121", dark: true },
|
||||
{ name: "Grey 5", hex: "#575753", rgb: "87 87 83", dark: true },
|
||||
{ name: "Grey 6", hex: "#F0F0EC", rgb: "240 240 236" },
|
||||
{ name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
|
||||
]
|
||||
|
||||
const semanticTokens = [
|
||||
@@ -30,9 +35,12 @@ export function ColorSwatches() {
|
||||
<div className="space-y-10">
|
||||
{/* Primary Scheme */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
|
||||
Primary Scheme
|
||||
</h4>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-4">
|
||||
Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{primaryColors.map((color) => (
|
||||
<div key={color.name} className="border border-border rounded-md overflow-hidden">
|
||||
@@ -47,6 +55,40 @@ export function ColorSwatches() {
|
||||
<div className="p-3 bg-card">
|
||||
<p className="font-sans text-sm font-medium">{color.name}</p>
|
||||
<p className="font-mono text-xs text-muted-foreground">{color.token}</p>
|
||||
{color.pantone && (
|
||||
<p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accent */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
|
||||
Accent
|
||||
</h4>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-4">
|
||||
Orange is the single accent — used sparingly to mark what's active or important.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{accentColors.map((color) => (
|
||||
<div key={color.name} className="border border-border rounded-md overflow-hidden">
|
||||
<div
|
||||
className="h-24 flex items-end p-3"
|
||||
style={{ backgroundColor: color.hex }}
|
||||
>
|
||||
<span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
|
||||
{color.hex}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-3 bg-card">
|
||||
<p className="font-sans text-sm font-medium">{color.name}</p>
|
||||
<p className="font-mono text-xs text-muted-foreground">{color.token}</p>
|
||||
{color.pantone && (
|
||||
<p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -39,13 +39,125 @@ import {
|
||||
export function ComponentMatrix() {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-16">
|
||||
{/* Typography Audit - Slide 22 */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Typography Audit — Slide 22
|
||||
</h4>
|
||||
<div className="border-institutional border-border rounded-sm p-12 bg-brand-offwhite institutional-grid space-y-8">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">Display Title (150px)</span>
|
||||
<h1 className="text-display leading-none">Modular Systems</h1>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H1 Headline (100px)</span>
|
||||
<h1 className="text-h1 leading-none">Sovereign AI Systems</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8 border-t border-border">
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H2 Section (75px)</span>
|
||||
<h2 className="text-h2 leading-tight">Institutional Architecture</h2>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H3 Label (60px)</span>
|
||||
<h3 className="text-h3 leading-tight">Functional Design</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Key Visual - Slide 26 */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Key Visual Composition — Slide 26
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-0 border-institutional border-border rounded-sm overflow-hidden min-h-[500px]">
|
||||
<div className="p-12 bg-brand-offwhite flex flex-col justify-center space-y-6">
|
||||
<h2 className="text-h1 leading-[0.9] max-w-md">Key visual: structures built from base geometry</h2>
|
||||
<div className="space-y-4 text-muted-foreground max-w-sm">
|
||||
<p className="text-body-lg font-serif">Greyhaven's key visual is constructed from a modular system derived from the same underlying geometry as the logo.</p>
|
||||
<div className="pt-4 space-y-2">
|
||||
<div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
|
||||
<span className="w-1.5 h-1.5 bg-brand-orange"></span> Modular Stacking
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
|
||||
<span className="w-1.5 h-1.5 bg-brand-orange"></span> Hexagonal Logic
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-brand-black relative flex items-center justify-center p-12">
|
||||
<div className="absolute inset-0 institutional-grid opacity-20"></div>
|
||||
<img
|
||||
src="/brand/modular-geometry.png"
|
||||
alt="Modular Geometry"
|
||||
className="relative z-10 object-contain w-full h-full scale-110"
|
||||
/>
|
||||
<div className="absolute left-6 top-6 bottom-6 w-[2px] bg-brand-orange/50"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Brand Identity Integration */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Institutional Brand Integration
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Modular Geometry Showcase */}
|
||||
<div className="border-institutional border-border rounded-sm p-10 bg-[#F9F9F7] institutional-accent overflow-hidden relative min-h-[350px] flex flex-col justify-end">
|
||||
<div className="absolute top-4 right-4 bottom-4 w-1/2 opacity-80">
|
||||
<img
|
||||
src="/brand/modular-geometry.png"
|
||||
alt="Modular Geometry"
|
||||
className="object-contain object-right h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 space-y-4">
|
||||
<Badge className="bg-brand-orange text-white border-0 rounded-none text-[10px] uppercase tracking-widest px-2 py-0.5">Structural</Badge>
|
||||
<h3 className="text-display text-5xl leading-[0.9] text-brand-offblack">Modular<br />Core</h3>
|
||||
<p className="text-sm text-brand-grey7 max-w-[220px] font-sans">
|
||||
Leveraging architectural logic through 3D modular geometry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prompt A & B Treatments */}
|
||||
<div className="space-y-6">
|
||||
<div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-offwhite text-brand-offblack flex flex-col">
|
||||
<div className="aspect-[4/3] flex items-center justify-center overflow-hidden grayscale hover:grayscale-0 transition-all duration-500">
|
||||
<img src="/brand/briefcase-lineart.png" alt="Lineart" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h5 className="font-sans text-xs font-bold uppercase tracking-widest text-brand-orange mb-1">Prompt A</h5>
|
||||
<h4 className="text-body-lg font-serif mb-1">Institutional Lineart</h4>
|
||||
<p className="text-xs text-brand-grey7">High-contrast structural lineart defined for documentation visuals.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-black text-brand-offwhite flex flex-col">
|
||||
<div className="aspect-[4/3] flex items-center justify-center overflow-hidden">
|
||||
<img src="/brand/briefcase-silhouette.png" alt="Silhouette" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h5 className="font-sans text-xs font-bold uppercase tracking-widest text-[#D95E2A] mb-1">Prompt B</h5>
|
||||
<h4 className="text-body-lg font-serif mb-1 italic">High-Contrast Silhouette</h4>
|
||||
<p className="text-xs text-zinc-400">Bold graphic silhouettes used for high-impact social and poster assets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons - All Variants */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — Variants
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Primary</p>
|
||||
@@ -80,7 +192,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — Sizes
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Small</p>
|
||||
@@ -103,7 +215,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — States
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* Primary States */}
|
||||
<div>
|
||||
@@ -145,7 +257,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Icon Buttons
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* By Variant */}
|
||||
<div>
|
||||
@@ -185,7 +297,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons with Icons
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* Leading Icons */}
|
||||
<div>
|
||||
@@ -224,7 +336,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Core Variants
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
@@ -239,7 +351,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Tag & Value
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="tag">Tag</Badge>
|
||||
<Badge variant="tag">Category</Badge>
|
||||
@@ -255,7 +367,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Semantic
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
@@ -270,7 +382,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Channel Pills
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="whatsapp">WhatsApp</Badge>
|
||||
<Badge variant="email">Email</Badge>
|
||||
@@ -303,7 +415,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Inputs
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
||||
@@ -334,7 +446,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Select
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
||||
@@ -382,7 +494,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Checkboxes & Switches
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
|
||||
@@ -428,7 +540,7 @@ export function ComponentMatrix() {
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Tabs
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="border-institutional border-border rounded-sm p-6 bg-card">
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
|
||||
@@ -104,20 +104,67 @@ export function TypographySamples() {
|
||||
</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-2 gap-4">
|
||||
<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">Serif Stack</p>
|
||||
<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-2">Sans Stack</p>
|
||||
<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>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "my-v0-project",
|
||||
"name": "greyhaven-design-system",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
3590
pnpm-lock.yaml
generated
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.0 KiB |
BIN
public/brand/briefcase-lineart.png
Normal file
|
After Width: | Height: | Size: 5.0 MiB |
BIN
public/brand/briefcase-silhouette.png
Normal file
|
After Width: | Height: | Size: 4.3 MiB |
BIN
public/brand/cell-tower.png
Normal file
|
After Width: | Height: | Size: 4.9 MiB |
BIN
public/brand/circuit-breaker.png
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
1267
public/brand/geometric-system.svg
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
public/brand/modular-geometry.png
Normal file
|
After Width: | Height: | Size: 999 KiB |
BIN
public/brand/phone-coil.png
Normal file
|
After Width: | Height: | Size: 5.7 MiB |
BIN
public/brand/retro-phone.png
Normal file
|
After Width: | Height: | Size: 794 KiB |
BIN
public/fonts/Aspekta-400.woff2
Normal file
BIN
public/fonts/Aspekta-500.woff2
Normal file
BIN
public/fonts/Aspekta-600.woff2
Normal file
BIN
public/fonts/Aspekta-700.woff2
Normal file
|
Before Width: | Height: | Size: 585 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 986 B |
@@ -1,26 +1,9 @@
|
||||
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="54" height="70" viewBox="0 0 54 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@media (prefers-color-scheme: light) {
|
||||
.background { fill: black; }
|
||||
.foreground { fill: white; }
|
||||
}
|
||||
path { fill: #161614; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.background { fill: white; }
|
||||
.foreground { fill: black; }
|
||||
path { fill: #ffffff; }
|
||||
}
|
||||
</style>
|
||||
<g clip-path="url(#clip0_7960_43945)">
|
||||
<rect class="background" width="180" height="180" rx="37" />
|
||||
<g style="transform: scale(95%); transform-origin: center">
|
||||
<path class="foreground"
|
||||
d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
|
||||
<path class="foreground"
|
||||
d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7960_43945">
|
||||
<rect width="180" height="180" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<path d="M53.9972 15.7111L44.9215 10.3833H44.4306L36.3222 15.1424V5.32778L27.2465 0H26.7556L17.6799 5.32778V15.1424L9.57153 10.3833H9.08056L0 15.7111V16.0611V54.2208L9.07569 59.6264H9.57153L17.675 54.8042V64.6042L26.7507 70.0097H27.2465L36.3222 64.6042V54.8042L44.4257 59.6264H44.9215L53.9972 54.2208V15.7111ZM9.32361 11.3653L17.4417 16.134L9.32361 20.966L1.20556 16.134L9.32361 11.3653ZM0.972222 17.1257L8.8375 21.8069V48.1931L0.972222 52.8111V17.1257ZM8.8375 49.3208V58.3479L1.20556 53.8028L8.8375 49.3208ZM9.80972 58.3479V49.3208L17.4417 53.8028L9.80972 58.3479ZM17.675 52.8111L9.80972 48.1931V21.8069L17.675 17.1257V52.8111ZM35.35 16.0611V25.5208L27.4847 20.9028V11.4285L35.35 6.74722V16.0611ZM26.9986 31.3444L18.8806 26.5125L26.9986 21.7437L35.1167 26.5125L26.9986 31.3444ZM27.4847 10.2958V1.26875L35.1167 5.75069L27.4847 10.2958ZM26.5125 1.26875V10.2958L18.8806 5.75069L26.5125 1.26875ZM18.6472 6.74236L26.5125 11.4236V20.8979L18.6472 25.516V6.74236ZM18.6472 27.5042L26.5125 32.1854V58.5715L18.6472 63.1896V27.5042ZM26.5125 59.6993V68.7264L18.8806 64.1812L26.5125 59.6993ZM27.4847 68.7264V59.6993L35.1167 64.1812L27.4847 68.7264ZM35.35 63.1896L27.4847 58.5715V32.1854L35.35 27.5042V63.1896ZM45.1597 11.6521L52.7917 16.134L45.1597 20.6792V11.6521ZM44.1875 11.6521V20.6792L36.5556 16.134L44.1875 11.6521ZM36.3222 17.1257L44.1875 21.8069V48.1931L36.3222 52.8111V17.1257ZM44.6736 58.6396L36.5556 53.8028L44.6736 49.034L52.7917 53.8028L44.6736 58.6396ZM53.025 52.8111L45.1597 48.1931V21.8069L53.025 17.1257V52.8111Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.7 KiB |
19
public/logo.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg width="285" height="70" viewBox="0 0 285 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_0_17)">
|
||||
<path d="M97.7812 48.9805L97.368 44.8291C95.9388 47.2257 92.5701 49.6757 87.3541 49.6757C78.818 49.6757 71.2493 43.4 71.2493 32.6034C71.2493 21.8069 79.2312 15.5798 87.7187 15.5798C95.6569 15.5798 100.732 20.1493 102.482 25.5451L97.2659 27.5284C96.1576 23.8389 92.9298 20.6986 87.7138 20.6986C82.4979 20.6986 76.8736 24.4805 76.8736 32.6034C76.8736 40.7264 82.0409 44.6007 87.6701 44.6007C94.2666 44.6007 96.7604 40.0798 97.0375 37.2653H86.2409V32.4187H102.253V48.9805H97.7763H97.7812Z" fill="#161614"/>
|
||||
<path d="M120.57 31.8159C119.972 31.7235 119.37 31.6798 118.815 31.6798C114.664 31.6798 112.773 34.0763 112.773 38.2763V48.9805H107.421V26.5124H112.637V30.1097C113.697 27.6645 116.19 26.2354 119.141 26.2354C119.788 26.2354 120.342 26.3277 120.57 26.3715V31.8159Z" fill="#161614"/>
|
||||
<path d="M143.685 42.5688C142.484 46.4917 138.93 49.6757 133.535 49.6757C127.444 49.6757 122.048 45.2473 122.048 37.6348C122.048 30.5278 127.308 25.8223 132.98 25.8223C139.903 25.8223 143.962 30.3917 143.962 37.4938C143.962 38.3688 143.869 39.1077 143.821 39.2H127.395C127.531 42.6125 130.21 45.0577 133.53 45.0577C136.85 45.0577 138.42 43.3514 139.159 41.1348L143.68 42.5639L143.685 42.5688ZM138.566 35.2771C138.474 32.6473 136.719 30.2945 133.029 30.2945C129.66 30.2945 127.726 32.8757 127.541 35.2771H138.566Z" fill="#161614"/>
|
||||
<path d="M148.366 58.0708L153.767 46.3069L144.171 26.5125H150.213L156.674 40.7215L162.716 26.5125H168.389L154.088 58.0708H148.366Z" fill="#161614"/>
|
||||
<path d="M176.264 48.9805H170.912V15.575H176.264V28.6805C177.785 26.6972 180.323 25.8659 182.676 25.8659C188.213 25.8659 190.886 29.8326 190.886 34.7715V48.9805H185.534V35.6902C185.534 32.9194 184.29 30.7076 180.921 30.7076C177.97 30.7076 176.351 32.9194 176.259 35.7826V48.9805H176.264Z" fill="#161614"/>
|
||||
<path d="M201.337 36.1084L207.103 35.2334C208.396 35.0487 208.765 34.4021 208.765 33.6195C208.765 31.7285 207.472 30.207 204.521 30.207C201.571 30.207 200.137 32.0056 199.908 34.266L195.018 33.1577C195.431 29.2834 198.941 25.8223 204.478 25.8223C211.4 25.8223 214.03 29.7452 214.03 34.2174V45.3834C214.03 47.4153 214.263 48.7521 214.307 48.9806H209.324C209.28 48.8396 209.096 47.9209 209.096 46.1174C208.036 47.8237 205.819 49.6709 202.174 49.6709C197.468 49.6709 194.561 46.4431 194.561 42.8896C194.561 38.8744 197.512 36.6625 201.342 36.1084H201.337ZM208.765 39.6618V38.6459L202.908 39.5209C201.245 39.798 199.908 40.7216 199.908 42.5688C199.908 44.0903 201.06 45.4757 203.185 45.4757C206.184 45.4757 208.765 44.0466 208.765 39.6618Z" fill="#161614"/>
|
||||
<path d="M228.988 48.9805H223.635L214.501 26.5125H220.408L226.358 42.5687L232.172 26.5125H237.801L228.988 48.9805Z" fill="#161614"/>
|
||||
<path d="M259.856 42.5688C258.655 46.4917 255.101 49.6757 249.706 49.6757C243.615 49.6757 238.219 45.2473 238.219 37.6348C238.219 30.5278 243.478 25.8223 249.151 25.8223C256.074 25.8223 260.133 30.3917 260.133 37.4938C260.133 38.3688 260.04 39.1077 259.992 39.2H243.566C243.702 42.6125 246.381 45.0577 249.701 45.0577C253.021 45.0577 254.591 43.3514 255.33 41.1348L259.851 42.5639L259.856 42.5688ZM254.732 35.2771C254.64 32.6473 252.885 30.2945 249.195 30.2945C245.826 30.2945 243.892 32.8757 243.707 35.2771H254.732Z" fill="#161614"/>
|
||||
<path d="M269.393 48.9806H264.041V26.5125H269.257V29.5118C270.735 26.9306 273.408 25.866 275.902 25.866C281.39 25.866 284.02 29.8326 284.02 34.7715V48.9806H278.668V35.6903C278.668 32.9194 277.424 30.7076 274.055 30.7076C271.012 30.7076 269.393 33.0604 269.393 36.0111V48.9757V48.9806Z" fill="#161614"/>
|
||||
<path d="M53.9972 15.7111L44.9215 10.3833H44.4306L36.3222 15.1424V5.32778L27.2465 0H26.7556L17.6799 5.32778V15.1424L9.57153 10.3833H9.08056L0 15.7111V16.0611V54.2208L9.07569 59.6264H9.57153L17.675 54.8042V64.6042L26.7507 70.0097H27.2465L36.3222 64.6042V54.8042L44.4257 59.6264H44.9215L53.9972 54.2208V15.7111ZM9.32361 11.3653L17.4417 16.134L9.32361 20.966L1.20556 16.134L9.32361 11.3653ZM0.972222 17.1257L8.8375 21.8069V48.1931L0.972222 52.8111V17.1257ZM8.8375 49.3208V58.3479L1.20556 53.8028L8.8375 49.3208ZM9.80972 58.3479V49.3208L17.4417 53.8028L9.80972 58.3479ZM17.675 52.8111L9.80972 48.1931V21.8069L17.675 17.1257V52.8111ZM35.35 16.0611V25.5208L27.4847 20.9028V11.4285L35.35 6.74722V16.0611ZM26.9986 31.3444L18.8806 26.5125L26.9986 21.7437L35.1167 26.5125L26.9986 31.3444ZM27.4847 10.2958V1.26875L35.1167 5.75069L27.4847 10.2958ZM26.5125 1.26875V10.2958L18.8806 5.75069L26.5125 1.26875ZM18.6472 6.74236L26.5125 11.4236V20.8979L18.6472 25.516V6.74236ZM18.6472 27.5042L26.5125 32.1854V58.5715L18.6472 63.1896V27.5042ZM26.5125 59.6993V68.7264L18.8806 64.1812L26.5125 59.6993ZM27.4847 68.7264V59.6993L35.1167 64.1812L27.4847 68.7264ZM35.35 63.1896L27.4847 58.5715V32.1854L35.35 27.5042V63.1896ZM45.1597 11.6521L52.7917 16.134L45.1597 20.6792V11.6521ZM44.1875 11.6521V20.6792L36.5556 16.134L44.1875 11.6521ZM36.3222 17.1257L44.1875 21.8069V48.1931L36.3222 52.8111V17.1257ZM44.6736 58.6396L36.5556 53.8028L44.6736 49.034L52.7917 53.8028L44.6736 58.6396ZM53.025 52.8111L45.1597 48.1931V21.8069L53.025 17.1257V52.8111Z" fill="#161614"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_0_17">
|
||||
<rect width="284.02" height="70" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -1 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||
<svg width="285" height="70" viewBox="0 0 285 70" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_0_17)">
|
||||
<path d="M97.7812 48.9805L97.368 44.8291C95.9388 47.2257 92.5701 49.6757 87.3541 49.6757C78.818 49.6757 71.2493 43.4 71.2493 32.6034C71.2493 21.8069 79.2312 15.5798 87.7187 15.5798C95.6569 15.5798 100.732 20.1493 102.482 25.5451L97.2659 27.5284C96.1576 23.8389 92.9298 20.6986 87.7138 20.6986C82.4979 20.6986 76.8736 24.4805 76.8736 32.6034C76.8736 40.7264 82.0409 44.6007 87.6701 44.6007C94.2666 44.6007 96.7604 40.0798 97.0375 37.2653H86.2409V32.4187H102.253V48.9805H97.7763H97.7812Z" fill="#161614"/>
|
||||
<path d="M120.57 31.8159C119.972 31.7235 119.37 31.6798 118.815 31.6798C114.664 31.6798 112.773 34.0763 112.773 38.2763V48.9805H107.421V26.5124H112.637V30.1097C113.697 27.6645 116.19 26.2354 119.141 26.2354C119.788 26.2354 120.342 26.3277 120.57 26.3715V31.8159Z" fill="#161614"/>
|
||||
<path d="M143.685 42.5688C142.484 46.4917 138.93 49.6757 133.535 49.6757C127.444 49.6757 122.048 45.2473 122.048 37.6348C122.048 30.5278 127.308 25.8223 132.98 25.8223C139.903 25.8223 143.962 30.3917 143.962 37.4938C143.962 38.3688 143.869 39.1077 143.821 39.2H127.395C127.531 42.6125 130.21 45.0577 133.53 45.0577C136.85 45.0577 138.42 43.3514 139.159 41.1348L143.68 42.5639L143.685 42.5688ZM138.566 35.2771C138.474 32.6473 136.719 30.2945 133.029 30.2945C129.66 30.2945 127.726 32.8757 127.541 35.2771H138.566Z" fill="#161614"/>
|
||||
<path d="M148.366 58.0708L153.767 46.3069L144.171 26.5125H150.213L156.674 40.7215L162.716 26.5125H168.389L154.088 58.0708H148.366Z" fill="#161614"/>
|
||||
<path d="M176.264 48.9805H170.912V15.575H176.264V28.6805C177.785 26.6972 180.323 25.8659 182.676 25.8659C188.213 25.8659 190.886 29.8326 190.886 34.7715V48.9805H185.534V35.6902C185.534 32.9194 184.29 30.7076 180.921 30.7076C177.97 30.7076 176.351 32.9194 176.259 35.7826V48.9805H176.264Z" fill="#161614"/>
|
||||
<path d="M201.337 36.1084L207.103 35.2334C208.396 35.0487 208.765 34.4021 208.765 33.6195C208.765 31.7285 207.472 30.207 204.521 30.207C201.571 30.207 200.137 32.0056 199.908 34.266L195.018 33.1577C195.431 29.2834 198.941 25.8223 204.478 25.8223C211.4 25.8223 214.03 29.7452 214.03 34.2174V45.3834C214.03 47.4153 214.263 48.7521 214.307 48.9806H209.324C209.28 48.8396 209.096 47.9209 209.096 46.1174C208.036 47.8237 205.819 49.6709 202.174 49.6709C197.468 49.6709 194.561 46.4431 194.561 42.8896C194.561 38.8744 197.512 36.6625 201.342 36.1084H201.337ZM208.765 39.6618V38.6459L202.908 39.5209C201.245 39.798 199.908 40.7216 199.908 42.5688C199.908 44.0903 201.06 45.4757 203.185 45.4757C206.184 45.4757 208.765 44.0466 208.765 39.6618Z" fill="#161614"/>
|
||||
<path d="M228.988 48.9805H223.635L214.501 26.5125H220.408L226.358 42.5687L232.172 26.5125H237.801L228.988 48.9805Z" fill="#161614"/>
|
||||
<path d="M259.856 42.5688C258.655 46.4917 255.101 49.6757 249.706 49.6757C243.615 49.6757 238.219 45.2473 238.219 37.6348C238.219 30.5278 243.478 25.8223 249.151 25.8223C256.074 25.8223 260.133 30.3917 260.133 37.4938C260.133 38.3688 260.04 39.1077 259.992 39.2H243.566C243.702 42.6125 246.381 45.0577 249.701 45.0577C253.021 45.0577 254.591 43.3514 255.33 41.1348L259.851 42.5639L259.856 42.5688ZM254.732 35.2771C254.64 32.6473 252.885 30.2945 249.195 30.2945C245.826 30.2945 243.892 32.8757 243.707 35.2771H254.732Z" fill="#161614"/>
|
||||
<path d="M269.393 48.9806H264.041V26.5125H269.257V29.5118C270.735 26.9306 273.408 25.866 275.902 25.866C281.39 25.866 284.02 29.8326 284.02 34.7715V48.9806H278.668V35.6903C278.668 32.9194 277.424 30.7076 274.055 30.7076C271.012 30.7076 269.393 33.0604 269.393 36.0111V48.9757V48.9806Z" fill="#161614"/>
|
||||
<path d="M53.9972 15.7111L44.9215 10.3833H44.4306L36.3222 15.1424V5.32778L27.2465 0H26.7556L17.6799 5.32778V15.1424L9.57153 10.3833H9.08056L0 15.7111V16.0611V54.2208L9.07569 59.6264H9.57153L17.675 54.8042V64.6042L26.7507 70.0097H27.2465L36.3222 64.6042V54.8042L44.4257 59.6264H44.9215L53.9972 54.2208V15.7111ZM9.32361 11.3653L17.4417 16.134L9.32361 20.966L1.20556 16.134L9.32361 11.3653ZM0.972222 17.1257L8.8375 21.8069V48.1931L0.972222 52.8111V17.1257ZM8.8375 49.3208V58.3479L1.20556 53.8028L8.8375 49.3208ZM9.80972 58.3479V49.3208L17.4417 53.8028L9.80972 58.3479ZM17.675 52.8111L9.80972 48.1931V21.8069L17.675 17.1257V52.8111ZM35.35 16.0611V25.5208L27.4847 20.9028V11.4285L35.35 6.74722V16.0611ZM26.9986 31.3444L18.8806 26.5125L26.9986 21.7437L35.1167 26.5125L26.9986 31.3444ZM27.4847 10.2958V1.26875L35.1167 5.75069L27.4847 10.2958ZM26.5125 1.26875V10.2958L18.8806 5.75069L26.5125 1.26875ZM18.6472 6.74236L26.5125 11.4236V20.8979L18.6472 25.516V6.74236ZM18.6472 27.5042L26.5125 32.1854V58.5715L18.6472 63.1896V27.5042ZM26.5125 59.6993V68.7264L18.8806 64.1812L26.5125 59.6993ZM27.4847 68.7264V59.6993L35.1167 64.1812L27.4847 68.7264ZM35.35 63.1896L27.4847 58.5715V32.1854L35.35 27.5042V63.1896ZM45.1597 11.6521L52.7917 16.134L45.1597 20.6792V11.6521ZM44.1875 11.6521V20.6792L36.5556 16.134L44.1875 11.6521ZM36.3222 17.1257L44.1875 21.8069V48.1931L36.3222 52.8111V17.1257ZM44.6736 58.6396L36.5556 53.8028L44.6736 49.034L52.7917 53.8028L44.6736 58.6396ZM53.025 52.8111L45.1597 48.1931V21.8069L53.025 17.1257V52.8111Z" fill="#161614"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_0_17">
|
||||
<rect width="284.02" height="70" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 5.2 KiB |