lucianoandClaude Opus 4.7
59a311cfc9
A complete visual + tonal pass on every page. Replaces the previous shadcn
slate+emerald defaults with an Italian editorial aesthetic — refined slow-food
magazine crossed with a luxury cookbook. Mobile-first, premium, distinctly
Italian, no generic AI-wellness vibes.
Tokens:
- New palette: carta (cream parchment), ink (warm black), oliva (deep olive),
pomodoro (terracotta), oro (aged gold), rule (hairline). All exposed as
HSL CSS variables and as Tailwind colors. Dark mode = oxblood/cream.
- Type stack: Fraunces (variable, optical-sizing auto, italic + roman) for
display / Inter Tight for body / JetBrains Mono with tnum + zero for
numerals. Replaces Inter-only setup.
- Font feature settings on body and .font-display for ligatures, opsz
and stylistic alternates.
- Subtle SVG paper grain on body::before (multiply blend, 4.5% opacity).
- 2px radius default (editorial print, not soft web).
Component primitives:
- Button — mono uppercase 11px tracking-widest, sharp corners, hover
inverts ink/cream. Variants tuned for the new palette.
- Input — bottom-only hairline, Fraunces 18px text, italic placeholders.
- Label — tiny mono caps, ink-soft.
- Card — top + bottom hairlines only, no shadow; Fraunces title and italic
description; CardFooter has its own top-rule.
- Select — same hairline-bottom trigger as Input; SelectContent panel uses
a hard 6px offset shadow for an editorial print stamp feel.
New component:
- Masthead — top-of-page newspaper header with thick top-rule, KP wordmark
with terracotta dot, "ANNO I · N. 0X" issue label, today's date in Italian.
Pages:
- / — Massive Fraunces "Una keto italiana, sostenibile." with terracotta
dot, italic Fraunces tagline, right-column nav with category eyebrows
(CUCINA / PROFILO) and arrow rule. Bottom: "Tre principi" with roman
numerals I/II/III. Disclaimer in italic.
- /sign-in — "CAPITOLO II / Bentornato in cucina." split layout.
- /sign-up — "CAPITOLO III / Inizia il tuo percorso." Italian copy refresh.
- /welcome — Editor's-letter layout with the four PRD §14.3 points as a
Roman-numeral list; custom hand-drawn check icon for the consent boxes.
- /profile — 7/5 split: form on the left (anagrafica + peso group), summary
on the right with massive mono numerals (BMR, TDEE, multiplier) and italic
"kcal" units; empty-state copy until the profile is saved.
- /plan — "CAPITOLO V / Il tuo piano." Italian-formatted week range. Each
day has a Roman-numeral mark (I-VII), Fraunces day name, mono kcal total.
Each meal slot uses Roman numerals (I-IV) for the meal index.
- Cookie banner — refreshed to match (italic Fraunces, "PRIVACY" eyebrow,
outline button).
Italian copy refresh:
- Headline: "Una keto italiana, sostenibile" (was "KetoPath")
- Tagline: narrative arc instead of marketing line
- CTAs: "Iscriviti" / "Accedi" (was "Inizia gratis" / "Scopri come funziona")
- Greeting: "Buongiorno, {name}." (was "Accesso effettuato come ...")
- Profile: weight columns become Iniziale / Attuale / Obiettivo under a
"Peso (chilogrammi)" group eyebrow.
E2E updated to match: home looks for the new headline and CTA labels;
profile uses the new "Come ti chiami" / "Iniziale / Attuale / Obiettivo"
labels and asserts numeric values separately from the "kcal" unit span.
All 4 specs pass. Verified visually at 1280×900 and 375×812.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
import animate from 'tailwindcss-animate';
|
|
|
|
const config: Config = {
|
|
darkMode: ['class'],
|
|
content: ['./src/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: { '2xl': '1400px' },
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
display: ['var(--font-display)', 'Georgia', 'serif'],
|
|
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
|
|
mono: ['var(--font-mono)', 'ui-monospace', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
// tighter editorial display sizes
|
|
display: ['clamp(2.75rem, 7vw, 5rem)', { lineHeight: '0.95', letterSpacing: '-0.025em' }],
|
|
'display-lg': [
|
|
'clamp(3.5rem, 10vw, 7.5rem)',
|
|
{ lineHeight: '0.92', letterSpacing: '-0.035em' },
|
|
],
|
|
},
|
|
colors: {
|
|
carta: {
|
|
DEFAULT: 'hsl(var(--carta))',
|
|
light: 'hsl(var(--carta-light))',
|
|
dim: 'hsl(var(--carta-dim))',
|
|
},
|
|
ink: {
|
|
DEFAULT: 'hsl(var(--ink))',
|
|
soft: 'hsl(var(--ink-soft))',
|
|
dim: 'hsl(var(--ink-dim))',
|
|
},
|
|
oliva: 'hsl(var(--oliva))',
|
|
pomodoro: 'hsl(var(--pomodoro))',
|
|
oro: 'hsl(var(--oro))',
|
|
rule: 'hsl(var(--rule))',
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 1px)',
|
|
sm: '1px',
|
|
},
|
|
letterSpacing: {
|
|
widest: '0.22em',
|
|
},
|
|
keyframes: {
|
|
'fade-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(0.75rem)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'rule-in': {
|
|
'0%': { transform: 'scaleX(0)' },
|
|
'100%': { transform: 'scaleX(1)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-up': 'fade-up 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both',
|
|
'rule-in': 'rule-in 800ms cubic-bezier(0.7, 0, 0.3, 1) both',
|
|
},
|
|
},
|
|
},
|
|
plugins: [animate],
|
|
};
|
|
|
|
export default config;
|