130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
/**
|
|
* EDITORIAL DESIGN SYSTEM — "Issue 01"
|
|
* ------------------------------------------------------------------
|
|
* High-contrast, magazine-spread aesthetic. The whole site re-themes
|
|
* from the tokens below.
|
|
*
|
|
* CUSTOMIZATION HOOK — COLOR PALETTE
|
|
* ink → near-black, all primary type & rules
|
|
* ivory → warm paper background
|
|
* paper → slightly dimmer paper for cards / insets
|
|
* vermillion → Agent Engineering / Orchestration accent (hot)
|
|
* cobalt → MCP / A2A Protocol accent (cool)
|
|
* Swap any hex and the entire editorial system follows.
|
|
*
|
|
* CUSTOMIZATION HOOK — FONTS
|
|
* font-display → Fraunces (English serif, magazine-cover scale)
|
|
* font-serif-ko → Noto Serif KR (Korean serif headlines)
|
|
* font-sans → Pretendard / Inter (clean body)
|
|
* Font CSS variables are injected by next/font in app/layout.tsx.
|
|
*/
|
|
const config: Config = {
|
|
darkMode: ["class", '[data-theme="dark"]'],
|
|
content: [
|
|
"./app/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
desktop: "1240px",
|
|
},
|
|
colors: {
|
|
ink: {
|
|
DEFAULT: "var(--ink)",
|
|
soft: "var(--ink-soft)",
|
|
mute: "var(--ink-mute)",
|
|
},
|
|
ivory: "var(--ivory)",
|
|
paper: "var(--paper)",
|
|
line: "var(--line)",
|
|
vermillion: {
|
|
DEFAULT: "var(--vermillion)",
|
|
dark: "var(--vermillion-dark)",
|
|
},
|
|
cobalt: {
|
|
DEFAULT: "var(--cobalt)",
|
|
dark: "var(--cobalt-dark)",
|
|
},
|
|
// Back-compat aliases so any stray legacy class still resolves.
|
|
brand: {
|
|
DEFAULT: "var(--vermillion)",
|
|
dark: "var(--vermillion-dark)",
|
|
light: "var(--cobalt)",
|
|
},
|
|
accent: { DEFAULT: "var(--cobalt)" },
|
|
},
|
|
fontFamily: {
|
|
// English display serif — magazine cover scale.
|
|
display: ["var(--font-display)", "Fraunces", "Georgia", "serif"],
|
|
// Korean serif headlines.
|
|
"serif-ko": ["var(--font-serif-ko)", "Noto Serif KR", "serif"],
|
|
// Clean sans body. Geist preferred, Pretendard & Inter as web fallbacks.
|
|
sans: [
|
|
"Geist",
|
|
"var(--font-sans)",
|
|
"Pretendard",
|
|
"Inter",
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"sans-serif",
|
|
],
|
|
mono: [
|
|
"Geist Mono",
|
|
"var(--font-mono)",
|
|
"ui-monospace",
|
|
"SFMono-Regular",
|
|
"Menlo",
|
|
"Monaco",
|
|
"Consolas",
|
|
"monospace",
|
|
],
|
|
},
|
|
fontSize: {
|
|
// Magazine-cover display scale. Capped at 7rem (was 9rem) so the
|
|
// longest single word ("Standards" on /intro col-span-7) does not
|
|
// overflow the column at 1280+ viewports. See LAYOUT_AUDIT #7.
|
|
display: ["clamp(2.75rem, 9vw, 7rem)", { lineHeight: "0.95", letterSpacing: "-0.02em" }],
|
|
"display-sm": ["clamp(2rem, 5.5vw, 3.75rem)", { lineHeight: "1.02", letterSpacing: "-0.01em" }],
|
|
},
|
|
maxWidth: {
|
|
content: "78rem",
|
|
prose: "44rem",
|
|
},
|
|
letterSpacing: {
|
|
caps: "0.28em",
|
|
},
|
|
keyframes: {
|
|
marquee: {
|
|
"0%": { transform: "translateX(0)" },
|
|
"100%": { transform: "translateX(-50%)" },
|
|
},
|
|
"marquee-reverse": {
|
|
"0%": { transform: "translateX(-50%)" },
|
|
"100%": { transform: "translateX(0)" },
|
|
},
|
|
"stream-dash": {
|
|
to: { strokeDashoffset: "-1000" },
|
|
},
|
|
"node-pulse": {
|
|
"0%, 100%": { opacity: "0.35", transform: "scale(1)" },
|
|
"50%": { opacity: "1", transform: "scale(1.12)" },
|
|
},
|
|
},
|
|
animation: {
|
|
// CUSTOMIZATION HOOK — MOTION: tune marquee speed here.
|
|
marquee: "marquee 32s linear infinite",
|
|
"marquee-slow": "marquee 60s linear infinite",
|
|
"marquee-reverse": "marquee-reverse 45s linear infinite",
|
|
"stream-dash": "stream-dash 6s linear infinite",
|
|
"node-pulse": "node-pulse 4s ease-in-out infinite",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|