name: Local Link Kr Web Design System
description: Public Korean local-link interface with muted green surfaces, navy primary actions, and dense search-first navigation.
colors:
bg: "#f4f6f3"
bgStrong: "#e8eee9"
panel: "#ffffff"
panelSoft: "#f8faf7"
ink: "#14201f"
text: "#263736"
muted: "#657371"
line: "#d9e1dd"
navy: "#17212b"
blue: "#0f6174"
blueSoft: "#e7f2f4"
green: "#1d6d52"
greenSoft: "#e8f4ef"
orange: "#a9541f"
orangeSoft: "#fff0e6"
red: "#b91c1c"
redSoft: "#fee2e2"
typography:
body-md: { fontFamily: "Pretendard, SUIT, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif", fontSize: 15px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
nav-sm: { fontFamily: "Pretendard, SUIT, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif", fontSize: 13px, fontWeight: 800, lineHeight: 1.2, letterSpacing: 0 }
brand-md: { fontFamily: "Pretendard, SUIT, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif", fontSize: 17px, fontWeight: 800, lineHeight: 1.15, letterSpacing: 0 }
headline-xl: { fontFamily: "Pretendard, SUIT, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif", fontSize: 31px, fontWeight: 800, lineHeight: 1.18, letterSpacing: 0 }
rounded: { sm: 6px, md: 8px, pill: 999px }
spacing: { xs: 4px, sm: 8px, md: 12px, lg: 16px, xl: 24px, xxl: 52px }
components:
nav: "Grid nav with brand, compact links, and search field in one bordered surface."
search: "Three-column label, input, button control with navy submit action."
card: "White or soft panel, 1px line, 8px radius, restrained shadow."
notice: "Red-soft alert surface with red text and explicit recovery copy."Overview
Local Link Kr Web is a public browsing and search surface. It should feel local, practical, and trustworthy: green-leaning neutrals for place discovery, navy for decisive actions, and compact Korean typography for scan-heavy content.
Colors
The palette is built around warm green-gray backgrounds, white panels, dark ink, and navy action controls. Blue and green separate informational and positive states. Orange and red are reserved for attention or error states.
Typography
Use the Korean-first font stack from globals.css. Body text is 15px. Navigation and labels are heavier and smaller. Headlines are large enough to anchor a page but keep letter spacing at zero.
Layout
The app shell is centered with a maximum content width and page padding. The global nav is a dense three-column control strip: brand, navigation links, and search. On smaller screens, preserve tap target size before preserving horizontal density.
Elevation & Depth
Use borders and soft shadows sparingly. Public content cards should feel raised enough to separate from the muted background, but not like marketing tiles.
Shapes
The house radius is 8px, with 6px for internal nav-link states. Keep the radius consistent across brand marks, search, notices, cards, and buttons.
Components
Search is a primary component and should remain visible in the nav. Notices use red-soft panels. Empty-state actions reuse secondary or navy button treatments. Brand marks use the green family and a bordered soft fill.
Do's and Don'ts
Do keep search and local context prominent. Do use green and blue as semantic accents, not decoration. Don't introduce gradients or oversized hero cards. Don't reduce Korean text below the established readable sizes.