117 lines
3.7 KiB
TypeScript
117 lines
3.7 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 → MCM thrust accent (hot) [Thrust 1]
|
|
* cobalt → QUIC thrust accent (cool) [Thrust 2]
|
|
* 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 = {
|
|
content: [
|
|
"./app/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
ink: {
|
|
DEFAULT: "#0A0A0A",
|
|
soft: "#262420",
|
|
mute: "#6B655B",
|
|
},
|
|
ivory: "#F5F1E8",
|
|
paper: "#ECE6D6",
|
|
line: "#D8D1C0",
|
|
vermillion: {
|
|
DEFAULT: "#D9342B",
|
|
dark: "#A8231C",
|
|
},
|
|
cobalt: {
|
|
DEFAULT: "#1B3A8A",
|
|
dark: "#122863",
|
|
},
|
|
// Back-compat aliases so any stray legacy class still resolves.
|
|
brand: {
|
|
DEFAULT: "#D9342B",
|
|
dark: "#A8231C",
|
|
light: "#1B3A8A",
|
|
},
|
|
accent: { DEFAULT: "#1B3A8A" },
|
|
},
|
|
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. Pretendard preferred, Inter as web fallback.
|
|
sans: [
|
|
"Pretendard",
|
|
"var(--font-sans)",
|
|
"Inter",
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"Apple SD Gothic Neo",
|
|
"Malgun Gothic",
|
|
"sans-serif",
|
|
],
|
|
},
|
|
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;
|