feat: Premium Font Stack & Distinctive Color Scheme
🎨 COMPLETE DESIGN OVERHAUL
Typography:
- Space Grotesk (premium geometric sans)
- JetBrains Mono (code/mono)
- Custom font features (ss01, ss02)
- Tight letter spacing (-0.011em)
- Bold headings with -0.025em tracking
Color Scheme:
- Emerald & Slate (distinctive, professional)
- Light: Slate 50 bg, Emerald 600 primary
- Dark: Slate 900 bg, Emerald 400 primary
- Emerald scrollbars
- Emerald focus rings
NO DEFAULT FONTS. NO BORING COLORS.
100% custom, premium design.
This commit is contained in:
fullsizemalt
parent
b20edc0c33
commit
0098f188e8
1 changed files with 25 additions and 93 deletions
|
|
@ -1,90 +1,33 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
|
||||
/* Root variables */
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 151 76% 40%;
|
||||
/* Emerald 500 equivalent in HSL approx */
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 217.2 91.2% 59.8%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 151 76% 40%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
--font-sans: 'Space Grotesk', 'SF Pro Display', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
html {
|
||||
/* Prevent text size adjustment on orientation change (iOS) */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50;
|
||||
@apply bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-50;
|
||||
font-family: var(--font-sans);
|
||||
font-feature-settings: 'rlig' 1, 'calt' 1;
|
||||
font-feature-settings: 'ss01' 1, 'ss02' 1;
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
|
||||
/* Code and monospace */
|
||||
/* Code */
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
|
|
@ -92,7 +35,7 @@
|
|||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Touch-friendly interactive elements */
|
||||
/* Touch targets */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
|
|
@ -104,41 +47,29 @@
|
|||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Focus visible for keyboard navigation (accessibility) */
|
||||
/* Focus */
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-900;
|
||||
@apply outline-none ring-2 ring-emerald-500 ring-offset-2;
|
||||
}
|
||||
|
||||
/* Skip to main content link (accessibility) */
|
||||
/* Skip link */
|
||||
.skip-to-main {
|
||||
@apply absolute left-0 top-0 -translate-y-full bg-emerald-600 text-white px-4 py-2 rounded-br-lg;
|
||||
@apply focus:translate-y-0 z-50;
|
||||
}
|
||||
|
||||
/* Reduced motion for accessibility */
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--color-primary: 0 128 0;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-primary: 0 255 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -146,7 +77,8 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-semibold tracking-tight;
|
||||
@apply font-bold tracking-tight;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -167,7 +99,7 @@
|
|||
|
||||
/* Links */
|
||||
a {
|
||||
@apply text-emerald-600 dark:text-emerald-400 hover:underline;
|
||||
@apply text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
|
|
@ -178,7 +110,7 @@
|
|||
|
||||
@layer components {
|
||||
|
||||
/* Custom scrollbar */
|
||||
/* Scrollbar */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
|
@ -188,10 +120,10 @@
|
|||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply bg-slate-300 dark:bg-slate-600 rounded-full;
|
||||
@apply bg-emerald-400 dark:bg-emerald-600 rounded-full;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-slate-400 dark:bg-slate-500;
|
||||
@apply bg-emerald-500;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue