Complete visual redesign of all dashboard components with a warm brutalist command terminal aesthetic. Features editorial section numbering, IBM Plex typography, sharp zero-radius cards with colored accent strips, film grain overlay, and data-glow effects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
base: {
|
|
DEFAULT: "#0d0d0f",
|
|
50: "#161618",
|
|
100: "#1c1c1f",
|
|
200: "#232326",
|
|
300: "#2a2a2e",
|
|
400: "#38383d",
|
|
500: "#4a4a50",
|
|
600: "#6b6966",
|
|
700: "#8a8783",
|
|
800: "#b0ada8",
|
|
900: "#e8e5e0",
|
|
},
|
|
gold: {
|
|
DEFAULT: "#e8a44a",
|
|
dim: "#e8a44a80",
|
|
glow: "#e8a44a33",
|
|
muted: "#c4884a",
|
|
},
|
|
mint: {
|
|
DEFAULT: "#4ae8a8",
|
|
dim: "#4ae8a880",
|
|
glow: "#4ae8a833",
|
|
},
|
|
cherry: {
|
|
DEFAULT: "#e85a5a",
|
|
dim: "#e85a5a80",
|
|
glow: "#e85a5a33",
|
|
},
|
|
iris: {
|
|
DEFAULT: "#a87aec",
|
|
dim: "#a87aec80",
|
|
glow: "#a87aec33",
|
|
},
|
|
azure: {
|
|
DEFAULT: "#5ab4e8",
|
|
dim: "#5ab4e880",
|
|
glow: "#5ab4e833",
|
|
},
|
|
},
|
|
fontFamily: {
|
|
serif: ['"Instrument Serif"', "Georgia", "serif"],
|
|
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
|
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
|
|
},
|
|
animation: {
|
|
"fade-in": "fadeIn 0.4s ease-out both",
|
|
"slide-in": "slideIn 0.3s ease-out both",
|
|
"scan": "scan 1.5s ease-in-out infinite",
|
|
"glow-pulse": "glowPulse 2s ease-in-out infinite",
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
"0%": { opacity: "0", transform: "translateY(6px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
slideIn: {
|
|
"0%": { opacity: "0", transform: "translateX(-8px)" },
|
|
"100%": { opacity: "1", transform: "translateX(0)" },
|
|
},
|
|
scan: {
|
|
"0%, 100%": { transform: "translateX(-100%)" },
|
|
"50%": { transform: "translateX(100%)" },
|
|
},
|
|
glowPulse: {
|
|
"0%, 100%": { opacity: "0.5" },
|
|
"50%": { opacity: "1" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|