dennisthiessen
9c6a0a72fa
Information architecture (6 nav destinations -> 4): - New Overview home: metric strip (live setups, high confidence, hit rate, expectancy), top-5 setups, watchlist pulse - Market = Watchlist + Rankings merged as tabs; scoring weights moved into a collapsible disclosure - Signals = Scanner + Performance merged as tabs (Setups | Track Record) with actions inside the panels - Legacy routes redirect (/watchlist, /rankings, /scanner, /performance) Visual identity: - Warm ash-green dark palette replaces cold navy; citron lime accent replaces blue (Tailwind gray/blue remapped at config level so all components reskin) - Primary buttons: lime with ink text; long/short stays emerald/red - Typography: Bricolage Grotesque display, Instrument Sans body, IBM Plex Mono for all numerals incl. chart canvas labels - Atmosphere: graph-paper grid + citron glow + film grain; pulsing brand dot; mono-numbered nav Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
|
|
display: ['"Bricolage Grotesque"', 'system-ui', 'sans-serif'],
|
|
mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
colors: {
|
|
// Warm ash neutrals (green-tinted) — replaces Tailwind's cool gray
|
|
// throughout the app, since components reference gray-* directly.
|
|
gray: {
|
|
50: '#f7f8f4',
|
|
100: '#eef0e9',
|
|
200: '#dde1d4',
|
|
300: '#bfc5b2',
|
|
400: '#959d87',
|
|
500: '#6e7562',
|
|
600: '#4d5344',
|
|
700: '#373c30',
|
|
800: '#22261d',
|
|
900: '#151911',
|
|
950: '#0e120f',
|
|
},
|
|
// Citron signal accent — replaces blue so every accent reference
|
|
// (text-blue-*, bg-blue-*, ring-blue-*) lights up in the brand color.
|
|
blue: {
|
|
50: '#fafee8',
|
|
100: '#f2fcc6',
|
|
200: '#e6f996',
|
|
300: '#d6f25c',
|
|
400: '#c3e82e',
|
|
500: '#a4cd14',
|
|
600: '#82a40b',
|
|
700: '#627c0e',
|
|
800: '#4e6212',
|
|
900: '#425314',
|
|
950: '#222e05',
|
|
},
|
|
surface: {
|
|
DEFAULT: 'rgba(255, 255, 255, 0.04)',
|
|
hover: 'rgba(255, 255, 255, 0.07)',
|
|
active: 'rgba(255, 255, 255, 0.1)',
|
|
border: 'rgba(223, 242, 178, 0.09)',
|
|
},
|
|
},
|
|
backdropBlur: {
|
|
glass: '16px',
|
|
},
|
|
animation: {
|
|
'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
|
|
'fade-in': 'fade-in 0.3s ease-out',
|
|
'slide-up': 'slide-up 0.4s ease-out',
|
|
'signal-pulse': 'signal-pulse 2.4s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
'glow-pulse': {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '0.8' },
|
|
},
|
|
'fade-in': {
|
|
from: { opacity: '0' },
|
|
to: { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
from: { opacity: '0', transform: 'translateY(12px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'signal-pulse': {
|
|
'0%, 100%': { opacity: '1', transform: 'scale(1)' },
|
|
'50%': { opacity: '0.35', transform: 'scale(0.8)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|