From ef82fa7ade338828a633a2c818ec14ee21f509aa Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 15:36:15 +0900 Subject: [PATCH 01/14] Make English README the default --- README.en.md | 219 --------------------------------------------- README.ko.md | 227 +++++++++++++++++++++++++++++++++++++++++++++++ README.md | 244 +++++++++++++++++++++++++-------------------------- 3 files changed, 349 insertions(+), 341 deletions(-) delete mode 100644 README.en.md create mode 100644 README.ko.md diff --git a/README.en.md b/README.en.md deleted file mode 100644 index 006c62b..0000000 --- a/README.en.md +++ /dev/null @@ -1,219 +0,0 @@ -# openlayout - -[한국어](./README.md) | **English** - -A web layout library for choosing, comparing, and previewing website structures and design styles separately — with real webpage-style previews. - -openlayout is a layout/style dictionary that helps you quickly pick page structure and visual language before you start designing. It provides 96 layouts, 88 design styles, 10 style categories, and a webpage-style sample renderer. Each entry comes with recommended use cases, pros and cons, responsive behavior, accessibility checkpoints, a color palette, and Tailwind implementation hints. - -| Item | Value | -| --- | --- | -| Repository | https://github.com/pandaofwild/openlayout | -| Last reviewed | 2026-06-03 | - -## Who it's for - -- Designers who need to quickly compare website structures -- Frontend developers looking for base skeletons for landing pages, dashboards, docs, and commerce screens -- Teams that want to check responsive behavior and accessibility at the same time - -## Key features - -- **Layout explorer**: Filter layouts by search term, category, purpose, and complexity. -- **Full-stage preview**: View layouts large, like a real webpage background, on detail and compare pages. -- **Floating detail panel**: The base screen shows only a small summary box; clicking floats up a panel with structure description and pros/cons. -- **Compare view**: Select up to 3 layouts to compare recommended use, mobile support, density, and difficulty side by side. -- **Design Style Library**: Explore 88 design styles by category, tag, and search term, and check color palettes and webpage-style samples on detail pages. -- **Style application**: A design style chosen in `/styles` is applied to the preview tone of `/layouts` and `/layouts/compare`, and persisted in localStorage. -- **Prompt palette**: Mix prompts to generate a custom color palette and apply it directly to the current layout preview. -- **Image generation admin**: In a local environment with `OPENAI_API_KEY`, generate per-style reference images and save them to `public/generated/design-styles`. -- **SVG controls**: Comparison arrows and the info/close/detail icons are managed as inline SVG. -- **Implementation hints**: Provides Tailwind code examples and implementation tips per previewType. -- **Project skills**: `skills/layout-recommender/SKILL.md` and `skills/design-style-recommender/SKILL.md` guide purpose-based layout/style recommendations. - -## Why it helps vibe coding - -- State your page purpose up front and you can quickly narrow down layout candidates. e.g. "SaaS dashboard landing", "brand campaign", "docs-style knowledge base". -- Each layout carries its recommended use, situations to avoid, responsive behavior, and accessibility checkpoints, so you can pull design constraints straight into your prompt. -- The large previews and floating description panels on the compare page make it easy to iterate with short feedback like "let's go with this structure" or "this one is weak on mobile". -- `previewType` works like shorthand for implementation direction. e.g. `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. -- `DesignStyle` works like shorthand for visual direction. e.g. `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. -- For a new screen, the most reliable flow is: pick a structure from the layout dictionary first, then pick color/typography/mood from a design style, and finally hand components and copy off to a coding agent. - -## Quick start - -Requirements: - -- Node.js 22 or later -- npm - -Install dependencies: - -```bash -npm install -``` - -Run the dev server: - -```bash -npm run dev -``` - -Open in your browser: - -```text -http://localhost:3000/layouts -``` - -The root path (`/`) redirects to `/layouts`. - -## Main routes - -| Route | Contents | -| --- | --- | -| `/layouts` | Layout search, filters, and card list | -| `/layouts/[slug]` | Structure description, pros/cons, responsive behavior, accessibility notes, live preview, code example | -| `/layouts/compare` | Compare up to 3 layouts with large structure previews | -| `/styles` | Design style search, category/tag filters, color palettes, webpage-style samples | -| `/styles/[slug]` | Design style detail, color palette, typography/layout traits, related styles | -| `/styles/generate` | Local reference image generation admin powered by the OpenAI Image API | - -## Image generation environment variables - -`/styles/generate` and `/api/design-style-images` are local admin features. - -```bash -OPENAI_API_KEY=sk-... -OPENAI_IMAGE_MODEL=gpt-image-1.5 -``` - -- `OPENAI_API_KEY` is required. -- `OPENAI_IMAGE_MODEL` is optional and defaults to `gpt-image-1.5`. -- Generated results are saved to `public/generated/design-styles/{slug}.webp`. -- The image generation route is restricted to local development; on read-only deployment platforms like Vercel, switch to external storage such as Blob/S3. - -## Open-source usage - -This project is distributed under the MIT License. See `LICENSE` for full terms. - -- How to contribute: `CONTRIBUTING.md` -- Security reports: `SECURITY.md` -- Local environment variable example: `.env.example` -- CI: `.github/workflows/ci.yml` - -## Quality checks - -Run these before deploying or uploading changes. - -```bash -npm run lint -npm run build -``` - -## Tech stack - -- Next.js App Router -- React -- TypeScript -- Tailwind CSS - -The layout catalog is static-data driven. No separate database or external API is required. - -## Project structure - -```text -src/app/layouts/page.tsx # Explorer page -src/app/layouts/[slug]/page.tsx # Layout detail page -src/app/layouts/compare/page.tsx # Compare page shell -src/app/styles/page.tsx # Design style library page -src/app/styles/[slug]/page.tsx # Design style detail page -src/app/styles/generate/page.tsx # Local image generation admin -src/app/api/design-style-images/route.ts # OpenAI Image API route -src/data/webLayouts.ts # Layout catalog and generated metadata -src/data/designStyles.ts # 88 design styles and generated metadata -src/components/web-layout/ # Explorer, cards, previews, compare UI -src/components/design-style/ # Style cards, filters, samples, generator UI -src/components/style-preset/ # Global selected style provider -src/components/ui/ # Small shared UI primitives -skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skill -skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill -``` - -Key components: - -| File | Role | -| --- | --- | -| `WebLayoutExplorer.tsx` | Search and filter state for the layout list | -| `WebLayoutFilters.tsx` | Filter UI for search term, category, purpose, complexity | -| `WebLayoutCard.tsx` | Layout card and thumbnail | -| `LayoutStagePreview.tsx` | Full-background preview, floating summary, click-to-open description panel | -| `LayoutPreview.tsx` | Browser-style preview utility with viewport switching | -| `LayoutPreviewRenderer.tsx` | Large live preview templates per previewType | -| `WireframeThumbnail.tsx` | Structure thumbnails used on cards and the compare screen | -| `LayoutCodeExample.tsx` | Copyable Tailwind implementation example | -| `WebLayoutCompare.tsx` | Compare page selection, SVG arrow navigation, large preview display | -| `DesignStyleLibrary.tsx` | Search, filter, and applied state for the design style list | -| `DesignStyleCard.tsx` | Design style card, color palette, webpage-style sample, apply button | -| `DesignStyleSampleRenderer.tsx` | 10 webpage-style style samples per sampleType | -| `StylePresetProvider.tsx` | Persists the selected design style and custom palette in localStorage | -| `DesignStyleImageGenerator.tsx` | Style reference image generation admin UI | - -## Project skills - -`skills/layout-recommender/SKILL.md` is an internal skill a coding agent reads to recommend a layout that fits the intended use. - -`skills/design-style-recommender/SKILL.md` is an internal skill read to recommend a design style matching brand tone, industry, emotion, typography, and color direction. - -Example recommendation request: - -```text -This is a B2B SaaS onboarding page. Trust and feature explanation matter, and it has to work on mobile too. Which layout is best? -``` - -The skill is designed to first check the category, `bestFor`, `notGoodFor`, `tags`, and `previewType` in `src/data/webLayouts.ts`, then briefly suggest a top candidate, alternatives, and structures to avoid. - -Example design style recommendation request: - -```text -It's a premium beauty brand landing page, but it shouldn't be too flashy — it needs to look high-end. Which design style is best? -``` - -The design style skill suggests a top style, alternatives, and styles to avoid based on `category`, `tags`, `goodFor`, `useCases`, `palette`, and `sampleType` in `src/data/designStyles.ts`. - -## Adding a layout - -Layout data is managed in `src/data/webLayouts.ts`. - -1. Add a new entry to `layoutSeeds`. -2. Provide `nameKo`, `nameEn`, `category`, `summary`, `previewType`, and `complexity`. -3. Add `bestFor`, `notGoodFor`, and `tags` only when you need to override the defaults. -4. Let the data builder generate `slug`, the long description, pros/cons, responsive notes, accessibility notes, implementation tips, and related layouts. - -When adding a new category, also add a description and defaults to `categoryGuides`. - -## Adding a design style - -Design style data is managed in `src/data/designStyles.ts`. - -1. Add a new entry to `styleSeedTuples`. -2. Provide `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, and `sampleType`. -3. If needed, add a 9-color palette for that slug to `palettes`. -4. If a new category is needed, add visual traits, color notes, typography, and layout tendencies to `categoryProfiles`. -5. Extend `DesignStyleSampleType` and `DesignStyleSampleRenderer.tsx` only when the existing 10 sample renderers can't express it. - -## Adding a preview type - -Add a new previewType when existing templates don't reveal the structure well enough. - -1. Extend the `PreviewType` union in `src/data/webLayouts.ts`. -2. Add a structure description, responsive behavior, and implementation tips to `previewGuides`. -3. Add a live preview renderer to `src/components/web-layout/LayoutPreviewRenderer.tsx`. -4. Add a thumbnail diagram to `src/components/web-layout/WireframeThumbnail.tsx`. -5. If the implementation differs from existing examples, add a Tailwind example to `src/components/web-layout/LayoutCodeExample.tsx`. - -## Writing and design notes - -- Write layout names and summaries practically. A reader should understand when to use a structure without opening the detail page. -- Prefer concrete structure labels like `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`. -- Detail pages explain limits and trade-offs, not just benefits. -- Long descriptions on the compare page are collapsed by default so the structure diagram can be scanned first. diff --git a/README.ko.md b/README.ko.md new file mode 100644 index 0000000..b0923cd --- /dev/null +++ b/README.ko.md @@ -0,0 +1,227 @@ +# openlayout + +**한국어** | [English](./README.md) + +웹사이트 레이아웃과 디자인 형식을 분리해서 고르고, 비교하고, 실제 웹페이지형 프리뷰로 확인하는 Web Layout Library입니다. + +openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 사전입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다. + +| 항목 | 값 | +| --- | --- | +| Repository | https://github.com/pandaofwild/openlayout | +| 마지막 검토일 | 2026-06-04 | + +## 대상 사용자 + +- 웹사이트 구조를 빠르게 비교해야 하는 디자이너 +- 랜딩페이지, 대시보드, 문서, 커머스 화면의 기본 골격을 찾는 프론트엔드 개발자 +- 반응형 동작과 접근성 관점까지 함께 확인하고 싶은 팀 + +## 주요 기능 + +- **Layout explorer**: 검색어, 카테고리, 사용 목적, 복잡도로 레이아웃을 필터링합니다. +- **Full-stage preview**: 상세 페이지와 비교 페이지에서 레이아웃을 실제 웹페이지 배경처럼 크게 확인합니다. +- **Floating detail panel**: 기본 화면에는 작은 요약 박스만 두고, 클릭하면 구조 설명과 장단점이 패널로 떠오릅니다. +- **Compare view**: 최대 3개의 레이아웃을 선택해 추천 용도, 모바일 대응, 밀도, 난이도를 나란히 비교합니다. +- **Design Style Library**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다. +- **Style application**: `/styles`에서 선택한 디자인 형식이 `/layouts`와 `/layouts/compare`의 프리뷰 톤에 적용되고 localStorage에 유지됩니다. +- **Studio copy**: `/studio`에서 선택한 Style x Layout 조합의 프롬프트와 self-contained HTML/CSS 코드를 복사할 수 있습니다. +- **Component dictionary**: `/components`에서 같은 스타일 토큰이 주요 UI 컴포넌트에 어떻게 적용되는지 확인할 수 있습니다. +- **Prompt palette**: 프롬프트를 섞어 커스텀 색상표를 생성하고 현재 레이아웃 프리뷰에 바로 적용합니다. +- **Image generation admin**: `OPENAI_API_KEY`가 있는 로컬 환경에서 스타일별 참조 이미지를 생성해 `public/generated/design-styles`에 저장할 수 있습니다. +- **SVG controls**: 비교 화살표와 설명/닫기/상세 아이콘은 inline SVG로 관리합니다. +- **Implementation hints**: previewType별 Tailwind 코드 예시와 구현 팁을 제공합니다. +- **Project skills**: `skills/layout-recommender/SKILL.md`와 `skills/design-style-recommender/SKILL.md`가 목적별 레이아웃/스타일 추천 방식을 안내합니다. + +## 바이브 코딩에 도움되는 점 + +- 시작 전에 페이지 목적을 말하면 레이아웃 후보를 빠르게 좁힐 수 있습니다. 예: "SaaS 대시보드 랜딩", "브랜드 캠페인", "문서형 지식 베이스". +- 각 레이아웃은 추천 용도, 피해야 할 상황, 반응형 동작, 접근성 체크포인트를 함께 갖고 있어 프롬프트에 넣을 설계 조건을 바로 뽑아낼 수 있습니다. +- 비교 페이지의 큰 프리뷰와 플로팅 설명 패널을 보면서 "이 구조로 가자", "이건 모바일에서 약하다" 같은 결정을 짧은 피드백으로 반복하기 좋습니다. +- `previewType`은 구현 방향의 압축어처럼 쓸 수 있습니다. 예: `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. +- `DesignStyle`은 시각 방향의 압축어처럼 쓸 수 있습니다. 예: `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. +- 새 화면을 만들 때는 먼저 레이아웃 사전에서 구조를 고르고, 그 다음 디자인 형식에서 색상/타이포/분위기를 고른 뒤, 컴포넌트와 카피를 코딩 에이전트에게 맡기는 흐름이 가장 안정적입니다. + +## 빠른 시작 + +요구 사항: + +- Node.js 22 이상 +- npm + +의존성 설치: + +```bash +npm install +``` + +개발 서버 실행: + +```bash +npm run dev +``` + +브라우저에서 열기: + +```text +http://localhost:3000/layouts +``` + +루트 경로(`/`)는 `/layouts`로 리다이렉트됩니다. + +## 주요 라우트 + +| Route | 내용 | +| --- | --- | +| `/layouts` | 레이아웃 검색, 필터, 카드 목록 | +| `/layouts/[slug]` | 구조 설명, 장단점, 반응형 동작, 접근성 노트, 라이브 프리뷰, 코드 예시 | +| `/layouts/compare` | 최대 3개 레이아웃 비교와 큰 구조 미리보기 | +| `/studio` | 디자인 스타일과 레이아웃을 조합해 실제 웹 프리뷰를 보고 코드/프롬프트를 복사 | +| `/styles` | 디자인 형식 검색, 카테고리/태그 필터, 색상표, 웹페이지형 스타일 샘플 | +| `/styles/[slug]` | 디자인 형식 상세 설명, 색상표, 타이포/레이아웃 특징, 관련 스타일 | +| `/styles/generate` | OpenAI Image API 기반 로컬 참조 이미지 생성 관리자 | +| `/components` | 디자인 스타일 토큰을 버튼, 카드, 내비게이션, 입력 필드, 배지에 적용해 비교 | + +## 이미지 생성 환경 변수 + +`/styles/generate`와 `/api/design-style-images`는 로컬 관리자 기능입니다. + +```bash +OPENAI_API_KEY=sk-... +OPENAI_IMAGE_MODEL=gpt-image-1.5 +``` + +- `OPENAI_API_KEY`는 필수입니다. +- `OPENAI_IMAGE_MODEL`은 선택값이며 기본값은 `gpt-image-1.5`입니다. +- 생성 결과는 `public/generated/design-styles/{slug}.webp`에 저장됩니다. +- Vercel 같은 읽기 전용 배포 환경에서는 Blob/S3 같은 외부 저장소로 바꾸는 것이 안전합니다. + +## 오픈소스 사용 + +이 프로젝트는 MIT 라이선스로 배포됩니다. 자세한 조건은 `LICENSE`를 확인하세요. + +- 기여 방법: `CONTRIBUTING.md` +- 보안 제보: `SECURITY.md` +- 로컬 환경 변수 예시: `.env.example` +- CI: `.github/workflows/ci.yml` + +## 품질 확인 + +변경 사항을 배포하거나 업로드하기 전에 확인합니다. + +```bash +npm run lint +npm run build +``` + +## 기술 스택 + +- Next.js App Router +- React +- TypeScript +- Tailwind CSS + +레이아웃 카탈로그는 정적 데이터 기반입니다. 별도 데이터베이스나 외부 API가 필요하지 않습니다. + +## 프로젝트 구조 + +```text +src/app/layouts/page.tsx # Explorer page +src/app/layouts/[slug]/page.tsx # Layout detail page +src/app/layouts/compare/page.tsx # Compare page shell +src/app/studio/page.tsx # Style x Layout studio +src/app/components/page.tsx # Component dictionary +src/app/styles/page.tsx # Design style library page +src/app/styles/[slug]/page.tsx # Design style detail page +src/app/styles/generate/page.tsx # Local image generation admin +src/app/api/design-style-images/route.ts # OpenAI Image API route +src/data/webLayouts.ts # Layout catalog and generated metadata +src/data/designStyles.ts # 88 design styles and generated metadata +src/data/componentSpecs.ts # Tokenized component dictionary specs +src/components/web-layout/ # Explorer, cards, previews, compare UI +src/components/design-style/ # Style cards, filters, samples, generator UI +src/components/component-dictionary/ # Component token previews and picker UI +src/components/style-preset/ # Global selected style provider +src/components/ui/ # Small shared UI primitives +skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skill +skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill +``` + +주요 컴포넌트: + +| File | 역할 | +| --- | --- | +| `WebLayoutExplorer.tsx` | 레이아웃 목록의 검색과 필터 상태 | +| `WebLayoutFilters.tsx` | 검색어, 카테고리, 목적, 복잡도 필터 UI | +| `WebLayoutCard.tsx` | 레이아웃 카드와 썸네일 | +| `LayoutStagePreview.tsx` | 전체 배경형 프리뷰, 플로팅 요약, 클릭형 설명 패널 | +| `LayoutPreview.tsx` | 뷰포트 전환이 필요한 브라우저형 프리뷰 유틸 | +| `LayoutPreviewRenderer.tsx` | previewType별 큰 라이브 프리뷰 템플릿 | +| `WireframeThumbnail.tsx` | 카드와 비교 화면에 쓰이는 구조 썸네일 | +| `LayoutCodeExample.tsx` | 복사 가능한 Tailwind 구현 예시 | +| `WebLayoutCompare.tsx` | 비교 페이지 선택, SVG 화살표 탐색, 큰 프리뷰 표시 | +| `DesignStyleLibrary.tsx` | 디자인 형식 목록의 검색, 필터, 적용 상태 | +| `DesignStyleCard.tsx` | 디자인 형식 카드, 색상표, 웹페이지형 샘플, 적용 버튼 | +| `DesignStyleSampleRenderer.tsx` | sampleType별 10개 웹페이지형 스타일 샘플 | +| `StylePresetProvider.tsx` | 선택된 디자인 형식과 커스텀 팔레트 localStorage 유지 | +| `DesignStyleImageGenerator.tsx` | 스타일 참조 이미지 생성 관리자 UI | + +## 프로젝트 스킬 + +`skills/layout-recommender/SKILL.md`는 코딩 에이전트가 사용 목적에 맞는 레이아웃을 추천할 때 읽는 내부 스킬입니다. + +`skills/design-style-recommender/SKILL.md`는 브랜드 톤, 업종, 감정, 타이포그래피, 색상 방향에 맞는 디자인 형식을 추천할 때 읽는 내부 스킬입니다. + +추천 요청 예시: + +```text +이 서비스는 B2B SaaS 온보딩 페이지야. 신뢰와 기능 설명이 중요하고 모바일도 챙겨야 해. 어떤 레이아웃이 좋아? +``` + +스킬은 `src/data/webLayouts.ts`의 카테고리, `bestFor`, `notGoodFor`, `tags`, `previewType`을 먼저 확인하고 1순위 후보, 대안, 피해야 할 구조를 짧게 제안하도록 설계되어 있습니다. + +디자인 스타일 추천 요청 예시: + +```text +프리미엄 뷰티 브랜드 랜딩인데 너무 화려하진 않고 고급스럽게 보여야 해. 어떤 디자인 형식이 좋아? +``` + +디자인 스타일 스킬은 `src/data/designStyles.ts`의 `category`, `tags`, `goodFor`, `useCases`, `palette`, `sampleType`을 기준으로 1순위 스타일, 대안, 피해야 할 스타일을 제안합니다. + +## 레이아웃 추가 + +레이아웃 데이터는 `src/data/webLayouts.ts`에서 관리합니다. + +1. `layoutSeeds`에 새 항목을 추가합니다. +2. `nameKo`, `nameEn`, `category`, `summary`, `previewType`, `complexity`를 입력합니다. +3. 기본값을 바꿔야 할 때만 `bestFor`, `notGoodFor`, `tags`를 추가합니다. +4. `slug`, 긴 설명, 장단점, 반응형 노트, 접근성 노트, 구현 팁, 관련 레이아웃은 데이터 빌더가 생성하도록 둡니다. + +새 카테고리를 추가할 때는 `categoryGuides`에도 설명과 기본값을 추가해야 합니다. + +## 디자인 형식 추가 + +디자인 형식 데이터는 `src/data/designStyles.ts`에서 관리합니다. + +1. `styleSeedTuples`에 새 항목을 추가합니다. +2. `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, `sampleType`을 입력합니다. +3. 필요하면 `palettes`에 해당 slug의 9색 팔레트를 추가합니다. +4. 새 범주가 필요하면 `categoryProfiles`에 시각 특징, 색상 노트, 타이포그래피, 레이아웃 경향을 추가합니다. +5. 기존 10개 샘플 렌더러로 표현이 부족할 때만 `DesignStyleSampleType`과 `DesignStyleSampleRenderer.tsx`를 확장합니다. + +## Preview Type 추가 + +기존 템플릿으로 구조가 충분히 드러나지 않을 때 새 previewType을 추가합니다. + +1. `src/data/webLayouts.ts`의 `PreviewType` union을 확장합니다. +2. `previewGuides`에 구조 설명, 반응형 동작, 구현 팁을 추가합니다. +3. `src/components/web-layout/LayoutPreviewRenderer.tsx`에 라이브 프리뷰 렌더러를 추가합니다. +4. `src/components/web-layout/WireframeThumbnail.tsx`에 썸네일 다이어그램을 추가합니다. +5. 기존 예시와 구현 방식이 다르면 `src/components/web-layout/LayoutCodeExample.tsx`에 Tailwind 예시를 추가합니다. + +## 작성 및 설계 노트 + +- 레이아웃 이름과 요약은 실용적으로 씁니다. 상세 페이지를 열지 않아도 언제 쓰는 구조인지 알 수 있어야 합니다. +- `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`처럼 구체적인 구조 라벨을 우선합니다. +- 상세 페이지는 장점만이 아니라 한계와 트레이드오프도 설명합니다. +- 비교 페이지의 긴 설명은 기본적으로 접어 두어 구조 그림을 먼저 훑을 수 있게 합니다. diff --git a/README.md b/README.md index 8eac7a0..3e0736f 100644 --- a/README.md +++ b/README.md @@ -1,139 +1,139 @@ # openlayout -**한국어** | [English](./README.en.md) +**English** | [한국어](./README.ko.md) -웹사이트 레이아웃과 디자인 형식을 분리해서 고르고, 비교하고, 실제 웹페이지형 프리뷰로 확인하는 Web Layout Library입니다. +A web layout library for choosing, comparing, and previewing website structures and design styles separately, with real webpage-style previews. -openlayout은 디자인을 시작하기 전에 페이지 구조와 시각 언어를 빠르게 고를 수 있도록 만든 레이아웃/스타일 사전입니다. 96개의 레이아웃, 88개의 디자인 형식, 10개의 스타일 카테고리, 웹페이지형 샘플 렌더러를 제공하며, 각 항목은 추천 용도, 장단점, 반응형 동작, 접근성 체크포인트, 색상표, Tailwind 구현 힌트를 함께 보여줍니다. +openlayout is a layout and style dictionary that helps you quickly pick page structure and visual language before you start designing. It provides 96 layouts, 88 design styles, 10 style categories, and webpage-style sample renderers. Each entry includes recommended use cases, trade-offs, responsive behavior, accessibility checkpoints, a color palette, and Tailwind implementation hints. -| 항목 | 값 | +| Item | Value | | --- | --- | | Repository | https://github.com/pandaofwild/openlayout | -| 마지막 검토일 | 2026-06-03 | +| Last reviewed | 2026-06-04 | -## 대상 사용자 +## Who It's For -- 웹사이트 구조를 빠르게 비교해야 하는 디자이너 -- 랜딩페이지, 대시보드, 문서, 커머스 화면의 기본 골격을 찾는 프론트엔드 개발자 -- 반응형 동작과 접근성 관점까지 함께 확인하고 싶은 팀 +- Designers who need to quickly compare website structures +- Frontend developers looking for base skeletons for landing pages, dashboards, docs, and commerce screens +- Teams that want responsive behavior and accessibility checkpoints alongside visual direction -## 주요 기능 +## Key Features -- **Layout explorer**: 검색어, 카테고리, 사용 목적, 복잡도로 레이아웃을 필터링합니다. -- **Full-stage preview**: 상세 페이지와 비교 페이지에서 레이아웃을 실제 웹페이지 배경처럼 크게 확인합니다. -- **Floating detail panel**: 기본 화면에는 작은 요약 박스만 두고, 클릭하면 구조 설명과 장단점이 패널로 떠오릅니다. -- **Compare view**: 최대 3개의 레이아웃을 선택해 추천 용도, 모바일 대응, 밀도, 난이도를 나란히 비교합니다. -- **Design Style Library**: 88개의 디자인 형식을 카테고리, 태그, 검색어로 탐색하고 상세 페이지에서 색상표와 웹페이지형 샘플을 확인합니다. -- **Style application**: `/styles`에서 선택한 디자인 형식이 `/layouts`와 `/layouts/compare`의 프리뷰 톤에 적용되고 localStorage에 유지됩니다. -- **Studio copy**: `/studio`에서 선택한 Style x Layout 조합의 프롬프트와 self-contained HTML/CSS 코드를 복사할 수 있습니다. -- **Component dictionary**: `/components`에서 같은 스타일 토큰이 주요 UI 컴포넌트에 어떻게 적용되는지 확인할 수 있습니다. -- **Prompt palette**: 프롬프트를 섞어 커스텀 색상표를 생성하고 현재 레이아웃 프리뷰에 바로 적용합니다. -- **Image generation admin**: `OPENAI_API_KEY`가 있는 로컬 환경에서 스타일별 참조 이미지를 생성해 `public/generated/design-styles`에 저장할 수 있습니다. -- **SVG controls**: 비교 화살표와 설명/닫기/상세 아이콘은 inline SVG로 관리합니다. -- **Implementation hints**: previewType별 Tailwind 코드 예시와 구현 팁을 제공합니다. -- **Project skills**: `skills/layout-recommender/SKILL.md`와 `skills/design-style-recommender/SKILL.md`가 목적별 레이아웃/스타일 추천 방식을 안내합니다. +- **Layout explorer**: Filter layouts by search term, category, purpose, and complexity. +- **Full-stage preview**: View layouts large, like a real webpage background, on detail and compare pages. +- **Floating detail panel**: Keep the base screen focused, then open structure details and pros/cons in a floating panel. +- **Compare view**: Select up to 3 layouts and compare recommended use, mobile support, density, and difficulty side by side. +- **Design Style Library**: Explore 88 design styles by category, tag, and search term, then inspect palettes and webpage-style samples on detail pages. +- **Style application**: A design style chosen in `/styles` is applied to `/layouts` and `/layouts/compare` previews and persisted in localStorage. +- **Studio copy**: Copy a prompt or self-contained HTML/CSS for the selected Style x Layout combination from `/studio`. +- **Component dictionary**: Preview how the same style tokens affect buttons, cards, navigation, input fields, and badges in `/components`. +- **Prompt palette**: Mix prompts to generate a custom color palette and apply it directly to the current layout preview. +- **Image generation admin**: In a local environment with `OPENAI_API_KEY`, generate per-style reference images and save them to `public/generated/design-styles`. +- **SVG controls**: Comparison arrows and info/close/detail icons are managed as inline SVG. +- **Implementation hints**: Tailwind code examples and implementation tips are provided per `previewType`. +- **Project skills**: `skills/layout-recommender/SKILL.md` and `skills/design-style-recommender/SKILL.md` guide purpose-based layout and style recommendations. -## 바이브 코딩에 도움되는 점 +## Why It Helps Vibe Coding -- 시작 전에 페이지 목적을 말하면 레이아웃 후보를 빠르게 좁힐 수 있습니다. 예: "SaaS 대시보드 랜딩", "브랜드 캠페인", "문서형 지식 베이스". -- 각 레이아웃은 추천 용도, 피해야 할 상황, 반응형 동작, 접근성 체크포인트를 함께 갖고 있어 프롬프트에 넣을 설계 조건을 바로 뽑아낼 수 있습니다. -- 비교 페이지의 큰 프리뷰와 플로팅 설명 패널을 보면서 "이 구조로 가자", "이건 모바일에서 약하다" 같은 결정을 짧은 피드백으로 반복하기 좋습니다. -- `previewType`은 구현 방향의 압축어처럼 쓸 수 있습니다. 예: `hero`, `card-grid`, `dashboard`, `docs`, `comparison`. -- `DesignStyle`은 시각 방향의 압축어처럼 쓸 수 있습니다. 예: `brutalism`, `cyberpunk`, `luxury`, `organic-design`, `saas-style`. -- 새 화면을 만들 때는 먼저 레이아웃 사전에서 구조를 고르고, 그 다음 디자인 형식에서 색상/타이포/분위기를 고른 뒤, 컴포넌트와 카피를 코딩 에이전트에게 맡기는 흐름이 가장 안정적입니다. +- State your page purpose up front and quickly narrow down layout candidates, such as "SaaS dashboard landing", "brand campaign", or "docs-style knowledge base". +- Each layout includes recommended use, situations to avoid, responsive behavior, and accessibility checkpoints, so design constraints can move directly into a prompt. +- Large previews and floating description panels make it easy to iterate with short feedback like "use this structure" or "this one is weak on mobile". +- `previewType` works like shorthand for implementation direction, such as `hero`, `card-grid`, `dashboard`, `docs`, or `comparison`. +- `DesignStyle` works like shorthand for visual direction, such as `brutalism`, `cyberpunk`, `luxury`, `organic-design`, or `saas-style`. +- For a new screen, the most reliable flow is to choose structure first, then choose color/typography/mood, then hand components and copy to a coding agent. -## 빠른 시작 +## Quick Start -요구 사항: +Requirements: -- Node.js 22 이상 +- Node.js 22 or later - npm -의존성 설치: +Install dependencies: ```bash npm install ``` -개발 서버 실행: +Run the dev server: ```bash npm run dev ``` -브라우저에서 열기: +Open in your browser: ```text http://localhost:3000/layouts ``` -루트 경로(`/`)는 `/layouts`로 리다이렉트됩니다. +The root path (`/`) redirects to `/layouts`. -## 주요 라우트 +## Main Routes -| Route | 내용 | +| Route | Contents | | --- | --- | -| `/layouts` | 레이아웃 검색, 필터, 카드 목록 | -| `/layouts/[slug]` | 구조 설명, 장단점, 반응형 동작, 접근성 노트, 라이브 프리뷰, 코드 예시 | -| `/layouts/compare` | 최대 3개 레이아웃 비교와 큰 구조 미리보기 | -| `/studio` | 디자인 스타일과 레이아웃을 조합해 실제 웹 프리뷰를 보고 코드/프롬프트를 복사 | -| `/styles` | 디자인 형식 검색, 카테고리/태그 필터, 색상표, 웹페이지형 스타일 샘플 | -| `/styles/[slug]` | 디자인 형식 상세 설명, 색상표, 타이포/레이아웃 특징, 관련 스타일 | -| `/styles/generate` | OpenAI Image API 기반 로컬 참조 이미지 생성 관리자 | -| `/components` | 디자인 스타일 토큰을 버튼, 카드, 내비게이션, 입력 필드, 배지에 적용해 비교 | +| `/layouts` | Layout search, filters, and card list | +| `/layouts/[slug]` | Structure description, pros/cons, responsive behavior, accessibility notes, live preview, and code example | +| `/layouts/compare` | Compare up to 3 layouts with large structure previews | +| `/studio` | Combine a design style and layout, preview the result, and copy code or prompts | +| `/styles` | Design style search, category/tag filters, color palettes, and webpage-style samples | +| `/styles/[slug]` | Design style detail, color palette, typography/layout traits, and related styles | +| `/styles/generate` | Local reference image generation admin powered by the OpenAI Image API | +| `/components` | Compare how design style tokens affect buttons, cards, navigation, inputs, and badges | -## 이미지 생성 환경 변수 +## Image Generation Environment Variables -`/styles/generate`와 `/api/design-style-images`는 로컬 관리자 기능입니다. +`/styles/generate` and `/api/design-style-images` are local admin features. ```bash OPENAI_API_KEY=sk-... OPENAI_IMAGE_MODEL=gpt-image-1.5 ``` -- `OPENAI_API_KEY`는 필수입니다. -- `OPENAI_IMAGE_MODEL`은 선택값이며 기본값은 `gpt-image-1.5`입니다. -- 생성 결과는 `public/generated/design-styles/{slug}.webp`에 저장됩니다. -- Vercel 같은 읽기 전용 배포 환경에서는 Blob/S3 같은 외부 저장소로 바꾸는 것이 안전합니다. +- `OPENAI_API_KEY` is required. +- `OPENAI_IMAGE_MODEL` is optional and defaults to `gpt-image-1.5`. +- Generated results are saved to `public/generated/design-styles/{slug}.webp`. +- On read-only deployment platforms like Vercel, switch to external storage such as Blob/S3. -## 오픈소스 사용 +## Open Source Usage -이 프로젝트는 MIT 라이선스로 배포됩니다. 자세한 조건은 `LICENSE`를 확인하세요. +This project is distributed under the MIT License. See `LICENSE` for full terms. -- 기여 방법: `CONTRIBUTING.md` -- 보안 제보: `SECURITY.md` -- 로컬 환경 변수 예시: `.env.example` +- How to contribute: `CONTRIBUTING.md` +- Security reports: `SECURITY.md` +- Local environment variable example: `.env.example` - CI: `.github/workflows/ci.yml` -## 품질 확인 +## Quality Checks -변경 사항을 배포하거나 업로드하기 전에 확인합니다. +Run these before deploying or uploading changes. ```bash npm run lint npm run build ``` -## 기술 스택 +## Tech Stack - Next.js App Router - React - TypeScript - Tailwind CSS -레이아웃 카탈로그는 정적 데이터 기반입니다. 별도 데이터베이스나 외부 API가 필요하지 않습니다. +The layout catalog is static-data driven. No separate database or external API is required. -## 프로젝트 구조 +## Project Structure ```text -src/app/layouts/page.tsx # Explorer page -src/app/layouts/[slug]/page.tsx # Layout detail page -src/app/layouts/compare/page.tsx # Compare page shell -src/app/studio/page.tsx # Style x Layout studio -src/app/components/page.tsx # Component dictionary -src/app/styles/page.tsx # Design style library page -src/app/styles/[slug]/page.tsx # Design style detail page -src/app/styles/generate/page.tsx # Local image generation admin +src/app/layouts/page.tsx # Explorer page +src/app/layouts/[slug]/page.tsx # Layout detail page +src/app/layouts/compare/page.tsx # Compare page shell +src/app/studio/page.tsx # Style x Layout studio +src/app/components/page.tsx # Component dictionary +src/app/styles/page.tsx # Design style library page +src/app/styles/[slug]/page.tsx # Design style detail page +src/app/styles/generate/page.tsx # Local image generation admin src/app/api/design-style-images/route.ts # OpenAI Image API route src/data/webLayouts.ts # Layout catalog and generated metadata src/data/designStyles.ts # 88 design styles and generated metadata @@ -147,81 +147,81 @@ skills/layout-recommender/SKILL.md # Purpose-based layout recommendation skills/design-style-recommender/SKILL.md # Brand-tone-based style recommendation skill ``` -주요 컴포넌트: +Key components: -| File | 역할 | +| File | Role | | --- | --- | -| `WebLayoutExplorer.tsx` | 레이아웃 목록의 검색과 필터 상태 | -| `WebLayoutFilters.tsx` | 검색어, 카테고리, 목적, 복잡도 필터 UI | -| `WebLayoutCard.tsx` | 레이아웃 카드와 썸네일 | -| `LayoutStagePreview.tsx` | 전체 배경형 프리뷰, 플로팅 요약, 클릭형 설명 패널 | -| `LayoutPreview.tsx` | 뷰포트 전환이 필요한 브라우저형 프리뷰 유틸 | -| `LayoutPreviewRenderer.tsx` | previewType별 큰 라이브 프리뷰 템플릿 | -| `WireframeThumbnail.tsx` | 카드와 비교 화면에 쓰이는 구조 썸네일 | -| `LayoutCodeExample.tsx` | 복사 가능한 Tailwind 구현 예시 | -| `WebLayoutCompare.tsx` | 비교 페이지 선택, SVG 화살표 탐색, 큰 프리뷰 표시 | -| `DesignStyleLibrary.tsx` | 디자인 형식 목록의 검색, 필터, 적용 상태 | -| `DesignStyleCard.tsx` | 디자인 형식 카드, 색상표, 웹페이지형 샘플, 적용 버튼 | -| `DesignStyleSampleRenderer.tsx` | sampleType별 10개 웹페이지형 스타일 샘플 | -| `StylePresetProvider.tsx` | 선택된 디자인 형식과 커스텀 팔레트 localStorage 유지 | -| `DesignStyleImageGenerator.tsx` | 스타일 참조 이미지 생성 관리자 UI | +| `WebLayoutExplorer.tsx` | Search and filter state for the layout list | +| `WebLayoutFilters.tsx` | Filter UI for search term, category, purpose, and complexity | +| `WebLayoutCard.tsx` | Layout card and thumbnail | +| `LayoutStagePreview.tsx` | Full-background preview, floating summary, and click-to-open description panel | +| `LayoutPreview.tsx` | Browser-style preview utility with viewport switching | +| `LayoutPreviewRenderer.tsx` | Large live preview templates per `previewType` | +| `WireframeThumbnail.tsx` | Structure thumbnails used on cards and the compare screen | +| `LayoutCodeExample.tsx` | Copyable Tailwind implementation example | +| `WebLayoutCompare.tsx` | Compare page selection, SVG arrow navigation, and large preview display | +| `DesignStyleLibrary.tsx` | Search, filter, and applied state for the design style list | +| `DesignStyleCard.tsx` | Design style card, color palette, webpage-style sample, and apply button | +| `DesignStyleSampleRenderer.tsx` | 10 webpage-style samples by `sampleType` | +| `StylePresetProvider.tsx` | Persists the selected design style and custom palette in localStorage | +| `DesignStyleImageGenerator.tsx` | Style reference image generation admin UI | -## 프로젝트 스킬 +## Project Skills -`skills/layout-recommender/SKILL.md`는 코딩 에이전트가 사용 목적에 맞는 레이아웃을 추천할 때 읽는 내부 스킬입니다. +`skills/layout-recommender/SKILL.md` is an internal skill a coding agent reads to recommend a layout that fits the intended use. -`skills/design-style-recommender/SKILL.md`는 브랜드 톤, 업종, 감정, 타이포그래피, 색상 방향에 맞는 디자인 형식을 추천할 때 읽는 내부 스킬입니다. +`skills/design-style-recommender/SKILL.md` is an internal skill read to recommend a design style matching brand tone, industry, emotion, typography, and color direction. -추천 요청 예시: +Example recommendation request: ```text -이 서비스는 B2B SaaS 온보딩 페이지야. 신뢰와 기능 설명이 중요하고 모바일도 챙겨야 해. 어떤 레이아웃이 좋아? +This is a B2B SaaS onboarding page. Trust and feature explanation matter, and it has to work on mobile too. Which layout is best? ``` -스킬은 `src/data/webLayouts.ts`의 카테고리, `bestFor`, `notGoodFor`, `tags`, `previewType`을 먼저 확인하고 1순위 후보, 대안, 피해야 할 구조를 짧게 제안하도록 설계되어 있습니다. +The skill is designed to first check the category, `bestFor`, `notGoodFor`, `tags`, and `previewType` in `src/data/webLayouts.ts`, then briefly suggest a top candidate, alternatives, and structures to avoid. -디자인 스타일 추천 요청 예시: +Example design style recommendation request: ```text -프리미엄 뷰티 브랜드 랜딩인데 너무 화려하진 않고 고급스럽게 보여야 해. 어떤 디자인 형식이 좋아? +It is a premium beauty brand landing page, but it should not be too flashy. It needs to look high-end. Which design style is best? ``` -디자인 스타일 스킬은 `src/data/designStyles.ts`의 `category`, `tags`, `goodFor`, `useCases`, `palette`, `sampleType`을 기준으로 1순위 스타일, 대안, 피해야 할 스타일을 제안합니다. +The design style skill suggests a top style, alternatives, and styles to avoid based on `category`, `tags`, `goodFor`, `useCases`, `palette`, and `sampleType` in `src/data/designStyles.ts`. -## 레이아웃 추가 +## Adding a Layout -레이아웃 데이터는 `src/data/webLayouts.ts`에서 관리합니다. +Layout data is managed in `src/data/webLayouts.ts`. -1. `layoutSeeds`에 새 항목을 추가합니다. -2. `nameKo`, `nameEn`, `category`, `summary`, `previewType`, `complexity`를 입력합니다. -3. 기본값을 바꿔야 할 때만 `bestFor`, `notGoodFor`, `tags`를 추가합니다. -4. `slug`, 긴 설명, 장단점, 반응형 노트, 접근성 노트, 구현 팁, 관련 레이아웃은 데이터 빌더가 생성하도록 둡니다. +1. Add a new entry to `layoutSeeds`. +2. Provide `nameKo`, `nameEn`, `category`, `summary`, `previewType`, and `complexity`. +3. Add `bestFor`, `notGoodFor`, and `tags` only when you need to override the defaults. +4. Let the data builder generate `slug`, the long description, pros/cons, responsive notes, accessibility notes, implementation tips, and related layouts. -새 카테고리를 추가할 때는 `categoryGuides`에도 설명과 기본값을 추가해야 합니다. +When adding a new category, also add a description and defaults to `categoryGuides`. -## 디자인 형식 추가 +## Adding a Design Style -디자인 형식 데이터는 `src/data/designStyles.ts`에서 관리합니다. +Design style data is managed in `src/data/designStyles.ts`. -1. `styleSeedTuples`에 새 항목을 추가합니다. -2. `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, `sampleType`을 입력합니다. -3. 필요하면 `palettes`에 해당 slug의 9색 팔레트를 추가합니다. -4. 새 범주가 필요하면 `categoryProfiles`에 시각 특징, 색상 노트, 타이포그래피, 레이아웃 경향을 추가합니다. -5. 기존 10개 샘플 렌더러로 표현이 부족할 때만 `DesignStyleSampleType`과 `DesignStyleSampleRenderer.tsx`를 확장합니다. +1. Add a new entry to `styleSeedTuples`. +2. Provide `slug`, `nameKo`, `nameEn`, `category`, `tone`, `tags`, and `sampleType`. +3. If needed, add a 9-color palette for that slug to `palettes`. +4. If a new category is needed, add visual traits, color notes, typography, and layout tendencies to `categoryProfiles`. +5. Extend `DesignStyleSampleType` and `DesignStyleSampleRenderer.tsx` only when the existing 10 sample renderers cannot express it. -## Preview Type 추가 +## Adding a Preview Type -기존 템플릿으로 구조가 충분히 드러나지 않을 때 새 previewType을 추가합니다. +Add a new `previewType` when existing templates do not reveal the structure clearly enough. -1. `src/data/webLayouts.ts`의 `PreviewType` union을 확장합니다. -2. `previewGuides`에 구조 설명, 반응형 동작, 구현 팁을 추가합니다. -3. `src/components/web-layout/LayoutPreviewRenderer.tsx`에 라이브 프리뷰 렌더러를 추가합니다. -4. `src/components/web-layout/WireframeThumbnail.tsx`에 썸네일 다이어그램을 추가합니다. -5. 기존 예시와 구현 방식이 다르면 `src/components/web-layout/LayoutCodeExample.tsx`에 Tailwind 예시를 추가합니다. +1. Extend the `PreviewType` union in `src/data/webLayouts.ts`. +2. Add a structure description, responsive behavior, and implementation tips to `previewGuides`. +3. Add a live preview renderer to `src/components/web-layout/LayoutPreviewRenderer.tsx`. +4. Add a thumbnail diagram to `src/components/web-layout/WireframeThumbnail.tsx`. +5. If the implementation differs from existing examples, add a Tailwind example to `src/components/web-layout/LayoutCodeExample.tsx`. -## 작성 및 설계 노트 +## Writing and Design Notes -- 레이아웃 이름과 요약은 실용적으로 씁니다. 상세 페이지를 열지 않아도 언제 쓰는 구조인지 알 수 있어야 합니다. -- `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, `Product`처럼 구체적인 구조 라벨을 우선합니다. -- 상세 페이지는 장점만이 아니라 한계와 트레이드오프도 설명합니다. -- 비교 페이지의 긴 설명은 기본적으로 접어 두어 구조 그림을 먼저 훑을 수 있게 합니다. +- Write layout names and summaries practically. A reader should understand when to use a structure without opening the detail page. +- Prefer concrete structure labels like `Header`, `Main`, `Sidebar`, `CTA`, `TOC`, and `Product`. +- Detail pages explain limits and trade-offs, not just benefits. +- Long descriptions on the compare page are collapsed by default so the structure diagram can be scanned first. From 971bd43b1461b50b987c1a84417f801f4d87031a Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 15:50:09 +0900 Subject: [PATCH 02/14] Add representative style redesign plan --- ...026-06-04-representative-style-redesign.md | 961 ++++++++++++++++++ 1 file changed, 961 insertions(+) create mode 100644 docs/superpowers/plans/2026-06-04-representative-style-redesign.md diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md new file mode 100644 index 0000000..3d1df94 --- /dev/null +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -0,0 +1,961 @@ +# Representative Style Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Re-author all 88 design styles so each style reads as a representative design direction, not a category-default palette swap. + +**Architecture:** Treat `scripts/style-references.json` as the research source of truth, then turn research into explicit per-style data in `src/data/designStyles.ts`. Every style must have deliberate references, a style brief, a unique palette, non-color token overrides, a suitable sample variant, and prompt copy that describes the actual visual language. Validation should fail when styles fall back to generated/default-looking data. + +**Tech Stack:** Modified Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4, static TypeScript data, Node 22, Playwright for reference capture and visual QA. Before editing framework routes or config, read the relevant guide in `node_modules/next/dist/docs/`. + +--- + +## Current Findings + +- `README.md` is now the English default and links to `README.ko.md`; the branch has been pushed to the draft PR. +- The strongest existing memo for this work is `scripts/style-references.json`. +- `scripts/style-references.json` currently covers only 12 of 88 styles: + - `minimalism` + - `brutalism` + - `cyberpunk` + - `luxury` + - `organic-design` + - `kawaii` + - `streetwear` + - `editorial-design` + - `glassmorphism` + - `y2k` + - `maximalism` + - `swiss-design` +- `scripts/capture-references.mjs` captures those references to `public/references/[slug]/`, which is intentionally gitignored for copyright and local-only review. +- `src/data/designStyles.ts` has 88 styles, but many fields are generated from category profiles. +- `styleTokenOverrides` currently covers 24 styles; 64 styles still inherit category defaults for most non-color behavior. +- Palettes are explicit for a small subset and hash-assigned from `paletteBank` for the rest. +- The sample system has only 10 broad `DesignStyleSampleType` renderers, so many styles share the same structural expression. + +## Source Files + +### Research And Reference Files + +- Modify: `scripts/style-references.json` + - Add reference entries for all 88 style slugs. + - Keep entries split into `sites` and `galleries`. + - Prefer real brand/product/editorial sites in `sites`; keep curation platforms in `galleries`. +- Modify: `scripts/capture-references.mjs` + - Keep screenshots local-only under `public/references/`. + - Add a coverage summary that reports missing slugs before capture starts. +- Create: `scripts/check-style-references.mjs` + - Validate all 88 style slugs have references. + - Validate each referenced style has at least 2 `sites` and 1 `galleries` entry. + - Validate each reference item has `url`, `title`, and `note`. + +### Style Data Files + +- Modify: `src/data/designStyles.ts` + - Replace generated copy for each style with explicit per-style copy. + - Add explicit palettes for all 88 styles. + - Add explicit token overrides for all 88 styles. + - Add source-reference slugs or titles to each style record if needed for traceability. +- Modify: `scripts/check-data.mjs` + - Raise tuned token coverage from 24 to 88. + - Add checks that no style has generated fallback summary/description patterns. + - Add checks that each style has a unique enough palette and token signature. + +### Rendering Files + +- Modify: `src/components/design-style/DesignStyleSampleRenderer.tsx` + - Expand from 10 broad sample renderers to style-family variants where visual language actually differs. + - Keep each renderer responsive at 390px. +- Modify: `src/components/style-preset/styleTokenVars.ts` + - Add new token variables only if the re-authoring proves the current token model cannot express a style. +- Modify: `src/app/globals.css` + - Add effect utilities only after a concrete style needs them. + +### Documentation + +- Modify: `README.md` + - Mention that style data is reference-backed. +- Modify: `README.ko.md` + - Mirror the same note in Korean. +- Create: `docs/style-research/README.md` + - Explain how to add or update style references and how to run local capture. + +--- + +## Style Inventory + +Each style below must end with explicit references, explicit copy, explicit palette, explicit tokens, and a visual QA screenshot. + +### 모던 / 미니멀 + +- [ ] `minimalism` +- [ ] `modernism` +- [ ] `swiss-design` +- [ ] `international-style` +- [ ] `scandinavian` +- [ ] `japandi` +- [ ] `warm-minimal` +- [ ] `soft-minimal` +- [ ] `high-end-minimal` + +### 강렬 / 실험 + +- [ ] `brutalism` +- [ ] `new-brutalism` +- [ ] `anti-design` +- [ ] `maximalism` +- [ ] `glitch-art` +- [ ] `deconstructivism` +- [ ] `avant-garde` +- [ ] `postmodernism` + +### 레트로 / 빈티지 + +- [ ] `retro` +- [ ] `vintage` +- [ ] `seventies-retro` +- [ ] `eighties-retro` +- [ ] `nineties-graphic` +- [ ] `y2k` +- [ ] `retro-futurism` +- [ ] `mid-century-modern` +- [ ] `bauhaus` + +### 미래 / 디지털 + +- [ ] `futurism` +- [ ] `cyberpunk` +- [ ] `neon-noir` +- [ ] `techwear` +- [ ] `high-tech` +- [ ] `ai-aesthetic` +- [ ] `hologram-style` +- [ ] `chromecore` +- [ ] `metaverse-style` + +### 럭셔리 / 클래식 + +- [ ] `classic` +- [ ] `neoclassical` +- [ ] `luxury` +- [ ] `old-money` +- [ ] `art-deco` +- [ ] `art-nouveau` +- [ ] `baroque` +- [ ] `rococo` +- [ ] `gothic` + +### 자연 / 수공예 + +- [ ] `organic-design` +- [ ] `natural` +- [ ] `botanical` +- [ ] `eco-design` +- [ ] `rustic` +- [ ] `kinfolk` +- [ ] `handmade` +- [ ] `craft` +- [ ] `wabi-sabi` + +### 귀여움 / 캐주얼 + +- [ ] `kitsch` +- [ ] `kawaii` +- [ ] `dopamine-design` +- [ ] `pop-art` +- [ ] `comic-book-style` +- [ ] `toy-design` +- [ ] `playful-design` +- [ ] `pastel-style` +- [ ] `bubble-design` + +### 스트리트 / 서브컬처 + +- [ ] `streetwear` +- [ ] `graffiti` +- [ ] `hiphop-style` +- [ ] `skate-culture` +- [ ] `punk` +- [ ] `grunge` +- [ ] `indie-sleaze` +- [ ] `rave-style` +- [ ] `lo-fi` + +### 편집 / 타이포그래피 + +- [ ] `typography-focused` +- [ ] `editorial-design` +- [ ] `magazine-style` +- [ ] `posterism` +- [ ] `grid-system` +- [ ] `collage` +- [ ] `photomontage` +- [ ] `experimental-type` +- [ ] `newspaper-style` + +### UI / 웹 + +- [ ] `flat-design` +- [ ] `material-design` +- [ ] `neumorphism` +- [ ] `glassmorphism` +- [ ] `claymorphism` +- [ ] `dark-mode-design` +- [ ] `saas-style` +- [ ] `startup-landing-page` + +--- + +## Data Contract + +Add this explicit data shape inside `src/data/designStyles.ts` or split it into a focused helper file if the file becomes too large: + +```ts +type StyleReferenceSource = { + title: string; + url: string; + note: string; +}; + +type StyleResearchBrief = { + referenceSites: StyleReferenceSource[]; + referenceGalleries: StyleReferenceSource[]; + representativeTraits: string[]; + avoidTraits: string[]; + tokenIntent: string; +}; +``` + +Every style must satisfy: + +- `referenceSites.length >= 2` +- `referenceGalleries.length >= 1` +- `representativeTraits.length >= 4` +- `avoidTraits.length >= 2` +- `tokenIntent.length >= 40` +- Explicit palette assigned by slug, not by hash fallback +- Explicit `styleTokenOverrides[slug]` +- Summary must not be generated from `${nameKo}은 ${tone}입니다.` + +--- + +## Task 1: Add Reference Coverage Validation + +**Files:** +- Create: `scripts/check-style-references.mjs` +- Modify: `package.json` +- Modify: `scripts/capture-references.mjs` + +- [ ] **Step 1: Create reference check script** + +Create `scripts/check-style-references.mjs`: + +```js +import references from "./style-references.json" with { type: "json" }; +import { designStyles } from "../src/data/designStyles.ts"; + +const errors = []; +function assert(condition, message) { + if (!condition) errors.push(message); +} + +const referenceSlugs = new Set(Object.keys(references).filter((key) => !key.startsWith("_"))); +const styleSlugs = new Set(designStyles.map((style) => style.slug)); + +for (const slug of referenceSlugs) { + assert(styleSlugs.has(slug), `reference slug does not exist in designStyles: ${slug}`); +} + +for (const style of designStyles) { + const entry = references[style.slug]; + assert(entry, `missing references for ${style.slug}`); + if (!entry) continue; + + assert(Array.isArray(entry.sites), `references.${style.slug}.sites must be an array`); + assert(Array.isArray(entry.galleries), `references.${style.slug}.galleries must be an array`); + assert((entry.sites ?? []).length >= 2, `${style.slug} needs at least 2 real site references`); + assert((entry.galleries ?? []).length >= 1, `${style.slug} needs at least 1 gallery reference`); + + for (const [groupName, items] of [["sites", entry.sites ?? []], ["galleries", entry.galleries ?? []]]) { + for (const item of items) { + assert(typeof item.url === "string" && item.url.startsWith("https://"), `${style.slug}.${groupName} has bad url`); + assert(typeof item.title === "string" && item.title.length > 0, `${style.slug}.${groupName} missing title`); + assert(typeof item.note === "string" && item.note.length >= 12, `${style.slug}.${groupName} missing useful note for ${item.url}`); + } + } +} + +if (errors.length) { + console.error("STYLE REFERENCE CHECK FAILED:\n" + errors.join("\n")); + process.exit(1); +} + +console.log(`style reference check passed: ${designStyles.length} styles covered`); +``` + +- [ ] **Step 2: Add npm script** + +In `package.json`, add: + +```json +"check:style-refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-style-references.mjs" +``` + +- [ ] **Step 3: Add capture preflight summary** + +In `scripts/capture-references.mjs`, import `designStyles`: + +```js +import { designStyles } from "../src/data/designStyles.ts"; +``` + +Add this before launching Chromium: + +```js +const knownReferenceSlugs = new Set(Object.keys(references).filter((key) => !key.startsWith("_"))); +const missingReferenceSlugs = designStyles.map((style) => style.slug).filter((slug) => !knownReferenceSlugs.has(slug)); + +if (missingReferenceSlugs.length > 0) { + console.log(`\n⚠️ Missing reference entries: ${missingReferenceSlugs.length}`); + console.log(` ${missingReferenceSlugs.join(", ")}\n`); +} +``` + +- [ ] **Step 4: Verify failure before adding all references** + +Run: + +```powershell +npm run check:style-refs +``` + +Expected now: + +```text +STYLE REFERENCE CHECK FAILED: +missing references for international-style +``` + +- [ ] **Step 5: Commit** + +```powershell +git add package.json scripts/check-style-references.mjs scripts/capture-references.mjs +git commit -m "Add style reference coverage validation" +``` + +--- + +## Task 2: Expand `style-references.json` To All 88 Styles + +**Files:** +- Modify: `scripts/style-references.json` + +- [ ] **Step 1: Add missing reference entries by category** + +Add entries for every slug listed in the Style Inventory. Each entry must follow this shape: + +```json +"style-slug": { + "sites": [ + { "url": "https://example.com", "title": "Example", "note": "Why this real site represents the style and which tokens it informs" }, + { "url": "https://example.org", "title": "Example 2", "note": "Second real product, brand, archive, or editorial reference" } + ], + "galleries": [ + { "url": "https://example.net", "title": "Gallery", "note": "Curation source used for broader visual vocabulary" } + ] +} +``` + +Rules: + +- Use real sites for `sites` when possible. +- Use museum/archive pages for historical styles when active brand sites are misleading. +- Use galleries only as secondary evidence. +- Avoid adding references whose visual language is merely adjacent. +- Keep notes specific: mention typography, spacing, shape, color, texture, grid, motion, or density. + +- [ ] **Step 2: Verify reference coverage** + +Run: + +```powershell +npm run check:style-refs +``` + +Expected: + +```text +style reference check passed: 88 styles covered +``` + +- [ ] **Step 3: Capture selected references locally** + +Run a sites-only capture first: + +```powershell +npm run capture:refs -- --sites-only +``` + +Expected: + +```text +Done +Captured: 176 +Failed: 0 +``` + +If some live sites block capture, keep the URL in `style-references.json`, add a precise note, and capture the remaining references. Do not commit `public/references/`. + +- [ ] **Step 4: Commit** + +```powershell +git add scripts/style-references.json +git commit -m "Expand design style reference coverage" +``` + +--- + +## Task 3: Add Explicit Style Briefs And Remove Generated Copy + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Add explicit style brief data** + +Introduce a slug-keyed `styleBriefs` record near `styleSeedTuples`: + +```ts +type StyleBrief = { + summary: string; + description: string; + visualFeatures: string[]; + colorPalette: string[]; + typography: string[]; + layoutTraits: string[]; + useCases: string[]; + goodFor: string[]; + cautions: string[]; + representativeTraits: string[]; + avoidTraits: string[]; + tokenIntent: string; +}; + +const styleBriefs: Record = { + minimalism: { + summary: "Minimalism uses restraint, whitespace, and precise hierarchy so content feels calm and intentional.", + description: "Minimalism should feel quieter than a generic modern UI, with large negative space, restrained contrast, and very few decorative moves. It relies on proportion, alignment, and type scale instead of ornaments. The representative version should look closer to Linear, Stripe, or Muji than a blank wireframe. It must preserve one memorable visual signal so the result does not become anonymous.", + visualFeatures: [ + "Large uninterrupted whitespace around core content.", + "Thin rules or subtle surface shifts instead of heavy cards.", + "One restrained accent used for navigation state or CTA only.", + "Precise grid alignment with few competing focal points." + ], + colorPalette: [ + "Warm off-white or cool white base.", + "Near-black text with a muted gray secondary scale.", + "One low-saturation accent.", + "Very light borders for surface separation." + ], + typography: [ + "Clean sans-serif display with moderate weight.", + "Small uppercase metadata labels.", + "Comfortable body line height with restrained tracking." + ], + layoutTraits: [ + "Single-column or quiet two-column structure.", + "Large section spacing.", + "Low card density.", + "CTA placement that does not compete with content." + ], + useCases: ["Product overview", "Studio portfolio", "Documentation landing", "Premium service introduction"], + goodFor: ["SaaS", "Design studios", "Architecture", "Editorial portfolios"], + cautions: [ + "Do not remove so much detail that the page becomes generic.", + "Do not rely on color alone for hierarchy.", + "Avoid crowded card grids." + ], + representativeTraits: ["Whitespace", "Precision", "Restraint", "Single accent"], + avoidTraits: ["Generic empty boxes", "Decorative gradients"], + tokenIntent: "Use airy spacing, thin borders, no shadow, restrained weights, and near-neutral palette so the style is driven by proportion rather than decoration." + } +}; +``` + +Use `minimalism` as the pattern for all 88 entries. Do not leave temporary or generic entries. + +- [ ] **Step 2: Replace generated fields in `buildStyle()`** + +Replace generated copy in `buildStyle()`: + +```ts +const brief = styleBriefs[seed.slug]; +``` + +Then set: + +```ts +summary: brief.summary, +description: brief.description, +visualFeatures: brief.visualFeatures, +colorPalette: brief.colorPalette, +typography: brief.typography, +layoutTraits: brief.layoutTraits, +useCases: brief.useCases, +goodFor: brief.goodFor, +cautions: brief.cautions, +``` + +Keep generated `related` only until a later task replaces it with explicit related styles. + +- [ ] **Step 3: Add data checks for explicit copy** + +In `scripts/check-data.mjs`, add: + +```js +for (const s of designStyles) { + assert(!s.summary.includes(`${s.nameKo}은 `), `style ${s.slug} still has generated summary`); + assert(!s.description.includes("범주 안에서"), `style ${s.slug} still has generated description`); + assert(s.visualFeatures.every((item) => item.length >= 12), `style ${s.slug} has weak visualFeatures`); + assert(s.layoutTraits.every((item) => item.length >= 8), `style ${s.slug} has weak layoutTraits`); +} +``` + +- [ ] **Step 4: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +Expected: + +```text +data check passed: 88 styles, 10 categories +``` + +- [ ] **Step 5: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Replace generated style copy with explicit briefs" +``` + +--- + +## Task 4: Make Palettes Explicit For All 88 Styles + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Replace hash palette fallback** + +In `styleSeeds`, replace: + +```ts +palette: palettes[slug] ?? paletteBank[Math.abs(hashSlug(slug)) % paletteBank.length], +``` + +with: + +```ts +palette: palettes[slug], +``` + +- [ ] **Step 2: Add a missing-palette guard** + +Before `styleSeeds`, add: + +```ts +for (const [slug] of styleSeedTuples) { + if (!palettes[slug]) { + throw new Error(`Missing palette for design style: ${slug}`); + } +} +``` + +- [ ] **Step 3: Add explicit palettes for all missing slugs** + +For every style slug, add a 9-color palette: + +```ts +"style-slug": { + base: "#000000", + surface: "#111111", + text: "#FFFFFF", + mutedText: "#999999", + primary: "#FFFFFF", + accent: "#FF0000", + accent2: "#00FF00", + accent3: "#0000FF", + border: "#FFFFFF", +}, +``` + +Palette rules: + +- `base`, `surface`, `text`, and `border` must preserve readable contrast. +- `accent`, `accent2`, and `accent3` must reflect the representative references. +- Neighboring styles in the same category must not share identical palettes. +- Historic styles should use era-specific color relationships rather than trendy defaults. + +- [ ] **Step 4: Strengthen data check** + +In `scripts/check-data.mjs`, add: + +```js +const paletteSignatures = new Map(); +for (const s of designStyles) { + const signature = [ + s.palette.base, + s.palette.surface, + s.palette.text, + s.palette.primary, + s.palette.accent, + s.palette.accent2, + s.palette.accent3, + s.palette.border, + ].join("|"); + const existing = paletteSignatures.get(signature) ?? []; + existing.push(s.slug); + paletteSignatures.set(signature, existing); +} + +for (const [signature, slugs] of paletteSignatures) { + assert(slugs.length === 1, `duplicate palette signature: ${slugs.join(", ")}`); +} +``` + +- [ ] **Step 5: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +- [ ] **Step 6: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Make all design style palettes explicit" +``` + +--- + +## Task 5: Make Token Overrides Explicit For All 88 Styles + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `scripts/check-data.mjs` + +- [ ] **Step 1: Raise tuned style target** + +In `scripts/check-data.mjs`, replace: + +```js +assert(tunedStyleTokenSlugs.length >= 24, `expected at least 24 tuned style token overrides, got ${tunedStyleTokenSlugs.length}`); +``` + +with: + +```js +assert(tunedStyleTokenSlugs.length === designStyles.length, `expected all ${designStyles.length} styles to have tuned token overrides, got ${tunedStyleTokenSlugs.length}`); +``` + +- [ ] **Step 2: Add override completeness checks** + +In `scripts/check-data.mjs`, add: + +```js +for (const s of designStyles) { + assert(tunedStyleTokenSlugs.includes(s.slug), `style ${s.slug} missing explicit token override`); + assert(typeof s.tokens.decoration.effect === "string", `style ${s.slug} missing decoration effect`); + assert(["left", "center", "split"].includes(s.tokens.layout.heroVariant), `style ${s.slug} bad heroVariant`); + assert(["minimal", "boxed", "underline"].includes(s.tokens.layout.navStyle), `style ${s.slug} bad navStyle`); +} +``` + +- [ ] **Step 3: Add non-color overrides for all styles** + +For every slug in `styleSeedTuples`, add `styleTokenOverrides[slug]` that changes at least two of: + +- `typography` +- `shape` +- `space` +- `decoration` +- `layout` + +Token rules: + +- `minimalism`, `swiss-design`, `grid-system`, and `flat-design` must not share the same token signature. +- `luxury`, `old-money`, `classic`, `neoclassical`, `baroque`, `rococo`, and `art-deco` must use distinct type/shape/spacing behaviors. +- `cyberpunk`, `neon-noir`, `rave-style`, `ai-aesthetic`, and `hologram-style` must differ beyond neon color. +- `kawaii`, `pastel-style`, `bubble-design`, `toy-design`, and `claymorphism` must differ in radius, shadow, density, and surface behavior. +- `streetwear`, `graffiti`, `punk`, `grunge`, and `indie-sleaze` must differ in texture/effect and density. + +- [ ] **Step 4: Add token signature duplicate guard** + +In `scripts/check-data.mjs`, add: + +```js +const tokenSignatures = new Map(); +for (const s of designStyles) { + const signature = [ + s.tokens.typography.displayFont, + s.tokens.typography.weightDisplay, + s.tokens.typography.tracking, + s.tokens.typography.headingScale, + s.tokens.shape.radius, + s.tokens.shape.radiusPill, + s.tokens.shape.borderWidth, + s.tokens.shape.borderStyle, + s.tokens.space.density, + s.tokens.space.gap, + s.tokens.space.padScale, + s.tokens.decoration.effect, + s.tokens.layout.heroVariant, + s.tokens.layout.navStyle, + s.tokens.layout.alignment, + ].join("|"); + const existing = tokenSignatures.get(signature) ?? []; + existing.push(s.slug); + tokenSignatures.set(signature, existing); +} + +for (const [signature, slugs] of tokenSignatures) { + assert(slugs.length <= 2, `token signature reused too often: ${slugs.join(", ")}`); +} +``` + +- [ ] **Step 5: Verify** + +Run: + +```powershell +npm run check:data +npm run lint +npm run build +``` + +- [ ] **Step 6: Commit** + +```powershell +git add src/data/designStyles.ts scripts/check-data.mjs +git commit -m "Tune tokens for every design style" +``` + +--- + +## Task 6: Expand Sample Rendering Beyond 10 Generic Types + +**Files:** +- Modify: `src/data/designStyles.ts` +- Modify: `src/components/design-style/DesignStyleSampleRenderer.tsx` + +- [ ] **Step 1: Add sample variants** + +Extend `DesignStyleSampleType` with concrete variants: + +```ts +export type DesignStyleSampleType = + | "minimal-editorial" + | "modernist-grid" + | "swiss-poster-grid" + | "japandi-product" + | "brutalist-poster" + | "anti-design-chaos" + | "maximalist-pattern" + | "glitch-interface" + | "retro-commerce" + | "y2k-browser" + | "bauhaus-composition" + | "cyber-dashboard" + | "neon-noir-terminal" + | "hologram-interface" + | "luxury-product" + | "art-deco-lobby" + | "baroque-editorial" + | "organic-brand" + | "botanical-journal" + | "craft-market" + | "kawaii-app" + | "comic-panel" + | "toy-shelf" + | "street-campaign" + | "graffiti-wall" + | "punk-zine" + | "magazine-layout" + | "newspaper-front" + | "collage-board" + | "saas-landing" + | "material-dashboard" + | "glass-panel-ui" + | "neumorphic-controls" + | "clay-ui"; +``` + +- [ ] **Step 2: Implement variant renderers** + +In `DesignStyleSampleRenderer.tsx`, add one function per new variant. Each function must: + +- Use `SampleFrame`. +- Use `styleTokenVars(style)` through existing `sampleVariables`. +- Render a concrete webpage-like surface, not only abstract boxes. +- Keep text inside bounds at 390px. +- Avoid nested cards inside cards. + +- [ ] **Step 3: Re-map every style to a specific sample variant** + +Update every `styleSeedTuples` entry with the most accurate variant. Examples: + +```ts +["swiss-design", "스위스 디자인", "Swiss Design", "모던 / 미니멀", "스위스 포스터 전통의 엄격한 그리드와 산세리프 질서를 웹 화면에 적용하는 스타일", ["swiss", "grid", "typography"], "swiss-poster-grid"], +["y2k", "Y2K", "Y2K", "레트로 / 빈티지", "2000년대 초 웹의 크롬, 글로스, 버블, 글리터 감각을 현대적으로 재구성하는 스타일", ["y2k", "chrome", "gloss"], "y2k-browser"], +["punk", "펑크", "Punk", "스트리트 / 서브컬처", "찢긴 지면, 거친 복사 질감, 저항적 메시지를 앞세우는 zine 기반 웹 스타일", ["punk", "rebellious", "raw"], "punk-zine"], +``` + +- [ ] **Step 4: Verify visual coverage** + +Run: + +```powershell +npm run lint +npm run build +``` + +Then use Playwright to capture `/styles` and one style detail page per sample type. + +Expected: + +- No sample type is blank. +- No page has horizontal overflow at 390px. +- Neighboring styles in the same category are visually distinguishable. + +- [ ] **Step 5: Commit** + +```powershell +git add src/data/designStyles.ts src/components/design-style/DesignStyleSampleRenderer.tsx +git commit -m "Expand representative design style sample variants" +``` + +--- + +## Task 7: Final Style QA Report + +**Files:** +- Create: `docs/style-research/README.md` +- Create: `docs/style-research/2026-06-04-style-redesign-qa.md` +- Modify: `README.md` +- Modify: `README.ko.md` + +- [ ] **Step 1: Create research README** + +Create `docs/style-research/README.md`: + +```md +# Style Research Workflow + +Style references are stored in `scripts/style-references.json`. + +Reference screenshots are local-only and saved under `public/references/`, which is gitignored because the screenshots can include copyrighted third-party pages. + +## Commands + +```bash +npm run check:style-refs +npm run capture:refs -- --sites-only +npm run check:data +npm run lint +npm run build +``` + +## Quality Rules + +- Each style must have at least 2 real site references and 1 gallery or archive reference. +- Each style must have explicit copy, palette, and token overrides. +- Each style must be visually distinguishable from neighboring styles in the same category. +- Captured screenshots are for local research only and must not be committed. +``` + +- [ ] **Step 2: Create QA report** + +Create `docs/style-research/2026-06-04-style-redesign-qa.md` with: + +```md +# Style Redesign QA + +## Verification Commands + +- [ ] `npm run check:style-refs` +- [ ] `npm run check:data` +- [ ] `npm run lint` +- [ ] `npm run build` + +## Visual QA + +- [ ] `/styles` desktop +- [ ] `/styles` mobile 390px +- [ ] One detail page per category +- [ ] One detail page per sample variant +- [ ] `/studio?style=cyberpunk&layout=dashboard-layout` +- [ ] `/studio?style=luxury&layout=product-demo-layout` +- [ ] `/components` + +## Findings + +Record screenshots and notes here after QA. Keep third-party reference screenshots out of git. +``` + +- [ ] **Step 3: Update README files** + +In `README.md`, add under "Adding a Design Style": + +```md +Before adding or changing a design style, update `scripts/style-references.json` and run `npm run check:style-refs`. Reference screenshots are captured locally with `npm run capture:refs -- --sites-only` and are not committed. +``` + +In `README.ko.md`, add: + +```md +디자인 형식을 추가하거나 수정하기 전에 `scripts/style-references.json`을 먼저 업데이트하고 `npm run check:style-refs`를 실행합니다. 참고 스크린샷은 `npm run capture:refs -- --sites-only`로 로컬에만 저장하며 커밋하지 않습니다. +``` + +- [ ] **Step 4: Verify final gates** + +Run: + +```powershell +npm run check:style-refs +npm run check:data +npm run lint +npm run build +``` + +Expected: + +```text +style reference check passed: 88 styles covered +data check passed: 88 styles, 10 categories +``` + +- [ ] **Step 5: Commit** + +```powershell +git add docs/style-research README.md README.ko.md +git commit -m "Document representative style research workflow" +``` + +--- + +## Progress Log + +- [x] 2026-06-04: User identified that current styles do not yet feel representative enough and asked to find the earlier reference notes. +- [x] 2026-06-04: Found `scripts/style-references.json` as the existing reference memo. It covers 12 styles and is consumed by `scripts/capture-references.mjs`. +- [x] 2026-06-04: Confirmed current implementation has 88 styles, 24 tuned token overrides, 12 reference-backed styles, 64 mostly untuned styles, and 76 styles without reference entries. From 1a164bd0e12866089a9bca247f48499d8408b895 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 15:57:57 +0900 Subject: [PATCH 03/14] Require platform references for style redesign --- ...026-06-04-representative-style-redesign.md | 103 ++++++++++++------ 1 file changed, 72 insertions(+), 31 deletions(-) diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index 3d1df94..e7304a3 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -4,7 +4,7 @@ **Goal:** Re-author all 88 design styles so each style reads as a representative design direction, not a category-default palette swap. -**Architecture:** Treat `scripts/style-references.json` as the research source of truth, then turn research into explicit per-style data in `src/data/designStyles.ts`. Every style must have deliberate references, a style brief, a unique palette, non-color token overrides, a suitable sample variant, and prompt copy that describes the actual visual language. Validation should fail when styles fall back to generated/default-looking data. +**Architecture:** Treat `scripts/style-references.json` as the research source of truth, but do not assume the current entries are enough. Every style requires fresh discovery: real sites or archives plus Pinterest, Awwwards, and Dribbble references that match the specific visual language. Those references then drive explicit per-style data in `src/data/designStyles.ts`: a style brief, a unique palette, non-color token overrides, a suitable sample variant, and prompt copy that describes the actual visual language. Validation should fail when styles fall back to generated/default-looking data or when any required discovery source is missing. **Tech Stack:** Modified Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4, static TypeScript data, Node 22, Playwright for reference capture and visual QA. Before editing framework routes or config, read the relevant guide in `node_modules/next/dist/docs/`. @@ -13,7 +13,7 @@ ## Current Findings - `README.md` is now the English default and links to `README.ko.md`; the branch has been pushed to the draft PR. -- The strongest existing memo for this work is `scripts/style-references.json`. +- The strongest existing memo for this work is `scripts/style-references.json`, but it is only a starting point. - `scripts/style-references.json` currently covers only 12 of 88 styles: - `minimalism` - `brutalism` @@ -28,6 +28,7 @@ - `maximalism` - `swiss-design` - `scripts/capture-references.mjs` captures those references to `public/references/[slug]/`, which is intentionally gitignored for copyright and local-only review. +- Each style still needs additional platform research from Pinterest, Awwwards, and Dribbble. If a platform does not have a perfect direct category page for a style, store the best matching search/results URL and explain the limitation in `note`. - `src/data/designStyles.ts` has 88 styles, but many fields are generated from category profiles. - `styleTokenOverrides` currently covers 24 styles; 64 styles still inherit category defaults for most non-color behavior. - Palettes are explicit for a small subset and hash-assigned from `paletteBank` for the rest. @@ -41,12 +42,15 @@ - Add reference entries for all 88 style slugs. - Keep entries split into `sites` and `galleries`. - Prefer real brand/product/editorial sites in `sites`; keep curation platforms in `galleries`. + - For every style, include Pinterest, Awwwards, and Dribbble entries in `galleries`. + - Use exact style pages when available; otherwise use platform search/result URLs with precise notes. - Modify: `scripts/capture-references.mjs` - Keep screenshots local-only under `public/references/`. - Add a coverage summary that reports missing slugs before capture starts. - Create: `scripts/check-style-references.mjs` - Validate all 88 style slugs have references. - - Validate each referenced style has at least 2 `sites` and 1 `galleries` entry. + - Validate each referenced style has at least 2 `sites` and at least 3 `galleries` entries. + - Validate each style has Pinterest, Awwwards, and Dribbble coverage in `galleries`. - Validate each reference item has `url`, `title`, and `note`. ### Style Data Files @@ -229,7 +233,10 @@ type StyleResearchBrief = { Every style must satisfy: - `referenceSites.length >= 2` -- `referenceGalleries.length >= 1` +- `referenceGalleries.length >= 3` +- `referenceGalleries` includes at least one Pinterest URL +- `referenceGalleries` includes at least one Awwwards URL +- `referenceGalleries` includes at least one Dribbble URL - `representativeTraits.length >= 4` - `avoidTraits.length >= 2` - `tokenIntent.length >= 40` @@ -271,12 +278,20 @@ for (const style of designStyles) { assert(entry, `missing references for ${style.slug}`); if (!entry) continue; + const sites = entry.sites ?? []; + const galleries = entry.galleries ?? []; + assert(Array.isArray(entry.sites), `references.${style.slug}.sites must be an array`); assert(Array.isArray(entry.galleries), `references.${style.slug}.galleries must be an array`); - assert((entry.sites ?? []).length >= 2, `${style.slug} needs at least 2 real site references`); - assert((entry.galleries ?? []).length >= 1, `${style.slug} needs at least 1 gallery reference`); + assert(sites.length >= 2, `${style.slug} needs at least 2 real site references`); + assert(galleries.length >= 3, `${style.slug} needs Pinterest, Awwwards, and Dribbble references`); + + const galleryUrls = galleries.map((item) => item.url); + assert(galleryUrls.some((url) => url.includes("pinterest.")), `${style.slug} missing Pinterest reference`); + assert(galleryUrls.some((url) => url.includes("awwwards.")), `${style.slug} missing Awwwards reference`); + assert(galleryUrls.some((url) => url.includes("dribbble.")), `${style.slug} missing Dribbble reference`); - for (const [groupName, items] of [["sites", entry.sites ?? []], ["galleries", entry.galleries ?? []]]) { + for (const [groupName, items] of [["sites", sites], ["galleries", galleries]]) { for (const item of items) { assert(typeof item.url === "string" && item.url.startsWith("https://"), `${style.slug}.${groupName} has bad url`); assert(typeof item.title === "string" && item.title.length > 0, `${style.slug}.${groupName} missing title`); @@ -345,23 +360,47 @@ git commit -m "Add style reference coverage validation" --- -## Task 2: Expand `style-references.json` To All 88 Styles +## Task 2: Discover Pinterest, Awwwards, And Dribbble References For Every Style **Files:** - Modify: `scripts/style-references.json` -- [ ] **Step 1: Add missing reference entries by category** +- [ ] **Step 1: Use a fixed search pattern per style** + +For each style slug, search and review all of these source patterns: + +```text +Pinterest: {style.nameEn} website design inspiration pinterest +Awwwards: {style.nameEn} website design awwwards +Dribbble: {style.nameEn} website design dribbble +Real sites: {style.nameEn} brand website examples +Archive or guide: {style.nameEn} web design style guide +``` + +Examples: + +```text +Pinterest: swiss design website design inspiration pinterest +Awwwards: swiss design website design awwwards +Dribbble: swiss design website design dribbble +Real sites: swiss design brand website examples +Archive or guide: swiss design web design style guide +``` + +- [ ] **Step 2: Add missing reference entries by category** -Add entries for every slug listed in the Style Inventory. Each entry must follow this shape: +Add entries for every slug listed in the Style Inventory. Use this as a concrete entry shape, then replace the style and references with researched matches for each slug: ```json -"style-slug": { +"minimalism": { "sites": [ - { "url": "https://example.com", "title": "Example", "note": "Why this real site represents the style and which tokens it informs" }, - { "url": "https://example.org", "title": "Example 2", "note": "Second real product, brand, archive, or editorial reference" } + { "url": "https://linear.app", "title": "Linear", "note": "Restrained typography, quiet surfaces, compact spacing, and product-focused hierarchy inform the minimalism tokens." }, + { "url": "https://www.apple.com", "title": "Apple", "note": "Large negative space, disciplined image scale, precise type rhythm, and low-noise navigation inform the layout and copy density." } ], "galleries": [ - { "url": "https://example.net", "title": "Gallery", "note": "Curation source used for broader visual vocabulary" } + { "url": "https://www.pinterest.com/search/pins/?q=minimalist%20website%20design", "title": "Pinterest - Minimalist Website Design", "note": "Moodboard reference for restrained layouts, neutral palettes, whitespace, and understated composition patterns." }, + { "url": "https://www.awwwards.com/websites/minimalism/", "title": "Awwwards - Minimalism Websites", "note": "High-quality web execution reference for minimal interactions, typography, layout proportion, and detail restraint." }, + { "url": "https://dribbble.com/search/minimalist-website", "title": "Dribbble - Minimalist Website", "note": "UI reference for minimal cards, controls, type scale, and component-level visual vocabulary." } ] } ``` @@ -370,11 +409,11 @@ Rules: - Use real sites for `sites` when possible. - Use museum/archive pages for historical styles when active brand sites are misleading. -- Use galleries only as secondary evidence. +- Use Pinterest, Awwwards, and Dribbble for every style, even when the best link is a search/result page rather than a curated category page. - Avoid adding references whose visual language is merely adjacent. - Keep notes specific: mention typography, spacing, shape, color, texture, grid, motion, or density. -- [ ] **Step 2: Verify reference coverage** +- [ ] **Step 3: Verify reference coverage** Run: @@ -388,7 +427,7 @@ Expected: style reference check passed: 88 styles covered ``` -- [ ] **Step 3: Capture selected references locally** +- [ ] **Step 4: Capture selected references locally** Run a sites-only capture first: @@ -406,11 +445,11 @@ Failed: 0 If some live sites block capture, keep the URL in `style-references.json`, add a precise note, and capture the remaining references. Do not commit `public/references/`. -- [ ] **Step 4: Commit** +- [ ] **Step 5: Commit** ```powershell git add scripts/style-references.json -git commit -m "Expand design style reference coverage" +git commit -m "Expand platform reference coverage for all design styles" ``` --- @@ -580,19 +619,19 @@ for (const [slug] of styleSeedTuples) { - [ ] **Step 3: Add explicit palettes for all missing slugs** -For every style slug, add a 9-color palette: +For every style slug, add a researched 9-color palette. This is a concrete shape example: ```ts -"style-slug": { - base: "#000000", - surface: "#111111", - text: "#FFFFFF", - mutedText: "#999999", - primary: "#FFFFFF", - accent: "#FF0000", - accent2: "#00FF00", - accent3: "#0000FF", - border: "#FFFFFF", +"minimalism": { + base: "#F7F6F2", + surface: "#FFFFFF", + text: "#171717", + mutedText: "#6F6B63", + primary: "#111111", + accent: "#B9ADA0", + accent2: "#D9D2C7", + accent3: "#8B908A", + border: "#E5E0D8", }, ``` @@ -878,7 +917,8 @@ npm run build ## Quality Rules -- Each style must have at least 2 real site references and 1 gallery or archive reference. +- Each style must have at least 2 real site or archive references. +- Each style must include Pinterest, Awwwards, and Dribbble references. - Each style must have explicit copy, palette, and token overrides. - Each style must be visually distinguishable from neighboring styles in the same category. - Captured screenshots are for local research only and must not be committed. @@ -959,3 +999,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: User identified that current styles do not yet feel representative enough and asked to find the earlier reference notes. - [x] 2026-06-04: Found `scripts/style-references.json` as the existing reference memo. It covers 12 styles and is consumed by `scripts/capture-references.mjs`. - [x] 2026-06-04: Confirmed current implementation has 88 styles, 24 tuned token overrides, 12 reference-backed styles, 64 mostly untuned styles, and 76 styles without reference entries. +- [x] 2026-06-04: User clarified that reference work must include additional matching sources for each style, specifically Pinterest, Awwwards, and Dribbble, not only existing real-site references. From e8126203a2be4c446cac8953b69309f04f0b2f46 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 16:18:51 +0900 Subject: [PATCH 04/14] Redesign minimalism style from references --- ...026-06-04-representative-style-redesign.md | 17 +-- package.json | 1 + scripts/capture-references.mjs | 21 +++ scripts/check-style-references.mjs | 61 +++++++++ scripts/style-references.json | 11 +- .../DesignStyleSampleRenderer.tsx | 75 +++++++++++ src/data/designStyles.ts | 125 ++++++++++++++++-- 7 files changed, 288 insertions(+), 23 deletions(-) create mode 100644 scripts/check-style-references.mjs diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index e7304a3..230f7f7 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -92,7 +92,7 @@ Each style below must end with explicit references, explicit copy, explicit pale ### 모던 / 미니멀 -- [ ] `minimalism` +- [x] `minimalism` - [ ] `modernism` - [ ] `swiss-design` - [ ] `international-style` @@ -140,7 +140,7 @@ Each style below must end with explicit references, explicit copy, explicit pale ### 럭셔리 / 클래식 - [ ] `classic` -- [ ] `neoclassical` +- [ ] `neoclassic` - [ ] `luxury` - [ ] `old-money` - [ ] `art-deco` @@ -253,7 +253,7 @@ Every style must satisfy: - Modify: `package.json` - Modify: `scripts/capture-references.mjs` -- [ ] **Step 1: Create reference check script** +- [x] **Step 1: Create reference check script** Create `scripts/check-style-references.mjs`: @@ -308,7 +308,7 @@ if (errors.length) { console.log(`style reference check passed: ${designStyles.length} styles covered`); ``` -- [ ] **Step 2: Add npm script** +- [x] **Step 2: Add npm script** In `package.json`, add: @@ -316,7 +316,7 @@ In `package.json`, add: "check:style-refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-style-references.mjs" ``` -- [ ] **Step 3: Add capture preflight summary** +- [x] **Step 3: Add capture preflight summary** In `scripts/capture-references.mjs`, import `designStyles`: @@ -336,7 +336,7 @@ if (missingReferenceSlugs.length > 0) { } ``` -- [ ] **Step 4: Verify failure before adding all references** +- [x] **Step 4: Verify failure before adding all references** Run: @@ -351,7 +351,7 @@ STYLE REFERENCE CHECK FAILED: missing references for international-style ``` -- [ ] **Step 5: Commit** +- [x] **Step 5: Commit** ```powershell git add package.json scripts/check-style-references.mjs scripts/capture-references.mjs @@ -734,7 +734,7 @@ For every slug in `styleSeedTuples`, add `styleTokenOverrides[slug]` that change Token rules: - `minimalism`, `swiss-design`, `grid-system`, and `flat-design` must not share the same token signature. -- `luxury`, `old-money`, `classic`, `neoclassical`, `baroque`, `rococo`, and `art-deco` must use distinct type/shape/spacing behaviors. +- `luxury`, `old-money`, `classic`, `neoclassic`, `baroque`, `rococo`, and `art-deco` must use distinct type/shape/spacing behaviors. - `cyberpunk`, `neon-noir`, `rave-style`, `ai-aesthetic`, and `hologram-style` must differ beyond neon color. - `kawaii`, `pastel-style`, `bubble-design`, `toy-design`, and `claymorphism` must differ in radius, shadow, density, and surface behavior. - `streetwear`, `graffiti`, `punk`, `grunge`, and `indie-sleaze` must differ in texture/effect and density. @@ -1000,3 +1000,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: Found `scripts/style-references.json` as the existing reference memo. It covers 12 styles and is consumed by `scripts/capture-references.mjs`. - [x] 2026-06-04: Confirmed current implementation has 88 styles, 24 tuned token overrides, 12 reference-backed styles, 64 mostly untuned styles, and 76 styles without reference entries. - [x] 2026-06-04: User clarified that reference work must include additional matching sources for each style, specifically Pinterest, Awwwards, and Dribbble, not only existing real-site references. +- [x] 2026-06-04: Completed the first per-style pass for `minimalism`: refreshed Linear, Apple, Stripe, Pinterest, Awwwards, and Dribbble references; added targeted reference validation; rewrote copy, palette, tokens, research brief, and a dedicated sample renderer; verified desktop and mobile renders with Playwright. diff --git a/package.json b/package.json index b6a638e..65352b2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "start": "next start", "lint": "eslint", "check:data": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-data.mjs", + "check:style-refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/check-style-references.mjs", "capture:refs": "node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/capture-references.mjs" }, "engines": { diff --git a/scripts/capture-references.mjs b/scripts/capture-references.mjs index 3e5726c..6926047 100644 --- a/scripts/capture-references.mjs +++ b/scripts/capture-references.mjs @@ -20,6 +20,7 @@ import { mkdir, writeFile } from "node:fs/promises"; import { existsSync } from "node:fs"; import { join, dirname } from "node:path"; import { fileURLToPath } from "node:url"; +import { designStyles } from "../src/data/designStyles.ts"; import references from "./style-references.json" with { type: "json" }; const __dirname = dirname(fileURLToPath(import.meta.url)); @@ -34,6 +35,24 @@ const slugsToCapture = targetSlugs.length > 0 ? targetSlugs : Object.keys(references).filter((k) => !k.startsWith("_")); +const allStyleSlugs = designStyles.map((style) => style.slug); +const knownStyleSlugs = new Set(allStyleSlugs); + +function printCoverageSummary() { + const referenceSlugs = Object.keys(references).filter((key) => !key.startsWith("_")); + const referenceSlugSet = new Set(referenceSlugs); + const missingSlugs = allStyleSlugs.filter((slug) => !referenceSlugSet.has(slug)); + const unknownSlugs = referenceSlugs.filter((slug) => !knownStyleSlugs.has(slug)); + + console.log(` Reference coverage: ${referenceSlugs.length}/${allStyleSlugs.length} styles`); + if (missingSlugs.length > 0) { + console.log(` Missing style references: ${missingSlugs.join(", ")}`); + } + if (unknownSlugs.length > 0) { + console.log(` Unknown reference slugs: ${unknownSlugs.join(", ")}`); + } +} + const VIEWPORT = { width: 1440, height: 900 }; const TIMEOUT = 20_000; @@ -90,6 +109,8 @@ async function capture() { console.log(`\n📸 Capturing reference screenshots`); console.log(` Styles: ${slugsToCapture.join(", ")}`); console.log(` Mode: ${sitesOnly ? "sites only" : "sites + galleries"}\n`); + printCoverageSummary(); + console.log(""); const browser = await chromium.launch({ headless: true }); const context = await browser.newContext({ viewport: VIEWPORT }); diff --git a/scripts/check-style-references.mjs b/scripts/check-style-references.mjs new file mode 100644 index 0000000..f6fb8c3 --- /dev/null +++ b/scripts/check-style-references.mjs @@ -0,0 +1,61 @@ +// scripts/check-style-references.mjs +import { designStyles } from "../src/data/designStyles.ts"; +import references from "./style-references.json" with { type: "json" }; + +const args = process.argv.slice(2).filter((arg) => !arg.startsWith("--")); +const allSlugs = designStyles.map((style) => style.slug); +const knownSlugs = new Set(allSlugs); +const slugsToCheck = args.length > 0 ? args : allSlugs; +const errors = []; + +function assert(condition, message) { + if (!condition) errors.push(message); +} + +function itemLabel(slug, groupName, index) { + return `${slug}.${groupName}[${index}]`; +} + +for (const slug of args) { + assert(knownSlugs.has(slug), `unknown style slug requested: ${slug}`); +} + +for (const key of Object.keys(references)) { + if (key.startsWith("_")) continue; + assert(knownSlugs.has(key), `reference entry has unknown style slug: ${key}`); +} + +for (const slug of slugsToCheck) { + const entry = references[slug]; + assert(entry, `missing references for ${slug}`); + if (!entry) continue; + + const sites = entry.sites ?? []; + const galleries = entry.galleries ?? []; + + assert(Array.isArray(entry.sites), `references.${slug}.sites must be an array`); + assert(Array.isArray(entry.galleries), `references.${slug}.galleries must be an array`); + assert(sites.length >= 2, `${slug} needs at least 2 real site or archive references`); + assert(galleries.length >= 3, `${slug} needs Pinterest, Awwwards, and Dribbble references`); + + const galleryUrls = galleries.map((item) => item.url); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("pinterest.")), `${slug} missing Pinterest reference`); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("awwwards.")), `${slug} missing Awwwards reference`); + assert(galleryUrls.some((url) => typeof url === "string" && url.includes("dribbble.")), `${slug} missing Dribbble reference`); + + for (const [groupName, items] of [["sites", sites], ["galleries", galleries]]) { + for (const [index, item] of items.entries()) { + const label = itemLabel(slug, groupName, index); + assert(typeof item.url === "string" && item.url.startsWith("https://"), `${label} has bad url`); + assert(typeof item.title === "string" && item.title.trim().length > 0, `${label} missing title`); + assert(typeof item.note === "string" && item.note.trim().length >= 24, `${label} needs a specific note`); + } + } +} + +if (errors.length) { + console.error("STYLE REFERENCE CHECK FAILED:\n" + errors.join("\n")); + process.exit(1); +} + +console.log(`style reference check passed: ${slugsToCheck.length} styles covered`); diff --git a/scripts/style-references.json b/scripts/style-references.json index 4132203..21f5629 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -3,13 +3,14 @@ "minimalism": { "sites": [ - { "url": "https://linear.app", "title": "Linear", "note": "타이포, 넓은 여백, 모노크롬 — 현대 SaaS 미니멀의 교과서" }, - { "url": "https://stripe.com", "title": "Stripe", "note": "여백·그리드·타이포 비율이 매우 정교한 미니멀 B2B" }, - { "url": "https://www.muji.com", "title": "Muji", "note": "일본식 절제 미니멀, 오프화이트 배경 + 로우 채도" } + { "url": "https://linear.app", "title": "Linear", "note": "Muted palette, spacious layout, sharp typography, and restrained product surfaces define modern SaaS minimalism." }, + { "url": "https://www.apple.com", "title": "Apple", "note": "Generous white space, product-first composition, neutral color, and very low visual noise anchor premium minimalism." }, + { "url": "https://stripe.com", "title": "Stripe", "note": "Precise grid rhythm, restrained copy density, thin dividers, and controlled accent use show minimalism for complex B2B content." } ], "galleries": [ - { "url": "https://www.awwwards.com/websites/minimal/", "title": "Awwwards — Minimal", "note": "수상작 모음 — 타이포/여백 토큰 참고용" }, - { "url": "https://dribbble.com/tags/minimalist-web-design", "title": "Dribbble — Minimalist Web Design" } + { "url": "https://www.pinterest.com/web_design_mini_blog/web-design-inspiration-minimalist/", "title": "Pinterest - Web Design Inspiration Minimalist", "note": "Moodboard reference for white space, neutral palettes, thin rules, sparse product imagery, and quiet composition patterns." }, + { "url": "https://www.awwwards.com/websites/minimalist-websites/", "title": "Awwwards - Minimalist Websites", "note": "Award-gallery reference for high-quality minimal web execution, interaction restraint, layout proportion, and typographic detail." }, + { "url": "https://dribbble.com/tags/minimalist-website", "title": "Dribbble - Minimalist Website", "note": "UI reference for minimal cards, interface hierarchy, button restraint, muted surfaces, and component-level visual vocabulary." } ] }, diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 675cbeb..42ea7f8 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -114,6 +114,77 @@ function MinimalEditorial({ compact = false, style }: Props) { ); } +function MinimalismProductSystem({ className, compact = false, style }: Props) { + return ( + +
+
+
+

Index

+

01 / {style.nameEn}

+
+
+ Work + System + +
+
+ +
+
+
+

{style.category}

+

+ {style.nameEn} +

+
+

+ {style.summary} +

+
+ +
+
+
+ Overview + Quiet state +
+
+
+
+ + + +
+ +
+
+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+
+
+
+ {["Whitespace", "Thin rules", "Low noise"].map((item) => ( + + {item} + + ))} +
+
+
+
+ + ); +} + function BrutalistPoster({ compact = false, style }: Props) { return ( @@ -383,6 +454,10 @@ function SaasLanding({ compact = false, style }: Props) { export function DesignStyleSampleRenderer({ compact = false, style, className }: Props) { const props = { className, compact, style }; + if (style.slug === "minimalism") { + return ; + } + switch (style.sampleType) { case "brutalist-poster": return ; diff --git a/src/data/designStyles.ts b/src/data/designStyles.ts index a785e09..5877cec 100644 --- a/src/data/designStyles.ts +++ b/src/data/designStyles.ts @@ -60,6 +60,20 @@ export type StyleTokens = { }; }; +export type StyleReferenceSource = { + title: string; + url: string; + note: string; +}; + +export type StyleResearchBrief = { + referenceSites: StyleReferenceSource[]; + referenceGalleries: StyleReferenceSource[]; + representativeTraits: string[]; + avoidTraits: string[]; + tokenIntent: string; +}; + export type DesignStyle = { slug: string; nameKo: string; @@ -78,6 +92,7 @@ export type DesignStyle = { related: string[]; palette: DesignStylePalette; imagePrompt: string; + research?: StyleResearchBrief; sampleType: DesignStyleSampleType; tokens: StyleTokens; }; @@ -114,6 +129,21 @@ type DesignStyleSeedTuple = [ sampleType: DesignStyleSampleType, ]; +type StyleContentOverride = Partial>; + const promptSuffix = "clean composition, high-quality design reference image, no logo, no watermark, suitable for a design encyclopedia card"; @@ -305,15 +335,15 @@ const categoryTokenDefaults: Record = { const palettes: Record = { minimalism: { - base: "#F4F1EA", + base: "#F7F7F4", surface: "#FFFFFF", - text: "#202020", - mutedText: "#6C675F", - primary: "#202020", - accent: "#A87854", - accent2: "#D8C7AA", - accent3: "#9DB0A5", - border: "#302B25", + text: "#151515", + mutedText: "#72716C", + primary: "#151515", + accent: "#8E9AAF", + accent2: "#E1DDD4", + accent3: "#C9D2C5", + border: "#D8D5CD", }, brutalism: { base: "#E4E2DD", @@ -561,6 +591,72 @@ const styleSeeds: DesignStyleSeed[] = styleSeedTuples.map(([slug, nameKo, nameEn tone, })); +const styleContentOverrides: Record = { + minimalism: { + summary: "미니멀리즘은 장식을 덜어내고 여백, 얇은 선, 정밀한 타이포 위계로 제품과 메시지를 선명하게 보이게 하는 디자인입니다.", + description: + "미니멀리즘은 화면을 비우는 스타일이 아니라 필요한 정보만 남겨 사용자가 곧바로 구조를 읽게 만드는 방식입니다. Linear의 조용한 제품 표면, Apple의 제품 중심 여백, Stripe의 정밀한 그리드처럼 낮은 채도의 배경과 얇은 구분선, 짧은 문장, 정확한 타이포 비례를 사용합니다. 강한 장식이나 과한 그림자 대신 간격, 정렬, 대비가 브랜드의 신뢰감을 만듭니다.", + visualFeatures: [ + "넓은 빈 공간과 낮은 채도 표면으로 핵심 콘텐츠 주변의 시각 소음을 줄입니다.", + "검정에 가까운 본문색, 부드러운 회색 보조 텍스트, 얇은 경계선으로 구조를 만듭니다.", + "이미지나 제품 프레임은 크게 쓰되 주변 장식은 최소화해 초점을 분명히 합니다.", + "색은 CTA나 상태 표시처럼 필요한 순간에만 작은 면적으로 사용합니다.", + ], + colorPalette: [ + "오프화이트 배경과 순백 표면을 기본으로 사용해 조용한 계층을 만듭니다.", + "텍스트는 거의 검정에 가까운 중성색으로 고정해 가독성을 확보합니다.", + "보조색은 푸른 회색, 따뜻한 회색, 세이지 계열처럼 낮은 채도로 제한합니다.", + "경계선은 본문색보다 훨씬 약하게 두어 선은 보이지만 화면이 무거워지지 않게 합니다.", + ], + typography: [ + "중립적인 산세리프를 사용하고 제목도 과도하게 압축하거나 장식하지 않습니다.", + "제목, 메타, 본문 사이의 크기 차이는 분명하지만 자간은 0에 가깝게 유지합니다.", + "짧은 문장과 넉넉한 행간으로 사용자가 빠르게 훑을 수 있게 합니다.", + ], + layoutTraits: [ + "좌측 정렬과 넓은 내부 여백으로 읽는 순서를 단순하게 만듭니다.", + "얇은 분할선, 작은 메타 라벨, 명확한 콘텐츠 블록으로 정보 구조를 표현합니다.", + "카드나 패널은 평평하게 두고 그림자 대신 간격과 경계선으로 구분합니다.", + "CTA는 한두 개만 남기고 주변 텍스트와 충분히 떨어뜨립니다.", + ], + useCases: ["SaaS 랜딩", "제품 소개", "프리미엄 포트폴리오", "문서형 서비스"], + goodFor: ["복잡한 제품을 선명하게 설명해야 하는 B2B 서비스", "사진이나 제품 자체가 주인공인 브랜드", "신뢰와 정밀함이 중요한 도구형 웹앱", "불필요한 마케팅 장식을 줄이고 싶은 랜딩페이지"], + cautions: [ + "요소를 줄이는 것만으로는 대표성이 생기지 않으므로 간격, 선, 타이포 비례를 끝까지 조정해야 합니다.", + "색을 너무 없애면 상태와 행동이 약해지므로 CTA와 현재 위치에는 작은 강조색을 남겨야 합니다.", + "모바일에서는 넓은 여백이 정보 부족처럼 보이지 않도록 첫 화면의 메시지 밀도를 확인해야 합니다.", + ], + imagePrompt: + "A calm minimal web design reference image with generous white space, precise sans-serif typography, thin dividers, neutral off-white surfaces, one restrained cool gray accent, product-first composition, no decorative clutter, no logo, no watermark", + research: { + referenceSites: [ + { title: "Linear", url: "https://linear.app", note: "Muted palette, spacious layout, sharp typography, and restrained product surfaces define modern SaaS minimalism." }, + { title: "Apple", url: "https://www.apple.com", note: "Generous white space, product-first composition, neutral color, and very low visual noise anchor premium minimalism." }, + { title: "Stripe", url: "https://stripe.com", note: "Precise grid rhythm, restrained copy density, thin dividers, and controlled accent use show minimalism for complex B2B content." }, + ], + referenceGalleries: [ + { title: "Pinterest - Web Design Inspiration Minimalist", url: "https://www.pinterest.com/web_design_mini_blog/web-design-inspiration-minimalist/", note: "Moodboard reference for white space, neutral palettes, thin rules, sparse product imagery, and quiet composition patterns." }, + { title: "Awwwards - Minimalist Websites", url: "https://www.awwwards.com/websites/minimalist-websites/", note: "Award-gallery reference for high-quality minimal web execution, interaction restraint, layout proportion, and typographic detail." }, + { title: "Dribbble - Minimalist Website", url: "https://dribbble.com/tags/minimalist-website", note: "UI reference for minimal cards, interface hierarchy, button restraint, muted surfaces, and component-level visual vocabulary." }, + ], + representativeTraits: [ + "Generous negative space", + "Neutral, low-saturation surfaces", + "Sharp sans-serif hierarchy", + "Thin structural dividers", + "Product-first composition", + ], + avoidTraits: [ + "Decorative gradients used as the main identity", + "Heavy shadows or raised cards", + "Overly warm Japandi color treatment", + ], + tokenIntent: + "Use flat off-white surfaces, near-black text, soft dividers, no shadow, nearly zero tracking, airy spacing, and a small cool gray accent so the style reads as precise web minimalism rather than warm lifestyle minimalism.", + }, + }, +}; + function hashSlug(slug: string) { return slug.split("").reduce((hash, char) => hash + char.charCodeAt(0), 0); } @@ -570,8 +666,11 @@ type DeepPartial = { [K in keyof T]?: T[K] extends object ? DeepPartial const styleTokenOverrides: Record>> = { // Representative styles — more will be added in Task 5 "minimalism": { - shape: { radius: "0px", borderWidth: "1px" }, + typography: { weightDisplay: 500, weightBody: 400, tracking: "0em", headingScale: 0.96 }, + shape: { radius: "2px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "1.5rem", padScale: 1.45 }, decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "left", navStyle: "minimal", alignment: "left" }, }, "modernism": { typography: { weightDisplay: 700, tracking: "-0.03em", headingScale: 1.08 }, @@ -748,8 +847,9 @@ function buildStyle(seed: DesignStyleSeed, index: number): DesignStyle { }; const mergedNonColor = mergeTokens(baseTokens, styleTokenOverrides[seed.slug]); const tokens: StyleTokens = { ...mergedNonColor, color: colorTokens }; + const contentOverride = styleContentOverrides[seed.slug]; - return { + const generatedStyle: DesignStyle = { slug: seed.slug, nameKo: seed.nameKo, nameEn: seed.nameEn, @@ -793,6 +893,11 @@ function buildStyle(seed: DesignStyleSeed, index: number): DesignStyle { sampleType: seed.sampleType ?? profile.sampleType, tokens, }; + + return { + ...generatedStyle, + ...contentOverride, + }; } export const defaultDesignStyleSlug = "brutalism"; From 357832bacb5f330cdec922ea7f990284cf1d02b2 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 18:34:27 +0900 Subject: [PATCH 05/14] Make minimalism sample more web-like --- .../DesignStyleSampleRenderer.tsx | 105 ++++++++++++------ 1 file changed, 70 insertions(+), 35 deletions(-) diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 42ea7f8..a5212cc 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -115,69 +115,104 @@ function MinimalEditorial({ compact = false, style }: Props) { } function MinimalismProductSystem({ className, compact = false, style }: Props) { + const metrics = [ + ["MRR", "$48.2k", "+8%"], + ["Active", "1,284", "94%"], + ["Tasks", "32", "12 due"], + ]; + const workItems = [ + ["Launch page", "Ready"], + ["Billing flow", "Review"], + ["Docs update", "Live"], + ]; + return (
-
-

Index

-

01 / {style.nameEn}

+
+ +
+

Northstar

+

Product workspace

+
- Work - System + Overview + Projects + Billing
-
+
-

{style.category}

+

Design system / {style.nameEn}

- {style.nameEn} + Calm product pages for focused teams.

-

+

{style.summary}

+
+ + Start project + + + View docs + +
-
+
-
- Overview - Quiet state +
+
+

Workspace overview

+

June release

+
+ On track
-
-
-
- - - + +
+ {metrics.map(([label, value, meta]) => ( +
+

{label}

+

{value}

+

{meta}

- -
-
-
-
- {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( - - ))} + ))} +
+ +
+
+
+
+

Progress

+

72%

+
+ +
+
+
+ +
+ {workItems.map(([label, status]) => ( +
+ {label} + {status} +
+ ))} +
-
- {["Whitespace", "Thin rules", "Low noise"].map((item) => ( - - {item} - - ))} -
From e8b7d051fae28d2addb268b7a6828fcfb9ce45d7 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 18:43:01 +0900 Subject: [PATCH 06/14] Redesign modernism style from references --- ...026-06-04-representative-style-redesign.md | 3 +- scripts/style-references.json | 14 +++ .../DesignStyleSampleRenderer.tsx | 101 ++++++++++++++++++ src/data/designStyles.ts | 84 ++++++++++++++- 4 files changed, 197 insertions(+), 5 deletions(-) diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index 230f7f7..b7c6c79 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -93,7 +93,7 @@ Each style below must end with explicit references, explicit copy, explicit pale ### 모던 / 미니멀 - [x] `minimalism` -- [ ] `modernism` +- [x] `modernism` - [ ] `swiss-design` - [ ] `international-style` - [ ] `scandinavian` @@ -1001,3 +1001,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: Confirmed current implementation has 88 styles, 24 tuned token overrides, 12 reference-backed styles, 64 mostly untuned styles, and 76 styles without reference entries. - [x] 2026-06-04: User clarified that reference work must include additional matching sources for each style, specifically Pinterest, Awwwards, and Dribbble, not only existing real-site references. - [x] 2026-06-04: Completed the first per-style pass for `minimalism`: refreshed Linear, Apple, Stripe, Pinterest, Awwwards, and Dribbble references; added targeted reference validation; rewrote copy, palette, tokens, research brief, and a dedicated sample renderer; verified desktop and mobile renders with Playwright. +- [x] 2026-06-04: Completed the second per-style pass for `modernism`: added Bauhaus-Archiv, MoMA, Vitra, AIM, Pinterest, Awwwards, and Dribbble references; separated it from quiet minimalism with functional grid, primary color blocks, black structure, explicit copy, palette, tokens, research brief, and a dedicated web-like sample renderer; verified desktop and mobile renders with Playwright. diff --git a/scripts/style-references.json b/scripts/style-references.json index 21f5629..eabf930 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -14,6 +14,20 @@ ] }, + "modernism": { + "sites": [ + { "url": "https://www.bauhaus.de/en/", "title": "Bauhaus-Archiv / Museum für Gestaltung", "note": "Historical design institution reference for functional typography, modular information, black structure, and modernist graphic discipline." }, + { "url": "https://www.moma.org/", "title": "MoMA", "note": "Museum reference for modernist institutional hierarchy, large type, direct navigation, and rational event/content modules." }, + { "url": "https://www.vitra.com/en-us/home", "title": "Vitra", "note": "Product and furniture reference for modernist object culture, functional categories, clear grids, and disciplined product storytelling." }, + { "url": "https://aim.obys.agency/", "title": "AIM - AI Modernism of Kharkiv", "note": "Contemporary web reference for explicit modernist graphics, strong typography, geometric composition, and structured digital storytelling." } + ], + "galleries": [ + { "url": "https://kr.pinterest.com/pinewatt/modernism/", "title": "Pinterest - Modernism", "note": "Moodboard reference for modernist graphic layouts, geometric marks, primary color accents, asymmetric grids, and poster-like structure." }, + { "url": "https://www.awwwards.com/websites/modern/", "title": "Awwwards - Modern Websites", "note": "Gallery reference for contemporary modern web execution, including architecture, cultural, and modernist-coded digital projects." }, + { "url": "https://dribbble.com/tags/modernist", "title": "Dribbble - Modernist", "note": "UI and graphic reference for modernist interface modules, geometric symbols, strict grids, and high-contrast typography." } + ] + }, + "brutalism": { "sites": [ { "url": "https://www.balenciaga.com", "title": "Balenciaga", "note": "패션 브루탈리즘 — 검정 배경, 굵은 산세리프, 각진 레이아웃" }, diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index a5212cc..ca44ac7 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -220,6 +220,103 @@ function MinimalismProductSystem({ className, compact = false, style }: Props) { ); } +function ModernismFunctionalGrid({ className, compact = false, style }: Props) { + const modules = [ + ["01", "Archive"], + ["02", "Objects"], + ["03", "Program"], + ]; + + return ( + +
+
+
+ M28 +
+
+ Research + Objects + Program +
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+ +
+
+
+

Form follows function

+

+ Function shapes form. +

+
+
+ + +
+
+ +
+
+ {modules.map(([number, label], index) => ( +
+

{number}

+

{label}

+ +
+ ))} +
+ +
+
+
+
+
+ + +
+
+
+ Object index + 1920-1960 +
+
+ +
+ {["Visit", "Collection", "Lecture"].map((label, index) => ( +
+ + {index + 1} + + {label} +
+ ))} +
+
+ +
+

{style.summary}

+ + System + +
+
+
+
+ + ); +} + function BrutalistPoster({ compact = false, style }: Props) { return ( @@ -493,6 +590,10 @@ export function DesignStyleSampleRenderer({ compact = false, style, className }: return ; } + if (style.slug === "modernism") { + return ; + } + switch (style.sampleType) { case "brutalist-poster": return ; diff --git a/src/data/designStyles.ts b/src/data/designStyles.ts index 5877cec..634aa2b 100644 --- a/src/data/designStyles.ts +++ b/src/data/designStyles.ts @@ -345,6 +345,17 @@ const palettes: Record = { accent3: "#C9D2C5", border: "#D8D5CD", }, + modernism: { + base: "#F2EFE6", + surface: "#FFFFFF", + text: "#111111", + mutedText: "#626057", + primary: "#111111", + accent: "#D72F24", + accent2: "#1E5AA8", + accent3: "#E2B51E", + border: "#111111", + }, brutalism: { base: "#E4E2DD", surface: "#F0EEE8", @@ -655,6 +666,70 @@ const styleContentOverrides: Record = { "Use flat off-white surfaces, near-black text, soft dividers, no shadow, nearly zero tracking, airy spacing, and a small cool gray accent so the style reads as precise web minimalism rather than warm lifestyle minimalism.", }, }, + modernism: { + summary: "모더니즘은 기능이 형태를 이끈다는 원칙을 바탕으로 비대칭 그리드, 산세리프 타이포, 원색 기하학으로 정보를 조직하는 디자인입니다.", + description: + "모더니즘은 장식을 줄이는 데서 끝나는 미니멀리즘과 달리, 기능주의적 구조 자체를 화면의 주인공으로 드러냅니다. Bauhaus-Archiv의 역사적 그래픽 언어, MoMA의 기관형 정보 위계, Vitra의 제품 카테고리 구조, AIM의 현대적 모더니스트 웹 표현처럼 강한 그리드와 명확한 모듈, 검정 선, 빨강·파랑·노랑의 제한된 색면을 사용합니다. 웹에서는 히어로, 내비게이션, 콘텐츠 카드가 모두 같은 모듈 체계 안에서 움직이는 느낌이 중요합니다.", + visualFeatures: [ + "비대칭 그리드와 굵은 구조선으로 화면의 질서를 먼저 드러냅니다.", + "빨강, 파랑, 노랑 같은 제한된 원색을 기능적 표식과 기하학 블록에 사용합니다.", + "산세리프 제목과 작은 메타 정보가 포스터처럼 맞물려 정보 위계를 만듭니다.", + "사진이나 제품 영역은 장식 프레임보다 명확한 모듈과 번호 체계 안에 배치합니다.", + ], + colorPalette: [ + "따뜻한 종이색 배경과 흰 표면을 기본으로 두어 역사적 인쇄물 감각을 남깁니다.", + "검정 텍스트와 검정 경계선으로 모듈 구조를 분명하게 만듭니다.", + "빨강은 주요 동작과 방향성을, 파랑은 정보 블록을, 노랑은 보조 강조를 맡깁니다.", + "색면은 넓게 번지기보다 기능이 있는 사각형, 상태, 번호, 배지에 제한합니다.", + ], + typography: [ + "기하학적 산세리프 제목을 큰 크기로 쓰되 정렬과 행간을 엄격하게 통제합니다.", + "메타 라벨, 번호, 분류명은 작고 선명하게 배치해 시스템성을 만듭니다.", + "자간은 약간 타이트하게 두지만 Swiss 스타일처럼 완전히 차갑게 만들지는 않습니다.", + ], + layoutTraits: [ + "12컬럼 느낌의 모듈 그리드와 비대칭 칸 분할을 사용합니다.", + "내비게이션, 히어로, 콘텐츠 카드가 같은 경계선 체계로 연결됩니다.", + "기하학 색면은 배경 장식이 아니라 카드 상태, 섹션 구분, 진행 정보에 붙습니다.", + "여백은 충분히 두되 빈 화면보다 기능적 구성 밀도가 느껴져야 합니다.", + ], + useCases: ["문화기관 웹사이트", "건축/제품 포트폴리오", "디자인 스튜디오", "전시 랜딩"], + goodFor: ["역사적 디자인 문법을 현대 웹에 적용하려는 브랜드", "제품 카테고리와 아카이브를 강한 구조로 보여줘야 하는 사이트", "문화·교육·건축 콘텐츠처럼 정보와 이미지가 함께 중요한 서비스", "미니멀보다 더 그래픽한 첫인상이 필요한 랜딩페이지"], + cautions: [ + "Bauhaus 전용 스타일처럼 보이지 않게 역사적 인용보다 기능적 웹 구조를 우선해야 합니다.", + "원색 블록이 많아지면 장식처럼 보이므로 각 색면에 역할을 부여해야 합니다.", + "Swiss Design과 겹치지 않도록 완전한 중립성보다 실험적 비대칭과 기하학 신호를 남겨야 합니다.", + ], + imagePrompt: + "A modernist web design reference image with asymmetric modular grid, geometric sans-serif typography, black structural lines, restrained red blue yellow blocks, functional navigation, product and archive modules, Bauhaus and New Typography influence, no logo, no watermark", + research: { + referenceSites: [ + { title: "Bauhaus-Archiv / Museum für Gestaltung", url: "https://www.bauhaus.de/en/", note: "Historical design institution reference for functional typography, modular information, black structure, and modernist graphic discipline." }, + { title: "MoMA", url: "https://www.moma.org/", note: "Museum reference for modernist institutional hierarchy, large type, direct navigation, and rational event/content modules." }, + { title: "Vitra", url: "https://www.vitra.com/en-us/home", note: "Product and furniture reference for modernist object culture, functional categories, clear grids, and disciplined product storytelling." }, + { title: "AIM - AI Modernism of Kharkiv", url: "https://aim.obys.agency/", note: "Contemporary web reference for explicit modernist graphics, strong typography, geometric composition, and structured digital storytelling." }, + ], + referenceGalleries: [ + { title: "Pinterest - Modernism", url: "https://kr.pinterest.com/pinewatt/modernism/", note: "Moodboard reference for modernist graphic layouts, geometric marks, primary color accents, asymmetric grids, and poster-like structure." }, + { title: "Awwwards - Modern Websites", url: "https://www.awwwards.com/websites/modern/", note: "Gallery reference for contemporary modern web execution, including architecture, cultural, and modernist-coded digital projects." }, + { title: "Dribbble - Modernist", url: "https://dribbble.com/tags/modernist", note: "UI and graphic reference for modernist interface modules, geometric symbols, strict grids, and high-contrast typography." }, + ], + representativeTraits: [ + "Asymmetric modular grid", + "Functional sans-serif hierarchy", + "Black structural rules", + "Primary geometric color blocks", + "Numbered information modules", + ], + avoidTraits: [ + "Quiet SaaS minimalism", + "Pure Swiss neutrality", + "Decorative retro Bauhaus pastiche", + ], + tokenIntent: + "Use a warm paper base, black text and borders, sharp corners, moderate density, tight geometric typography, and red blue yellow accents so the style reads as functional modernist web structure rather than generic modern minimalism.", + }, + }, }; function hashSlug(slug: string) { @@ -673,10 +748,11 @@ const styleTokenOverrides: Record layout: { heroVariant: "left", navStyle: "minimal", alignment: "left" }, }, "modernism": { - typography: { weightDisplay: 700, tracking: "-0.03em", headingScale: 1.08 }, - shape: { radius: "0px", radiusPill: "0px", borderWidth: "1px" }, - space: { density: "airy", gap: "1.1rem", padScale: 1.25 }, - layout: { heroVariant: "left", navStyle: "underline", alignment: "left" }, + typography: { weightDisplay: 700, weightBody: 500, tracking: "-0.02em", headingScale: 1.12 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.85rem", padScale: 1.05 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "split", navStyle: "underline", alignment: "left" }, }, "warm-minimal": { typography: { weightDisplay: 500, weightBody: 400, tracking: "-0.01em", headingScale: 0.96 }, From 7ea41814d69d3917e7e873a629f5fb692d8c1715 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 19:13:53 +0900 Subject: [PATCH 07/14] Redesign warm minimal style group from references --- ...026-06-04-representative-style-redesign.md | 11 +- scripts/style-references.json | 64 ++++- .../design-style/DesignStyleCard.tsx | 6 +- .../DesignStyleSampleRenderer.tsx | 270 ++++++++++++++++++ src/data/designStyles.ts | 251 +++++++++++++++- 5 files changed, 581 insertions(+), 21 deletions(-) diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index b7c6c79..9c34632 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -94,11 +94,11 @@ Each style below must end with explicit references, explicit copy, explicit pale - [x] `minimalism` - [x] `modernism` -- [ ] `swiss-design` -- [ ] `international-style` -- [ ] `scandinavian` -- [ ] `japandi` -- [ ] `warm-minimal` +- [x] `swiss-design` +- [x] `international-style` +- [x] `scandinavian` +- [x] `japandi` +- [x] `warm-minimal` - [ ] `soft-minimal` - [ ] `high-end-minimal` @@ -1002,3 +1002,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: User clarified that reference work must include additional matching sources for each style, specifically Pinterest, Awwwards, and Dribbble, not only existing real-site references. - [x] 2026-06-04: Completed the first per-style pass for `minimalism`: refreshed Linear, Apple, Stripe, Pinterest, Awwwards, and Dribbble references; added targeted reference validation; rewrote copy, palette, tokens, research brief, and a dedicated sample renderer; verified desktop and mobile renders with Playwright. - [x] 2026-06-04: Completed the second per-style pass for `modernism`: added Bauhaus-Archiv, MoMA, Vitra, AIM, Pinterest, Awwwards, and Dribbble references; separated it from quiet minimalism with functional grid, primary color blocks, black structure, explicit copy, palette, tokens, research brief, and a dedicated web-like sample renderer; verified desktop and mobile renders with Playwright. +- [x] 2026-06-04: Completed the next modern/minimal pass through `warm-minimal`: added Swiss, International, Scandinavian, Japandi, and Warm Minimal references; rewrote copy, palettes, tokens, research briefs, and dedicated web-like sample renderers; fixed mobile card overflow; verified `/styles` plus all five detail pages at desktop and 390px mobile. diff --git a/scripts/style-references.json b/scripts/style-references.json index eabf930..9dd7e83 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -151,14 +151,66 @@ "swiss-design": { "sites": [ - { "url": "https://www.swissinfo.ch", "title": "Swissinfo", "note": "실제 스위스 정보 포털 — 그리드, 인터내셔널 타이포 시스템" }, - { "url": "https://www.sbb.ch", "title": "SBB 스위스 철도", "note": "기능 중심 그리드 — 스위스 공공 디자인 언어" }, - { "url": "https://www.muji.com", "title": "Muji", "note": "스위스 스타일 응용 — 그리드 질서, 산세리프, 오프화이트" } + { "url": "https://www.swissinfo.ch", "title": "SWI swissinfo.ch", "note": "Swiss editorial reference for strict news hierarchy, multilingual content modules, objective typography, and restrained public-service layout." }, + { "url": "https://www.sbb.ch", "title": "SBB", "note": "Swiss transport reference for functional navigation, red system accent, timetable-like structure, and highly legible information design." }, + { "url": "https://webdesignlookbook.webflow.io/", "title": "Web Design Lookbook - Swiss Design", "note": "Style study reference for Swiss grid principles, type-led hierarchy, structured margins, and clarity-first digital layouts." } ], "galleries": [ - { "url": "https://dribbble.com/tags/swiss-grid", "title": "Dribbble — Swiss Grid", "note": "그리드 시스템 + 타이포 구성 참고" }, - { "url": "https://www.pinterest.com/ideas/swiss-design/", "title": "Pinterest — Swiss Design" }, - { "url": "https://docs.mew.design/blog/swiss-design-style/", "title": "Mew Design — Swiss Style Guide" } + { "url": "https://www.pinterest.com/tonyxj/swiss-grids/", "title": "Pinterest - Swiss Grids", "note": "Moodboard reference for poster grids, asymmetric columns, type blocks, red markers, and modular Swiss-style spacing." }, + { "url": "https://www.awwwards.com/websites/Switzerland/", "title": "Awwwards - Switzerland Websites", "note": "Gallery reference for Swiss web executions, local agencies, clean grid systems, and restrained precision in digital interfaces." }, + { "url": "https://dribbble.com/tags/swiss-grid", "title": "Dribbble - Swiss Grid", "note": "UI and poster reference for grid-driven cards, baseline rhythm, numbered layouts, and strict typographic composition." } + ] + }, + + "international-style": { + "sites": [ + { "url": "https://www.ibm.com/design/language/", "title": "IBM Design Language", "note": "Global corporate system reference for neutral typography, repeatable components, modular grids, and international product communication." }, + { "url": "https://www.ibm.com/design/language/layout/overview/", "title": "IBM Design Language - Layout", "note": "Layout reference for precise grid behavior, consistent alignment, engineered hierarchy, and corporate-scale design rules." }, + { "url": "https://www.moma.org/", "title": "MoMA", "note": "Institutional reference for universal information structure, objective navigation, and cross-content modules across art, events, and visits." } + ], + "galleries": [ + { "url": "https://id.pinterest.com/4340m/international-typographic-style/", "title": "Pinterest - International Typographic Style", "note": "Moodboard reference for objective grids, Helvetica-like typography, asymmetric alignment, and universal information hierarchy." }, + { "url": "https://www.awwwards.com/websites/business-corporate/", "title": "Awwwards - Business & Corporate Websites", "note": "Gallery reference for corporate-scale web systems, rational content architecture, neutral tone, and product/institution clarity." }, + { "url": "https://dribbble.com/search/international%20typographic%20style", "title": "Dribbble - International Typographic Style", "note": "UI and graphic reference for typographic systems, neutral components, grid-based presentation, and corporate information modules." } + ] + }, + + "scandinavian": { + "sites": [ + { "url": "https://www.ikea.com", "title": "IKEA", "note": "Mass-market Scandinavian reference for friendly product navigation, bright surfaces, practical room modules, and approachable home commerce." }, + { "url": "https://www.muuto.com", "title": "Muuto", "note": "Contemporary Scandinavian brand reference for soft color, furniture-led storytelling, generous product cards, and warm minimal composition." }, + { "url": "https://www.nordicnest.com/", "title": "Nordic Nest", "note": "Scandinavian commerce reference for lifestyle categories, pale backgrounds, cozy product density, and practical shopping hierarchy." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=scandinavian%20website%20design", "title": "Pinterest - Scandinavian Website Design", "note": "Moodboard/search reference for light interiors, pale wood, home-product layouts, soft neutrals, and cozy-but-ordered web composition." }, + { "url": "https://www.awwwards.com/websites/minimal/", "title": "Awwwards - Minimal Websites", "note": "Closest gallery reference for refined Scandinavian-adjacent minimal web execution, bright layouts, product calm, and restrained interaction." }, + { "url": "https://dribbble.com/tags/scandinavian", "title": "Dribbble - Scandinavian", "note": "UI and brand reference for Nordic furniture cards, soft product palettes, clean ecommerce modules, and lifestyle interface details." } + ] + }, + + "japandi": { + "sites": [ + { "url": "https://www.karimoku-case.com/creators/", "title": "Karimoku Case - Creators", "note": "Japandi reference for Japanese craft plus Scandinavian restraint, natural materials, quiet furniture presentation, and calm editorial spacing." }, + { "url": "https://normcph.com/project/azabu-residence/", "title": "Norm Architects - Azabu Residence", "note": "Project reference for muted palette, tactile materials, wood warmth, and Japanese-Danish spatial calm in a web editorial format." }, + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Concept reference for human-centric restraint, tactility, natural light, and soft-minimal web storytelling that overlaps with Japandi." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=japandi%20website%20design", "title": "Pinterest - Japandi Website Design", "note": "Moodboard/search reference for wood, rice-paper neutrals, interior whitespace, low contrast, and quiet Japanese-Scandinavian layouts." }, + { "url": "https://www.awwwards.com/websites/architecture/", "title": "Awwwards - Architecture Websites", "note": "Closest gallery reference for architectural calm, image-led spaces, restrained motion, and premium interior/architecture web presentation." }, + { "url": "https://dribbble.com/search/japandi", "title": "Dribbble - Japandi", "note": "UI reference for Japandi furniture landings, interior cards, muted e-commerce flows, and calm booking/product layouts." } + ] + }, + + "warm-minimal": { + "sites": [ + { "url": "https://ququstudio.com/en/", "title": "QUQU Design Studio", "note": "Warm minimalist studio reference for cream surfaces, soft interior imagery, quiet navigation, and selected-work portfolio rhythm." }, + { "url": "https://www.vellum.studio/", "title": "Vellum Studio", "note": "Interior studio reference for tranquil warm minimalism, tactile residential imagery, soft brutalist restraint, and calm editorial pacing." }, + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Soft-minimal reference for warm neutrals, tactile material language, slower reading rhythm, and human-centered restraint." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=warm%20minimal%20website%20design", "title": "Pinterest - Warm Minimal Website Design", "note": "Moodboard/search reference for cream, taupe, terracotta, soft shadows, natural texture, and welcoming minimal web layouts." }, + { "url": "https://www.awwwards.com/awwwards/collections/minimal/", "title": "Awwwards - Minimal Collection", "note": "Closest gallery reference for quiet minimal sites, soft portfolio pacing, restrained modules, and polished warm-minimal execution cues." }, + { "url": "https://dribbble.com/search/minimal-page", "title": "Dribbble - Minimal Page", "note": "UI reference for warm minimal product pages, soft conversion modules, spacious hero sections, and gently layered neutral components." } ] } } diff --git a/src/components/design-style/DesignStyleCard.tsx b/src/components/design-style/DesignStyleCard.tsx index 79aa30f..81fd7ff 100644 --- a/src/components/design-style/DesignStyleCard.tsx +++ b/src/components/design-style/DesignStyleCard.tsx @@ -16,16 +16,16 @@ export function DesignStyleCard({ isSelected, onSelect, style }: Props) { return (
-
+
-
+

{style.category} diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index ca44ac7..3590a2d 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -317,6 +317,256 @@ function ModernismFunctionalGrid({ className, compact = false, style }: Props) { ); } +function SwissInformationGrid({ className, compact = false, style }: Props) { + const rows = ["Politics", "Culture", "Economy"]; + + return ( + +

+
+ CH +
+ World + Briefing + Archive +
+ 06.04 +
+
+
+
+

Grid first / Type leads

+

+ Clear public information. +

+
+
+ 01 + Multilingual editorial system +
+
+
+
+ {rows.map((row, index) => ( +
+

0{index + 2}

+

{row}

+
+ ))} +
+
+
+
+ {[84, 64, 92, 52].map((width) => ( + + ))} +
+ + +
+
+
+
+ {style.nameEn} / legibility index +
+
+
+
+ + ); +} + +function InternationalSystemPortal({ className, compact = false, style }: Props) { + const panels = ["Standards", "Grid", "Language"]; + + return ( + +
+
+
+

Global System

+

Design language portal

+
+ Docs +
+
+
+
+

Universal clarity

+

+ One system for every market. +

+
+
+ View guidelines + Use template +
+
+
+
+ {panels.map((panel, index) => ( +
+

0{index + 1}

+

{panel}

+
+ ))} +
+
+ {["Layout grid", "Typography", "Components", "Data states"].map((item, index) => ( +
+ {index + 1} + {item} + Active +
+ ))} +
+
+
+
+ + ); +} + +function ScandinavianCommerceHome({ className, compact = false, style }: Props) { + const products = ["Lounge", "Lighting", "Textiles"]; + + return ( + +
+
+
+

Nord Room

+

Home essentials

+
+ Shop +
+
+
+
+

Spring home edit

+

+ Bright rooms, useful objects. +

+
+
+ New arrivals + Room ideas +
+
+
+ {products.map((product, index) => ( +
+ +
+

{product}

+

From ${[84, 126, 48][index]}

+
+
+ ))} +
+
+
+ + ); +} + +function JapandiSpatialLanding({ className, compact = false, style }: Props) { + return ( + +
+
+ Karuma House + Materials / Stay / Journal +
+
+
+
+

Quiet materials

+

+ Slow rooms for everyday rituals. +

+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+
+
+
+
+
+
+
+

Azabu

+

{style.summary}

+
+
+
+
+
+ + ); +} + +function WarmMinimalStudio({ className, compact = false, style }: Props) { + const works = ["Hallway", "Bedroom", "Dining"]; + + return ( + +
+
+
+

Atelier Warm

+

Interior consultation

+
+ Book +
+
+
+

Selected works

+

+ Soft rooms, clear decisions. +

+

{style.summary}

+
+
+ {works.map((work, index) => ( +
+ + {work} + 0{index + 1} +
+ ))} +
+
+
+ + ); +} + function BrutalistPoster({ compact = false, style }: Props) { return ( @@ -594,6 +844,26 @@ export function DesignStyleSampleRenderer({ compact = false, style, className }: return ; } + if (style.slug === "swiss-design") { + return ; + } + + if (style.slug === "international-style") { + return ; + } + + if (style.slug === "scandinavian") { + return ; + } + + if (style.slug === "japandi") { + return ; + } + + if (style.slug === "warm-minimal") { + return ; + } + switch (style.sampleType) { case "brutalist-poster": return ; diff --git a/src/data/designStyles.ts b/src/data/designStyles.ts index 634aa2b..d8b48d3 100644 --- a/src/data/designStyles.ts +++ b/src/data/designStyles.ts @@ -356,6 +356,61 @@ const palettes: Record = { accent3: "#E2B51E", border: "#111111", }, + "swiss-design": { + base: "#F6F6F2", + surface: "#FFFFFF", + text: "#111111", + mutedText: "#5D5D58", + primary: "#111111", + accent: "#E1261C", + accent2: "#D7D7D2", + accent3: "#6A6F75", + border: "#111111", + }, + "international-style": { + base: "#F5F6F7", + surface: "#FFFFFF", + text: "#16191D", + mutedText: "#68707A", + primary: "#16191D", + accent: "#0F62FE", + accent2: "#DDE3EA", + accent3: "#8D97A5", + border: "#C8D0DA", + }, + scandinavian: { + base: "#F7F3EA", + surface: "#FFFCF5", + text: "#243027", + mutedText: "#727466", + primary: "#243027", + accent: "#9EB7A5", + accent2: "#D9B983", + accent3: "#D86F45", + border: "#D8D2C3", + }, + japandi: { + base: "#EFE8DC", + surface: "#F8F3EA", + text: "#2A2822", + mutedText: "#746B5F", + primary: "#2A2822", + accent: "#8B6F4E", + accent2: "#C7B79D", + accent3: "#6F7A5E", + border: "#B8AA96", + }, + "warm-minimal": { + base: "#F6EFE5", + surface: "#FFF9F0", + text: "#2A211B", + mutedText: "#7A6B5F", + primary: "#2A211B", + accent: "#C87A4A", + accent2: "#E6C8A8", + accent3: "#9A7B5D", + border: "#DED1C1", + }, brutalism: { base: "#E4E2DD", surface: "#F0EEE8", @@ -730,6 +785,166 @@ const styleContentOverrides: Record = { "Use a warm paper base, black text and borders, sharp corners, moderate density, tight geometric typography, and red blue yellow accents so the style reads as functional modernist web structure rather than generic modern minimalism.", }, }, + "swiss-design": { + summary: "스위스 디자인은 엄격한 그리드와 객관적인 산세리프 타이포그래피로 정보를 가장 빠르고 명확하게 읽히게 만드는 디자인입니다.", + description: + "스위스 디자인은 장식보다 질서와 가독성을 우선합니다. SWI swissinfo.ch의 다국어 뉴스 구조, SBB의 공공 교통 정보 체계, Swiss grid 레퍼런스처럼 큰 제목, 작은 번호, 빨간 포인트, 정확한 칼럼 폭이 화면을 지배합니다. 모더니즘보다 색면 장식은 줄이고, 인터내셔널 스타일보다 포스터 같은 타이포 긴장감을 더 강하게 남깁니다.", + visualFeatures: [ + "명확한 칼럼과 기준선으로 콘텐츠의 위치와 크기를 결정합니다.", + "빨간색은 방향, 현재 위치, 핵심 CTA처럼 기능적 신호에만 사용합니다.", + "큰 제목과 작은 메타 정보가 같은 그리드 위에서 강한 대비를 만듭니다.", + "사진, 데이터, 링크가 모두 동일한 모듈 규칙 안에서 정렬됩니다.", + ], + colorPalette: [ + "흰색과 거의 검정에 가까운 텍스트를 기본으로 사용합니다.", + "스위스 레드는 작은 면적이지만 즉시 눈에 띄는 시스템 색으로 둡니다.", + "보조 회색은 선, 캡션, 비활성 영역에만 제한합니다.", + "색보다 위치, 크기, 간격이 위계를 만드는 팔레트입니다.", + ], + typography: ["중립 산세리프를 크게 쓰고 행간과 기준선을 엄격히 맞춥니다.", "번호와 섹션 라벨은 작은 크기로 두되 매우 선명하게 둡니다.", "자간은 과하게 좁히지 않고 정보 판독성을 우선합니다."], + layoutTraits: ["12컬럼에 가까운 포스터식 그리드를 사용합니다.", "비대칭 배치라도 기준선과 마진은 일관되게 유지합니다.", "카드보다 정보 행과 표식이 더 강하게 보입니다.", "모바일에서도 번호, 제목, 링크의 순서를 잃지 않습니다."], + useCases: ["뉴스/매거진", "공공 정보 서비스", "교통/지도 서비스", "디자인 아카이브"], + goodFor: ["많은 정보를 빠르게 훑어야 하는 콘텐츠", "공공성과 신뢰가 중요한 서비스", "타이포그래피가 브랜드 자산인 사이트", "섹션과 상태를 명확히 구분해야 하는 웹앱"], + cautions: ["너무 중립적으로 만들면 인터내셔널 스타일과 구분되지 않습니다.", "빨간 포인트가 많아지면 시스템성이 약해지므로 한 화면에 역할을 제한해야 합니다.", "그리드가 너무 촘촘하면 모바일에서 뉴스 표처럼 답답해질 수 있습니다."], + imagePrompt: + "A Swiss design web reference image with strict asymmetric grid, large sans-serif typography, small numbered labels, white background, black rules, one red system accent, editorial information modules, no logo, no watermark", + research: { + referenceSites: [ + { title: "SWI swissinfo.ch", url: "https://www.swissinfo.ch", note: "Swiss editorial reference for strict news hierarchy, multilingual content modules, objective typography, and restrained public-service layout." }, + { title: "SBB", url: "https://www.sbb.ch", note: "Swiss transport reference for functional navigation, red system accent, timetable-like structure, and highly legible information design." }, + { title: "Web Design Lookbook - Swiss Design", url: "https://webdesignlookbook.webflow.io/", note: "Style study reference for Swiss grid principles, type-led hierarchy, structured margins, and clarity-first digital layouts." }, + ], + referenceGalleries: [ + { title: "Pinterest - Swiss Grids", url: "https://www.pinterest.com/tonyxj/swiss-grids/", note: "Moodboard reference for poster grids, asymmetric columns, type blocks, red markers, and modular Swiss-style spacing." }, + { title: "Awwwards - Switzerland Websites", url: "https://www.awwwards.com/websites/Switzerland/", note: "Gallery reference for Swiss web executions, local agencies, clean grid systems, and restrained precision in digital interfaces." }, + { title: "Dribbble - Swiss Grid", url: "https://dribbble.com/tags/swiss-grid", note: "UI and poster reference for grid-driven cards, baseline rhythm, numbered layouts, and strict typographic composition." }, + ], + representativeTraits: ["Strict asymmetric grid", "Objective typography", "Red system marker", "Numbered modules", "High information clarity"], + avoidTraits: ["Warm lifestyle minimalism", "Decorative Bauhaus color blocks", "Soft card-heavy UI"], + tokenIntent: + "Use a white base, black type, sharp two-pixel rules, red as a small system marker, tight modular spacing, and left-aligned typography so the style reads as Swiss information design.", + }, + }, + "international-style": { + summary: "인터내셔널 스타일은 지역색과 장식을 줄이고, 어디서나 이해되는 중립적 그리드와 일관된 컴포넌트로 정보를 전달하는 디자인입니다.", + description: + "인터내셔널 스타일은 Swiss Design에서 출발한 객관성과 보편성을 더 글로벌한 제품/기관 시스템으로 확장합니다. IBM Design Language의 2x Grid와 기업형 컴포넌트, MoMA의 기관형 정보 구조처럼 색은 절제하고, 동일한 규칙의 패널과 데이터 행으로 화면을 구성합니다. Swiss보다 포스터성이 약하고, Modernism보다 색면 실험이 적습니다.", + visualFeatures: ["중립 배경과 얇은 회색 선으로 글로벌 제품 시스템처럼 보입니다.", "반복 가능한 패널, 표, 상태 행이 같은 규칙으로 정렬됩니다.", "파란색은 브랜드/행동/상태를 표시하는 단일 시스템 색으로 작동합니다.", "국제적 문서와 대시보드처럼 정보의 객관성을 강조합니다."], + colorPalette: ["차가운 흰색과 밝은 회색 표면을 사용합니다.", "텍스트는 검정에 가까운 중립색으로 유지합니다.", "파랑은 CTA와 현재 상태에만 사용합니다.", "보조 회색은 패널, 선, 보조 텍스트를 구분합니다."], + typography: ["Helvetica 계열처럼 중립적이고 실용적인 산세리프 위계를 씁니다.", "제목보다 레이블, 표, 본문 시스템의 일관성을 강조합니다.", "자간은 0에 가깝게 두어 다국어 환경에서도 안정적으로 보이게 합니다."], + layoutTraits: ["기업형 포털처럼 반복 가능한 패널 구조를 사용합니다.", "그리드와 표가 화면의 기본 단위가 됩니다.", "CTA는 강하지만 장식적이지 않은 단일 색 버튼으로 둡니다.", "데이터와 설명이 같은 높이와 간격으로 반복됩니다."], + useCases: ["B2B 제품 사이트", "디자인 시스템 문서", "기관 포털", "글로벌 서비스 소개"], + goodFor: ["언어와 시장을 넘나드는 기업/기관", "규칙과 신뢰를 먼저 보여줘야 하는 제품", "디자인 시스템과 문서를 함께 보여주는 사이트", "중립적이지만 전문적인 랜딩페이지"], + cautions: ["너무 무색무취하면 일반 SaaS처럼 보일 수 있습니다.", "Swiss처럼 빨간 포스터 신호를 쓰면 스타일 경계가 흐려집니다.", "컴포넌트가 반복되더라도 첫 화면에는 명확한 브랜드 신호가 필요합니다."], + imagePrompt: + "An International Typographic Style web system with neutral corporate grid, modular panels, blue system accent, data rows, precise sans-serif hierarchy, global institutional clarity, no logo, no watermark", + research: { + referenceSites: [ + { title: "IBM Design Language", url: "https://www.ibm.com/design/language/", note: "Global corporate system reference for neutral typography, repeatable components, modular grids, and international product communication." }, + { title: "IBM Design Language - Layout", url: "https://www.ibm.com/design/language/layout/overview/", note: "Layout reference for precise grid behavior, consistent alignment, engineered hierarchy, and corporate-scale design rules." }, + { title: "MoMA", url: "https://www.moma.org/", note: "Institutional reference for universal information structure, objective navigation, and cross-content modules across art, events, and visits." }, + ], + referenceGalleries: [ + { title: "Pinterest - International Typographic Style", url: "https://id.pinterest.com/4340m/international-typographic-style/", note: "Moodboard reference for objective grids, Helvetica-like typography, asymmetric alignment, and universal information hierarchy." }, + { title: "Awwwards - Business & Corporate Websites", url: "https://www.awwwards.com/websites/business-corporate/", note: "Gallery reference for corporate-scale web systems, rational content architecture, neutral tone, and product/institution clarity." }, + { title: "Dribbble - International Typographic Style", url: "https://dribbble.com/search/international%20typographic%20style", note: "UI and graphic reference for typographic systems, neutral components, grid-based presentation, and corporate information modules." }, + ], + representativeTraits: ["Neutral global grid", "Corporate component system", "Blue system accent", "Data and document modules", "Objective hierarchy"], + avoidTraits: ["Poster-like Swiss red", "Warm domestic palette", "Expressive geometric modernism"], + tokenIntent: + "Use cool neutral surfaces, subtle borders, a single blue accent, sharp components, normal density, and predictable grid rhythm so the style reads as international corporate information design.", + }, + }, + scandinavian: { + summary: "스칸디나비안 디자인은 밝은 배경, 생활감 있는 제품 사진, 부드러운 색, 실용적인 카드 구조로 편안한 북유럽식 웹 경험을 만드는 디자인입니다.", + description: + "스칸디나비안은 미니멀하지만 차갑지 않습니다. IKEA의 접근성 있는 홈 커머스, Muuto의 현대적 북유럽 제품 표현, Nordic Nest의 생활 카테고리처럼 밝은 표면과 넓은 여백 위에 제품, 방, 소재가 친근하게 놓입니다. Japandi보다 더 밝고 생활적이며, Warm Minimal보다 더 실용적인 커머스 구조를 가집니다.", + visualFeatures: ["밝은 크림색 배경과 부드러운 그린/우드 톤이 생활감을 만듭니다.", "제품 카드, 방 카테고리, 추천 모듈처럼 실제 쇼핑 구조가 잘 어울립니다.", "사진 또는 제품 영역은 둥근 모서리와 충분한 여백으로 편안하게 보입니다.", "작은 할인/신상품 배지가 UI의 실용성을 더합니다."], + colorPalette: ["크림과 밝은 흰색 표면을 기본으로 사용합니다.", "세이지 그린과 밝은 우드 색을 주요 감성색으로 둡니다.", "오렌지/코랄은 생활감 있는 작은 강조에만 씁니다.", "경계선은 부드럽고 낮은 대비로 유지합니다."], + typography: ["친근한 산세리프를 중간 굵기로 사용합니다.", "제목은 큰 편이지만 지나치게 차갑거나 압축되지 않습니다.", "제품명, 가격, 카테고리 텍스트는 읽기 쉽게 작고 명확하게 둡니다."], + layoutTraits: ["생활형 커머스처럼 히어로, 카테고리, 제품 카드가 이어집니다.", "그리드는 정돈되어 있지만 카드 간 간격이 넉넉합니다.", "둥근 형태와 부드러운 색면을 사용해 실용성과 온기를 같이 줍니다.", "모바일에서도 제품 카드가 실제 쇼핑 화면처럼 보이도록 합니다."], + useCases: ["홈 리빙 커머스", "라이프스타일 브랜드", "가구 쇼룸", "웰니스 제품"], + goodFor: ["제품을 친근하게 보여줘야 하는 커머스", "밝고 신뢰감 있는 홈 브랜드", "복잡하지 않은 카테고리 탐색", "생활 사진과 제품 카드가 많은 사이트"], + cautions: ["너무 베이지로만 가면 Warm Minimal과 겹칩니다.", "사진 없는 추상 카드만 쓰면 북유럽 생활감이 사라집니다.", "귀여운 파스텔이 강하면 Kawaii나 Pastel 쪽으로 흐를 수 있습니다."], + imagePrompt: + "A Scandinavian web commerce reference image with bright cream background, soft sage and oak accents, practical furniture product cards, cozy home categories, friendly sans-serif typography, no logo, no watermark", + research: { + referenceSites: [ + { title: "IKEA", url: "https://www.ikea.com", note: "Mass-market Scandinavian reference for friendly product navigation, bright surfaces, practical room modules, and approachable home commerce." }, + { title: "Muuto", url: "https://www.muuto.com", note: "Contemporary Scandinavian brand reference for soft color, furniture-led storytelling, generous product cards, and warm minimal composition." }, + { title: "Nordic Nest", url: "https://www.nordicnest.com/", note: "Scandinavian commerce reference for lifestyle categories, pale backgrounds, cozy product density, and practical shopping hierarchy." }, + ], + referenceGalleries: [ + { title: "Pinterest - Scandinavian Website Design", url: "https://www.pinterest.com/search/pins/?q=scandinavian%20website%20design", note: "Moodboard/search reference for light interiors, pale wood, home-product layouts, soft neutrals, and cozy-but-ordered web composition." }, + { title: "Awwwards - Minimal Websites", url: "https://www.awwwards.com/websites/minimal/", note: "Closest gallery reference for refined Scandinavian-adjacent minimal web execution, bright layouts, product calm, and restrained interaction." }, + { title: "Dribbble - Scandinavian", url: "https://dribbble.com/tags/scandinavian", note: "UI and brand reference for Nordic furniture cards, soft product palettes, clean ecommerce modules, and lifestyle interface details." }, + ], + representativeTraits: ["Bright home commerce", "Soft Nordic palette", "Practical product cards", "Cozy lifestyle modules", "Friendly rounded edges"], + avoidTraits: ["Sterile Swiss grid", "Dark luxury restraint", "Japanese shadow-heavy calm"], + tokenIntent: + "Use bright cream surfaces, soft sage and oak accents, rounded cards, gentle shadows, normal spacing, and product-card layout so the style reads as Scandinavian home commerce.", + }, + }, + japandi: { + summary: "재팬디는 일본식 고요함과 북유럽의 실용성을 결합해 목재, 낮은 대비, 정적인 여백으로 차분한 웹 공간을 만드는 디자인입니다.", + description: + "재팬디는 밝은 북유럽 커머스보다 더 조용하고, Warm Minimal보다 더 건축적입니다. Karimoku Case, Norm Architects의 Azabu Residence와 Soft Minimal처럼 목재, 종이빛 표면, muted green, 긴 호흡의 이미지 블록을 사용합니다. 웹에서는 제품이나 공간을 빠르게 팔기보다, 재료와 장면을 천천히 읽게 하는 구조가 중요합니다.", + visualFeatures: ["낮은 대비의 베이지와 목재색이 화면의 기본 온도를 만듭니다.", "큰 이미지/공간 패널과 작은 설명 텍스트가 느린 리듬을 만듭니다.", "경계선과 카드 그림자는 최소화하고 재료감 있는 색면으로 구분합니다.", "라벨, 가격, CTA는 작고 조용하지만 명확하게 배치합니다."], + colorPalette: ["쌀빛 베이지와 따뜻한 흰색을 기본으로 둡니다.", "목재 갈색과 muted green을 핵심 재료색으로 사용합니다.", "검정 대신 부드러운 먹색 텍스트를 씁니다.", "테두리는 진하지 않게 두어 공간감이 끊기지 않게 합니다."], + typography: ["가늘고 차분한 산세리프 또는 세리프 느낌의 보조 리듬이 어울립니다.", "제목은 크게 쓰되 공격적인 압축 없이 낮은 목소리로 둡니다.", "본문은 짧은 문장과 넓은 행간으로 공간처럼 읽히게 합니다."], + layoutTraits: ["큰 공간 이미지, 재료 카드, 예약/문의 CTA가 느리게 이어집니다.", "비대칭이 있더라도 긴 여백과 낮은 대비로 안정감을 줍니다.", "제품 카드보다 룸/재료/철학 블록이 더 강하게 보입니다.", "모바일에서는 이미지-설명-CTA 순서를 명확히 유지합니다."], + useCases: ["가구 브랜드", "인테리어 스튜디오", "숙박/스테이", "웰니스 공간"], + goodFor: ["자연 소재와 공간감을 강조하는 브랜드", "프리미엄이지만 과시하지 않는 제품", "느린 탐색과 문의 전환이 중요한 사이트", "건축/인테리어 포트폴리오"], + cautions: ["너무 밝고 카드형이면 Scandinavian과 겹칩니다.", "색을 너무 따뜻하게 밀면 Warm Minimal과 구분이 약해집니다.", "장면이 없으면 단순 베이지 미니멀로 보일 수 있습니다."], + imagePrompt: + "A Japandi web design reference image with quiet wood-toned interiors, rice paper neutrals, muted green accent, large calm spatial panels, soft minimal furniture modules, no logo, no watermark", + research: { + referenceSites: [ + { title: "Karimoku Case - Creators", url: "https://www.karimoku-case.com/creators/", note: "Japandi reference for Japanese craft plus Scandinavian restraint, natural materials, quiet furniture presentation, and calm editorial spacing." }, + { title: "Norm Architects - Azabu Residence", url: "https://normcph.com/project/azabu-residence/", note: "Project reference for muted palette, tactile materials, wood warmth, and Japanese-Danish spatial calm in a web editorial format." }, + { title: "Norm Architects - Soft Minimal", url: "https://normcph.com/project/soft-minimal-2/", note: "Concept reference for human-centric restraint, tactility, natural light, and soft-minimal web storytelling that overlaps with Japandi." }, + ], + referenceGalleries: [ + { title: "Pinterest - Japandi Website Design", url: "https://www.pinterest.com/search/pins/?q=japandi%20website%20design", note: "Moodboard/search reference for wood, rice-paper neutrals, interior whitespace, low contrast, and quiet Japanese-Scandinavian layouts." }, + { title: "Awwwards - Architecture Websites", url: "https://www.awwwards.com/websites/architecture/", note: "Closest gallery reference for architectural calm, image-led spaces, restrained motion, and premium interior/architecture web presentation." }, + { title: "Dribbble - Japandi", url: "https://dribbble.com/search/japandi", note: "UI reference for Japandi furniture landings, interior cards, muted e-commerce flows, and calm booking/product layouts." }, + ], + representativeTraits: ["Wood and rice-paper neutrals", "Quiet spatial panels", "Low contrast hierarchy", "Tactile material cards", "Slow editorial rhythm"], + avoidTraits: ["Bright Scandinavian commerce", "Terracotta-heavy warm minimal", "Hard Swiss structure"], + tokenIntent: + "Use muted wood, rice-paper neutrals, soft ink text, low borders, calm spacing, and image-led interior modules so the style reads as Japandi spatial calm.", + }, + }, + "warm-minimal": { + summary: "웜 미니멀은 미니멀한 구조 위에 크림, 테라코타, 리넨 같은 따뜻한 색과 질감을 더해 부드럽고 초대하는 웹 경험을 만드는 디자인입니다.", + description: + "웜 미니멀은 차가운 미니멀리즘을 피하고, 감정이 있는 절제를 만듭니다. QUQU Design Studio와 Vellum Studio처럼 크림 배경, 부드러운 실내 사진, 테라코타 포인트, 여유로운 프로젝트 카드가 핵심입니다. Japandi보다 더 부드럽고 감성적이며, Scandinavian보다 커머스보다는 스튜디오/포트폴리오의 초대감에 가깝습니다.", + visualFeatures: ["크림, 타우프, 테라코타 계열이 첫인상을 따뜻하게 만듭니다.", "큰 둥근 이미지나 프로젝트 카드가 실제 스튜디오 웹처럼 보입니다.", "그림자는 거의 없지만 레이어 사이에 부드러운 색 차이를 둡니다.", "CTA와 배지는 검정 대신 따뜻한 브라운/테라코타로 처리합니다."], + colorPalette: ["크림과 웜 화이트를 기본 배경으로 사용합니다.", "테라코타는 CTA와 주요 상태에 제한적으로 씁니다.", "리넨 베이지와 따뜻한 브라운을 보조 표면에 둡니다.", "텍스트는 검정보다 부드러운 짙은 브라운에 가깝게 둡니다."], + typography: ["부드러운 산세리프를 중간 굵기로 사용합니다.", "제목은 크지만 모서리와 행간이 편안하게 느껴져야 합니다.", "본문은 짧고 감성적인 문장으로 프로젝트 분위기를 설명합니다."], + layoutTraits: ["스튜디오 포트폴리오처럼 히어로, 프로젝트 카드, 상담 CTA가 이어집니다.", "카드는 둥글고 넉넉하지만 과한 그림자 없이 색 차이로 구분합니다.", "색상 블록보다 이미지/텍스처/여백의 리듬이 중요합니다.", "모바일에서는 상담 CTA가 분명하게 보여야 합니다."], + useCases: ["인테리어 스튜디오", "웰니스 브랜드", "프리미엄 로컬 브랜드", "크리에이티브 포트폴리오"], + goodFor: ["부드러운 고급감과 접근성을 같이 원하는 브랜드", "공간/라이프스타일 사진이 많은 사이트", "상담 전환이 중요한 스튜디오", "차갑지 않은 미니멀 랜딩페이지"], + cautions: ["베이지 톤만 반복하면 개성이 약해집니다.", "둥근 카드와 그림자가 많아지면 일반 라이프스타일 UI처럼 보입니다.", "Japandi와 구분하려면 목재보다 리넨/테라코타/스튜디오 카드를 강조해야 합니다."], + imagePrompt: + "A warm minimal web design reference image with cream and taupe surfaces, terracotta accents, soft interior studio cards, linen texture feeling, rounded consultation CTA, no logo, no watermark", + research: { + referenceSites: [ + { title: "QUQU Design Studio", url: "https://ququstudio.com/en/", note: "Warm minimalist studio reference for cream surfaces, soft interior imagery, quiet navigation, and selected-work portfolio rhythm." }, + { title: "Vellum Studio", url: "https://www.vellum.studio/", note: "Interior studio reference for tranquil warm minimalism, tactile residential imagery, soft brutalist restraint, and calm editorial pacing." }, + { title: "Norm Architects - Soft Minimal", url: "https://normcph.com/project/soft-minimal-2/", note: "Soft-minimal reference for warm neutrals, tactile material language, slower reading rhythm, and human-centered restraint." }, + ], + referenceGalleries: [ + { title: "Pinterest - Warm Minimal Website Design", url: "https://www.pinterest.com/search/pins/?q=warm%20minimal%20website%20design", note: "Moodboard/search reference for cream, taupe, terracotta, soft shadows, natural texture, and welcoming minimal web layouts." }, + { title: "Awwwards - Minimal Collection", url: "https://www.awwwards.com/awwwards/collections/minimal/", note: "Closest gallery reference for quiet minimal sites, soft portfolio pacing, restrained modules, and polished warm-minimal execution cues." }, + { title: "Dribbble - Minimal Page", url: "https://dribbble.com/search/minimal-page", note: "UI reference for warm minimal product pages, soft conversion modules, spacious hero sections, and gently layered neutral components." }, + ], + representativeTraits: ["Cream and taupe warmth", "Terracotta CTA", "Soft project cards", "Linen-like texture", "Welcoming studio rhythm"], + avoidTraits: ["Cool SaaS minimalism", "Nordic product-commerce density", "Japanese wood-heavy stillness"], + tokenIntent: + "Use cream surfaces, terracotta accents, warm brown text, rounded cards, airy spacing, and soft studio modules so the style reads as warm minimal rather than generic beige minimalism.", + }, + }, }; function hashSlug(slug: string) { @@ -755,10 +970,32 @@ const styleTokenOverrides: Record layout: { heroVariant: "split", navStyle: "underline", alignment: "left" }, }, "warm-minimal": { - typography: { weightDisplay: 500, weightBody: 400, tracking: "-0.01em", headingScale: 0.96 }, - shape: { radius: "10px", radiusPill: "9999px", borderWidth: "1px" }, - space: { density: "airy", gap: "1.4rem", padScale: 1.45 }, - decoration: { shadow: "0 10px 30px rgb(var(--st-text-rgb) / 0.08)", effect: "none" }, + typography: { weightDisplay: 500, weightBody: 400, tracking: "0em", headingScale: 0.94 }, + shape: { radius: "18px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "1.45rem", padScale: 1.5 }, + decoration: { shadow: "0 18px 44px rgb(var(--st-text-rgb) / 0.08)", effect: "none" }, + layout: { heroVariant: "left", navStyle: "minimal", alignment: "left" }, + }, + "international-style": { + typography: { weightDisplay: 600, weightBody: 400, tracking: "0em", headingScale: 0.98 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.75rem", padScale: 1.0 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "split", navStyle: "underline", alignment: "left" }, + }, + "scandinavian": { + typography: { weightDisplay: 600, weightBody: 400, tracking: "0em", headingScale: 0.98 }, + shape: { radius: "14px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "1.25rem", padScale: 1.28 }, + decoration: { shadow: "0 12px 28px rgb(var(--st-text-rgb) / 0.08)", effect: "none" }, + layout: { heroVariant: "split", navStyle: "minimal", alignment: "left" }, + }, + "japandi": { + typography: { displayFont: '"Georgia", "Times New Roman", serif', weightDisplay: 400, weightBody: 400, tracking: "0em", headingScale: 0.9 }, + shape: { radius: "6px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "1.7rem", padScale: 1.55 }, + decoration: { shadow: "none", effect: "grain" }, + layout: { heroVariant: "split", navStyle: "minimal", alignment: "left" }, }, "brutalism": { typography: { weightDisplay: 900, tracking: "-0.05em" }, @@ -876,9 +1113,9 @@ const styleTokenOverrides: Record decoration: { shadow: "4px 4px 0 var(--st-accent), -4px -4px 0 var(--st-accent-2)", effect: "grain" }, }, "swiss-design": { - typography: { weightDisplay: 700, tracking: "-0.02em", headingScale: 1.05 }, - shape: { radius: "0px", borderWidth: "1px" }, - space: { density: "airy", gap: "1rem", padScale: 1.2 }, + typography: { weightDisplay: 700, weightBody: 400, tracking: "0em", headingScale: 1.02 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "tight", gap: "0.65rem", padScale: 0.95 }, decoration: { shadow: "none", effect: "none" }, layout: { heroVariant: "left", navStyle: "underline", alignment: "left" }, }, From 304a99a5400d8883455ef55ab3c08a7291b71cb4 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 19:35:38 +0900 Subject: [PATCH 08/14] Stabilize Swiss design preview layout --- .../DesignStyleSampleRenderer.tsx | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 3590a2d..1fcbc65 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -318,14 +318,15 @@ function ModernismFunctionalGrid({ className, compact = false, style }: Props) { } function SwissInformationGrid({ className, compact = false, style }: Props) { - const rows = ["Politics", "Culture", "Economy"]; + const rows = compact ? ["N", "C", "D"] : ["Politics", "Culture", "Economy"]; + const headline = compact ? ["Public", "Briefing"] : ["Clear", "public", "information"]; return (
-
+
CH -
+
World Briefing Archive @@ -337,39 +338,43 @@ function SwissInformationGrid({ className, compact = false, style }: Props) {

Grid first / Type leads

- Clear public information. + {headline.map((line) => ( + + {line} + + ))}

-
+
01 Multilingual editorial system
-
+
{rows.map((row, index) => ( -
+

0{index + 2}

-

{row}

+

{row}

))}
-
-
+
+
{[84, 64, 92, 52].map((width) => ( ))} -
- - +
+ +
-
+
{style.nameEn} / legibility index
From 48ed4bb1e3db11af72c0f8da4939dc5aada2b4e8 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 20:10:06 +0900 Subject: [PATCH 09/14] Redesign retro futurism style group from references --- ...026-06-04-representative-style-redesign.md | 35 +- scripts/capture-references.mjs | 12 +- scripts/style-references.json | 243 ++++- .../DesignStyleSampleRenderer.tsx | 684 ++++++++++++++ src/data/designStyles.ts | 838 +++++++++++++++++- 5 files changed, 1731 insertions(+), 81 deletions(-) diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index 9c34632..d10e4d9 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -99,29 +99,29 @@ Each style below must end with explicit references, explicit copy, explicit pale - [x] `scandinavian` - [x] `japandi` - [x] `warm-minimal` -- [ ] `soft-minimal` -- [ ] `high-end-minimal` +- [x] `soft-minimal` +- [x] `high-end-minimal` ### 강렬 / 실험 -- [ ] `brutalism` -- [ ] `new-brutalism` -- [ ] `anti-design` -- [ ] `maximalism` -- [ ] `glitch-art` -- [ ] `deconstructivism` -- [ ] `avant-garde` -- [ ] `postmodernism` +- [x] `brutalism` +- [x] `new-brutalism` +- [x] `anti-design` +- [x] `maximalism` +- [x] `glitch-art` +- [x] `deconstructivism` +- [x] `avant-garde` +- [x] `postmodernism` ### 레트로 / 빈티지 -- [ ] `retro` -- [ ] `vintage` -- [ ] `seventies-retro` -- [ ] `eighties-retro` -- [ ] `nineties-graphic` -- [ ] `y2k` -- [ ] `retro-futurism` +- [x] `retro` +- [x] `vintage` +- [x] `seventies-retro` +- [x] `eighties-retro` +- [x] `nineties-graphic` +- [x] `y2k` +- [x] `retro-futurism` - [ ] `mid-century-modern` - [ ] `bauhaus` @@ -1003,3 +1003,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: Completed the first per-style pass for `minimalism`: refreshed Linear, Apple, Stripe, Pinterest, Awwwards, and Dribbble references; added targeted reference validation; rewrote copy, palette, tokens, research brief, and a dedicated sample renderer; verified desktop and mobile renders with Playwright. - [x] 2026-06-04: Completed the second per-style pass for `modernism`: added Bauhaus-Archiv, MoMA, Vitra, AIM, Pinterest, Awwwards, and Dribbble references; separated it from quiet minimalism with functional grid, primary color blocks, black structure, explicit copy, palette, tokens, research brief, and a dedicated web-like sample renderer; verified desktop and mobile renders with Playwright. - [x] 2026-06-04: Completed the next modern/minimal pass through `warm-minimal`: added Swiss, International, Scandinavian, Japandi, and Warm Minimal references; rewrote copy, palettes, tokens, research briefs, and dedicated web-like sample renderers; fixed mobile card overflow; verified `/styles` plus all five detail pages at desktop and 390px mobile. +- [x] 2026-06-04: Completed the next representative pass through `retro-futurism`: added references, copy, palettes, token overrides, and dedicated web-like samples for `soft-minimal`, `high-end-minimal`, `brutalism`, `new-brutalism`, `anti-design`, `maximalism`, `glitch-art`, `deconstructivism`, `avant-garde`, `postmodernism`, `retro`, `vintage`, `seventies-retro`, `eighties-retro`, `nineties-graphic`, `y2k`, and `retro-futurism`. Verified targeted references for 24 styles, data, lint, build, and browser QA across `/styles` plus the 17 detail pages at desktop and 390px mobile. Reference capture completed for target real-site sources after replacing inaccessible URLs with captureable equivalents. diff --git a/scripts/capture-references.mjs b/scripts/capture-references.mjs index 6926047..6b74020 100644 --- a/scripts/capture-references.mjs +++ b/scripts/capture-references.mjs @@ -134,13 +134,18 @@ async function capture() { const sites = entry.sites ?? []; const galleries = sitesOnly ? [] : (entry.galleries ?? []); - const page = await context.newPage(); + let page = await context.newPage(); for (const item of sites) { const result = await capturePage(page, item, outDir, `site`); if (result.ok && !result.skipped) total++; else if (!result.ok) failed++; else skipped++; + + if (!result.ok) { + await page.close().catch(() => {}); + page = await context.newPage(); + } } for (const item of galleries) { @@ -148,6 +153,11 @@ async function capture() { if (result.ok && !result.skipped) total++; else if (!result.ok) failed++; else skipped++; + + if (!result.ok) { + await page.close().catch(() => {}); + page = await context.newPage(); + } } await page.close(); diff --git a/scripts/style-references.json b/scripts/style-references.json index 9dd7e83..3042d89 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -28,15 +28,224 @@ ] }, + "soft-minimal": { + "sites": [ + { "url": "https://normcph.com/project/soft-minimal-2/", "title": "Norm Architects - Soft Minimal", "note": "Concept reference for gentle restraint, tactile neutrals, soft light, and human-centered minimal composition." }, + { "url": "https://www.vellum.studio/", "title": "Vellum Studio", "note": "Interior studio reference for low-contrast warm surfaces, calm portfolio pacing, and quiet service-oriented modules." }, + { "url": "https://www.toogood.com/", "title": "Toogood", "note": "Design studio reference for softened editorial minimalism, sculptural product rhythm, and restrained off-white brand storytelling." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=soft%20minimal%20website%20design", "title": "Pinterest - Soft Minimal Website Design", "note": "Moodboard reference for cream neutrals, gentle shadows, rounded editorial cards, and low-pressure web service layouts." }, + { "url": "https://www.awwwards.com/awwwards/collections/minimal/", "title": "Awwwards - Minimal Collection", "note": "Closest gallery reference for polished minimal sites that use soft pacing, subtle surface separation, and restrained typography." }, + { "url": "https://dribbble.com/search/soft%20minimal%20website", "title": "Dribbble - Soft Minimal Website", "note": "UI reference for soft forms, neutral cards, approachable service blocks, and gentle conversion components." } + ] + }, + + "high-end-minimal": { + "sites": [ + { "url": "https://www.aesop.com", "title": "Aesop", "note": "Premium retail reference for disciplined product storytelling, refined spacing, muted material color, and controlled interaction detail." }, + { "url": "https://www.jilsander.com", "title": "Jil Sander", "note": "Fashion reference for austere luxury minimalism, precise product grids, quiet typography, and severe neutral composition." }, + { "url": "https://www.toteme.com", "title": "Toteme", "note": "Luxury fashion reference for image-led restraint, exact spacing, black-and-cream hierarchy, and editorial commerce modules." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=high%20end%20minimal%20website%20design", "title": "Pinterest - High End Minimal Website Design", "note": "Moodboard reference for luxury whitespace, refined serif and sans typography, premium product framing, and controlled neutral palettes." }, + { "url": "https://www.awwwards.com/websites/luxury/", "title": "Awwwards - Luxury Websites", "note": "Award-gallery reference for high-end web execution, premium imagery, restrained motion, and careful editorial pacing." }, + { "url": "https://dribbble.com/search/luxury%20minimal%20website", "title": "Dribbble - Luxury Minimal Website", "note": "UI reference for refined product detail pages, elegant navigation, premium cards, and spare conversion layouts." } + ] + }, + "brutalism": { "sites": [ - { "url": "https://www.balenciaga.com", "title": "Balenciaga", "note": "패션 브루탈리즘 — 검정 배경, 굵은 산세리프, 각진 레이아웃" }, - { "url": "https://brutalistwebsites.com", "title": "Brutalist Websites", "note": "브루탈리즘 전문 갤러리 사이트 — 실제 예시 풍부" }, - { "url": "https://www.bloomberg.com", "title": "Bloomberg", "note": "에디토리얼 브루탈리즘 — 높은 정보 밀도, 굵은 타이포" } + { "url": "https://brutalistwebsites.com", "title": "Brutalist Websites", "note": "Reference archive for raw HTML structure, default-looking controls, hard borders, and deliberately plain web composition." }, + { "url": "https://www.balenciaga.com", "title": "Balenciaga", "note": "Fashion reference for sparse commerce, severe monochrome hierarchy, blunt navigation, and anti-polished luxury minimalism." }, + { "url": "https://www.secession.at", "title": "Secession", "note": "Cultural reference for table-like structure, strict columns, plain surfaces, and brutalist institutional web rhythm." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=brutalist%20website%20design", "title": "Pinterest - Brutalist Website Design", "note": "Moodboard reference for raw typography, stark black-white layouts, exposed boxes, and intentionally severe web surfaces." }, + { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards - Brutalism Collection", "note": "Gallery reference for award-level brutalist executions, including hard grids, exposed UI, oversized type, and rough interaction cues." }, + { "url": "https://dribbble.com/tags/brutalist_website", "title": "Dribbble - Brutalist Website", "note": "UI reference for brutalist cards, thick borders, raw navigation, stark CTAs, and component-level layout tension." } + ] + }, + + "new-brutalism": { + "sites": [ + { "url": "https://gumroad.com", "title": "Gumroad", "note": "Product reference for playful digital brutalism, thick outline cards, blunt commerce hierarchy, and saturated accent blocks." }, + { "url": "https://neobrutalism.dev/", "title": "Neo Brutalism UI", "note": "Component reference for offset shadows, heavy borders, direct controls, high-contrast panels, and web-native neo-brutalist rules." }, + { "url": "https://www.figma.com/community/tag/neubrutalism/files", "title": "Figma Community - Neubrutalism", "note": "Design-resource reference for component-level neo-brutalist cards, buttons, forms, and dashboard surfaces." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=neo%20brutalism%20web%20design", "title": "Pinterest - Neo Brutalism Web Design", "note": "Moodboard reference for chunky outlines, playful shadows, saturated panels, and intentionally simple app interfaces." }, + { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards - Brutalism Collection", "note": "Gallery reference for brutalist and neo-brutalist web executions, hard-edged modules, and expressive web-native structures." }, + { "url": "https://dribbble.com/tags/neo-brutalism", "title": "Dribbble - Neo Brutalism", "note": "UI reference for neo-brutalist dashboards, cards, buttons, pricing blocks, and high-contrast product surfaces." } + ] + }, + + "anti-design": { + "sites": [ + { "url": "https://www.superbad.com", "title": "Superbad", "note": "Historical web reference for intentionally awkward composition, early-web friction, clashing visuals, and anti-polished navigation." }, + { "url": "https://thehtml.review/", "title": "The HTML Review", "note": "Independent web reference for strange editorial systems, raw HTML feeling, unexpected layouts, and handcrafted anti-design energy." }, + { "url": "https://www.are.na/", "title": "Are.na", "note": "Cultural platform reference for rough knowledge boards, dense links, plain interface elements, and anti-slick publishing rhythm." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=anti%20design%20website", "title": "Pinterest - Anti Design Website", "note": "Moodboard reference for clashing layouts, deliberate imbalance, uncomfortable type scale, and anti-commercial web composition." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for unconventional web systems, broken expectations, experimental navigation, and intentionally unstable visual rhythm." }, + { "url": "https://dribbble.com/search/anti%20design%20website", "title": "Dribbble - Anti Design Website", "note": "UI reference for anti-design posters, chaotic cards, distorted hierarchy, and deliberately awkward digital surfaces." } + ] + }, + + "maximalism": { + "sites": [ + { "url": "https://farmrio.com/", "title": "FARM Rio", "note": "Fashion maximalism reference for saturated prints, joyful pattern density, tropical color, and expressive product storytelling." }, + { "url": "https://www.versace.com", "title": "Versace", "note": "Luxury reference for gold, pattern, iconic motifs, high-contrast product drama, and unapologetically decorative surfaces." }, + { "url": "https://www.libertylondon.com", "title": "Liberty London", "note": "Retail reference for textile pattern density, floral maximalism, heritage color, and layered commerce modules." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=maximalist%20website%20design", "title": "Pinterest - Maximalist Website Design", "note": "Moodboard reference for saturated color, layered pattern, dense composition, eclectic type, and decorative web scenes." }, + { "url": "https://www.awwwards.com/websites/colorful/", "title": "Awwwards - Colorful Websites", "note": "Closest gallery reference for award-level maximal color, bold visual systems, ornamental motion, and dense campaign pages." }, + { "url": "https://dribbble.com/tags/maximalism", "title": "Dribbble - Maximalism", "note": "UI reference for pattern-rich landing pages, expressive product cards, layered hero modules, and decorative component systems." } + ] + }, + + "glitch-art": { + "sites": [ + { "url": "https://www.cyberpunk.net", "title": "Cyberpunk 2077 Official", "note": "Commercial reference for error-like overlays, neon distortion, aggressive digital panels, and high-energy sci-fi interface rhythm." }, + { "url": "https://patatap.com", "title": "Patatap", "note": "Interactive reference for audiovisual pulses, reactive digital marks, simple controls, and playful glitch-adjacent feedback." }, + { "url": "https://thehtml.review/", "title": "The HTML Review", "note": "Experimental web reference for raw publishing, unexpected visual breaks, and non-standard digital composition." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=glitch%20website%20design", "title": "Pinterest - Glitch Website Design", "note": "Moodboard reference for RGB splits, broken scanlines, noisy panels, digital corruption, and distorted typography." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for interactive experimental sites, digital distortion, non-linear motion, and unconventional interface effects." }, + { "url": "https://dribbble.com/search/glitch%20website", "title": "Dribbble - Glitch Website", "note": "UI reference for glitch dashboards, corrupted type treatments, scanline overlays, and cyber interface modules." } + ] + }, + + "deconstructivism": { + "sites": [ + { "url": "https://www.moma.org/calendar/exhibitions/1813", "title": "MoMA - Deconstructivist Architecture", "note": "Historical reference for fragmented structure, broken geometry, spatial tension, and deconstructivist visual principles." }, + { "url": "https://www.coop-himmelblau.at", "title": "Coop Himmelb(l)au", "note": "Architecture reference for angular fragments, asymmetric space, sharp structural overlays, and engineered visual disruption." }, + { "url": "https://www.zaha-hadid.com/?lang=en-US", "title": "Zaha Hadid Architects", "note": "Architecture reference for dynamic deconstructive forms, sharp spatial movement, and complex project-driven visual structure." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=deconstructivism%20website%20design", "title": "Pinterest - Deconstructivism Website Design", "note": "Moodboard reference for broken grids, sliced panels, tilted forms, architectural fragments, and tense editorial composition." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for unconventional structures, fragmented navigation, dynamic composition, and architecture-adjacent web work." }, + { "url": "https://dribbble.com/search/deconstructivism%20web%20design", "title": "Dribbble - Deconstructivism Web Design", "note": "UI reference for angular cards, displaced content blocks, skewed editorial layouts, and fractured hero systems." } + ] + }, + + "avant-garde": { + "sites": [ + { "url": "https://www.serpentinegalleries.org", "title": "Serpentine Galleries", "note": "Art institution reference for experimental editorial hierarchy, cultural programming, unexpected rhythm, and contemporary exhibition pages." }, + { "url": "https://canopycanopycanopy.com/", "title": "Triple Canopy", "note": "Publishing reference for conceptual editorial systems, unusual reading pace, art-critical typography, and non-commercial structure." }, + { "url": "https://walkerart.org", "title": "Walker Art Center", "note": "Museum reference for bold cultural navigation, flexible editorial modules, and progressive institutional visual language." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=avant%20garde%20website%20design", "title": "Pinterest - Avant Garde Website Design", "note": "Moodboard reference for experimental typography, art-poster composition, asymmetry, and cultural web layouts." }, + { "url": "https://www.awwwards.com/websites/experimental/", "title": "Awwwards - Experimental Websites", "note": "Gallery reference for forward-looking web work, unusual navigation, expressive typography, and conceptual interaction systems." }, + { "url": "https://dribbble.com/search/avant%20garde%20website", "title": "Dribbble - Avant Garde Website", "note": "UI reference for avant-garde landing pages, editorial experiments, angular typography, and gallery-style modules." } + ] + }, + + "postmodernism": { + "sites": [ + { "url": "https://www.memphis-milano.com", "title": "Memphis Milano", "note": "Primary postmodern reference for Memphis forms, bright geometric surfaces, ironic color, and playful product presentation." }, + { "url": "https://www.vitra.com/en-us/magazine/details/the-memphis-group", "title": "Vitra - The Memphis Group", "note": "Design-history reference for postmodern pattern, anti-functional color, expressive furniture, and cultural context." }, + { "url": "https://designmuseum.org/exhibitions/memphis-plastic-field", "title": "Design Museum - Memphis: Plastic Field", "note": "Museum reference for postmodern exhibition framing, graphic motifs, playful material, and Memphis visual vocabulary." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=postmodern%20website%20design%20memphis", "title": "Pinterest - Postmodern Memphis Website Design", "note": "Moodboard reference for Memphis patterns, playful geometry, ironic type, and colorful postmodern web composition." }, + { "url": "https://www.awwwards.com/websites/colorful/", "title": "Awwwards - Colorful Websites", "note": "Closest gallery reference for postmodern-adjacent color, expressive geometry, layered campaign pages, and playful digital rhythm." }, + { "url": "https://dribbble.com/search/postmodern%20website", "title": "Dribbble - Postmodern Website", "note": "UI reference for Memphis cards, mismatched shapes, colorful product modules, and ironic interface treatments." } + ] + }, + + "retro": { + "sites": [ + { "url": "https://poolside.fm", "title": "Poolside FM", "note": "Retro web reference for nostalgia, playful media interface, warm color, and intentionally analog browsing cues." }, + { "url": "https://radiooooo.com", "title": "Radiooooo", "note": "Music experience reference for time-travel navigation, nostalgic color, map-like interaction, and retro audio discovery." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical web aesthetics, period UI patterns, typography, palettes, and layout conventions." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=retro%20website%20design", "title": "Pinterest - Retro Website Design", "note": "Moodboard reference for nostalgic palettes, rounded badges, vintage-inspired web graphics, and playful commerce layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for modern retro web executions, nostalgic imagery, period color, and contemporary interaction polish." }, + { "url": "https://dribbble.com/search/retro%20website", "title": "Dribbble - Retro Website", "note": "UI reference for retro landing pages, badge systems, diner-style cards, and nostalgic product screens." } + ] + }, + + "vintage": { + "sites": [ + { "url": "https://www.filson.com", "title": "Filson", "note": "Heritage retail reference for rugged catalog rhythm, aged neutrals, serif accents, and practical vintage product storytelling." }, + { "url": "https://www.levi.com", "title": "Levi's", "note": "Heritage apparel reference for archival denim tone, classic commerce modules, and vintage Americana brand cues." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for older web layouts, historic graphics, period typography, and document-like page structure." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=vintage%20website%20design", "title": "Pinterest - Vintage Website Design", "note": "Moodboard reference for paper texture, muted ink, heritage badges, classic catalog grids, and aged color systems." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Closest gallery reference for vintage and retro web executions, heritage color, editorial pacing, and archival atmosphere." }, + { "url": "https://dribbble.com/search/vintage%20website", "title": "Dribbble - Vintage Website", "note": "UI reference for vintage catalogs, badges, serif headings, paper-like cards, and heritage product pages." } + ] + }, + + "seventies-retro": { + "sites": [ + { "url": "https://www.houseplant.com", "title": "Houseplant", "note": "Lifestyle commerce reference for warm 70s color, rounded typography, product character, and relaxed editorial modules." }, + { "url": "https://www.rollingstone.com", "title": "Rolling Stone", "note": "Media reference for 70s cultural heritage, strong editorial identity, music nostalgia, and bold magazine hierarchy." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for period web interpretation, old interface rhythm, nostalgic graphics, and historical color cues." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=70s%20retro%20website%20design", "title": "Pinterest - 70s Retro Website Design", "note": "Moodboard reference for groovy curves, warm orange and avocado palettes, psychedelic patterns, and relaxed retro layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for contemporary retro sites that reinterpret 70s color, soft shapes, and nostalgic campaign structure." }, + { "url": "https://dribbble.com/search/70s%20website%20design", "title": "Dribbble - 70s Website Design", "note": "UI reference for 70s landing pages, groovy badges, wavy modules, and warm product cards." } + ] + }, + + "eighties-retro": { + "sites": [ + { "url": "https://poolside.fm", "title": "Poolside FM", "note": "Interface reference for 80s media nostalgia, lo-fi desktop cues, bright controls, and playful analog-digital interaction." }, + { "url": "https://www.cyberpunk.net", "title": "Cyberpunk 2077 Official", "note": "Commercial reference for neon futurist palettes, dark interface panels, sci-fi campaign hierarchy, and high-contrast digital drama." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Desktop-web reference for retro OS windows, pixel-era controls, playful app framing, and 80s/90s digital nostalgia." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=80s%20retro%20website%20design", "title": "Pinterest - 80s Retro Website Design", "note": "Moodboard reference for neon grids, synthwave gradients, VHS graphics, and arcade-style web surfaces." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for retro-futurist and 80s-inspired sites, neon motion, dark stages, and nostalgic interaction cues." }, + { "url": "https://dribbble.com/search/synthwave%20website", "title": "Dribbble - Synthwave Website", "note": "UI reference for synthwave dashboards, neon panels, arcade buttons, and dark retro digital layouts." } + ] + }, + + "nineties-graphic": { + "sites": [ + { "url": "https://www.spacejam.com/1996/", "title": "Space Jam 1996", "note": "Historic web reference for 90s graphics, tiled backgrounds, image-heavy navigation, and early-web composition." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Retro desktop reference for playful window chrome, pixel controls, chaotic app surfaces, and 90s computing nostalgia." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical 90s web layouts, visual tropes, browser-era UI, and graphic density." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/search/pins/?q=90s%20graphic%20website%20design", "title": "Pinterest - 90s Graphic Website Design", "note": "Moodboard reference for loud patterns, early digital graphics, sticker-like elements, and zine-style web layouts." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Gallery reference for modern retro sites that reinterpret 90s web energy, collage density, and graphic nostalgia." }, + { "url": "https://dribbble.com/search/90s%20website%20design", "title": "Dribbble - 90s Website Design", "note": "UI reference for 90s landing pages, desktop windows, bold stickers, and high-energy graphic modules." } + ] + }, + + "y2k": { + "sites": [ + { "url": "https://www.webdesignmuseum.org/exhibitions/y2k-aesthetic-in-web-design", "title": "Web Design Museum - Y2K Aesthetic", "note": "Archive reference for early-2000s web design, chrome effects, optimistic digital color, and period interface conventions." }, + { "url": "https://www.blingee.com", "title": "Blingee", "note": "Living web reference for glitter graphics, decorative internet nostalgia, shiny surfaces, and participatory Y2K visual culture." }, + { "url": "https://windows93.net", "title": "Windows 93", "note": "Retro desktop reference for playful legacy UI, pixel controls, layered windows, and early web nostalgia." } + ], + "galleries": [ + { "url": "https://www.pinterest.com/ideas/y2k-website-design-inspiration/893524089634/", "title": "Pinterest - Y2K Website Design Inspiration", "note": "Moodboard reference for chrome, gradients, bubble type, glitter, plastic surfaces, and early-2000s web optimism." }, + { "url": "https://www.awwwards.com/websites/y2k/", "title": "Awwwards - Y2K Websites", "note": "Gallery reference for contemporary Y2K web executions, glossy gradients, nostalgic interfaces, and cyber-pop visual systems." }, + { "url": "https://dribbble.com/search/y2k%20website", "title": "Dribbble - Y2K Website", "note": "UI reference for Y2K landing pages, shiny cards, bubble navigation, chrome-like widgets, and playful web portals." } + ] + }, + + "retro-futurism": { + "sites": [ + { "url": "https://retro-futurism.com/", "title": "Retro Futurism", "note": "Archive reference for past visions of the future, space-age graphics, optimistic technology motifs, and period futurist imagery." }, + { "url": "https://paleofuture.com/", "title": "Paleofuture", "note": "Cultural archive reference for historical future speculation, mid-century technology imagery, and optimistic space-age narrative." }, + { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical digital aesthetics, period UI systems, and older web interpretations of future-facing design." } ], "galleries": [ - { "url": "https://www.awwwards.com/awwwards/collections/brutalism/", "title": "Awwwards — Brutalism Collection" }, - { "url": "https://dribbble.com/tags/neo-brutalism", "title": "Dribbble — Neo Brutalism" } + { "url": "https://www.pinterest.com/search/pins/?q=retro%20futurism%20website%20design", "title": "Pinterest - Retro Futurism Website Design", "note": "Moodboard reference for space-age curves, chrome panels, pastel planets, vintage technology, and optimistic future nostalgia." }, + { "url": "https://www.awwwards.com/websites/retro/", "title": "Awwwards - Retro Websites", "note": "Closest gallery reference for retro-futurist web execution, nostalgic future visuals, playful motion, and modern polish." }, + { "url": "https://dribbble.com/search/retro%20futurism%20website", "title": "Dribbble - Retro Futurism Website", "note": "UI reference for space-age landing pages, rocket dashboards, rounded control panels, and future-nostalgia product screens." } ] }, @@ -125,30 +334,6 @@ ] }, - "y2k": { - "sites": [ - { "url": "https://www.webdesignmuseum.org/exhibitions/y2k-aesthetic-in-web-design", "title": "Web Design Museum — Y2K", "note": "실제 2000년대 초 웹디자인 아카이브 — 색·폰트·레이아웃 원형 확인" }, - { "url": "https://www.blingee.com", "title": "Blingee", "note": "크롬·글리터·버블 Y2K 에너지 살아있는 실제 사이트" } - ], - "galleries": [ - { "url": "https://www.pinterest.com/ideas/y2k-website-design-inspiration/893524089634/", "title": "Pinterest — Y2K Website Design Inspiration", "note": "Y2K 웹디자인 무드보드 — 크롬, 그라디언트, 버블폰트 참고" }, - { "url": "https://www.behance.net/search/projects/y2k%20website", "title": "Behance — Y2K Website Projects" }, - { "url": "https://webflow.com/blog/y2k-aesthetic", "title": "Webflow Blog — Y2K Aesthetic Guide" } - ] - }, - - "maximalism": { - "sites": [ - { "url": "https://www.gucci.com", "title": "Gucci", "note": "패션 맥시멀리즘 — 패턴 레이어, 에클렉틱 타이포, 강한 색" }, - { "url": "https://www.versace.com", "title": "Versace", "note": "그리스 모티프 + 골드 + 볼드 패턴 — 과감한 장식성" }, - { "url": "https://www.libertylondon.com", "title": "Liberty London", "note": "꽃무늬·패턴 맥시멀리즘 — 텍스타일 기반 밀도감" } - ], - "galleries": [ - { "url": "https://onepagelove.com/tag/maximalist", "title": "One Page Love — Maximalist" }, - { "url": "https://dribbble.com/tags/maximalism", "title": "Dribbble — Maximalism" } - ] - }, - "swiss-design": { "sites": [ { "url": "https://www.swissinfo.ch", "title": "SWI swissinfo.ch", "note": "Swiss editorial reference for strict news hierarchy, multilingual content modules, objective typography, and restrained public-service layout." }, diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 1fcbc65..5797de0 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -572,6 +572,622 @@ function WarmMinimalStudio({ className, compact = false, style }: Props) { ); } +function SoftMinimalService({ className, compact = false, style }: Props) { + const services = compact ? ["Audit", "Plan", "Launch"] : ["Mindful audit", "Care plan", "Quiet launch"]; + + return ( + +
+
+ Soft Office + Journal / Services / Book +
+
+
+
+

Consultation studio

+

+ Gentle pages for careful decisions. +

+
+
+ Book a call + View packages +
+
+
+
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+ {services.map((service, index) => ( +
+ + {service} + 0{index + 1} +
+ ))} +
+
+
+
+ + ); +} + +function HighEndMinimalProduct({ className, compact = false, style }: Props) { + const details = ["Material", "Size", "Reserve"]; + + return ( + +
+
+ Maison Item + Shop / Atelier / Cart +
+
+
+
+

Atelier edition

+

+ A quiet frame for one object. +

+
+
+

{style.summary}

+
+
+
+
+
+
+
+ {details.map((detail) => ( + + {detail} + + ))} +
+
+
+
+ + ); +} + +function RawBrutalistIndex({ className, compact = false, style }: Props) { + const rows = compact ? ["News", "Index", "Buy"] : ["Exhibition notice", "Archive index", "Ticket request", "Press file"]; + + return ( + +
+
+ RAW + Public index + 06.04 +
+
+
+

+ WEB STRUCTURE FIRST. +

+ OPEN +
+
+ {rows.map((row, index) => ( +
+ 0{index + 1} + {row} +
+ ))} +
+
+

+ {style.summary} +

+
+ + ); +} + +function NeoBrutalistApp({ className, compact = false, style }: Props) { + const metrics = ["Sales", "Tasks", "Payout"]; + + return ( + +
+
+ Creator desk + Ship +
+
+
+

New product

+

+ Sell a tiny tool today. +

+
+
+ {metrics.map((metric, index) => ( +
+ {metric} + + {[82, 14, 3][index]}% + +
+ ))} +
+
+
+ + ); +} + +function AntiDesignLanding({ className, compact = false, style }: Props) { + const links = ["wrong shop", "index?", "about now"]; + + return ( + +
+
+ no polish + menu +
+
+
+

+ Useful friction. +

+
+
+ {links.map((link, index) => ( + + {link} + + ))} +
+
+

+ Still clickable. Still intentional. +

+
+ + ); +} + +function MaximalistPatternMarket({ className, compact = false, style }: Props) { + const items = ["Silk", "Bloom", "Gold"]; + + return ( + +
+
+
+ Pattern hall + Cart 03 +
+
+
+

+ More color, more world. +

+
+
+ {items.map((item, index) => ( +
+ + {item} +
+ ))} +
+
+
+ + ); +} + +function GlitchArtInterface({ className, compact = false, style }: Props) { + const nodes = ["Signal", "Noise", "Error"]; + + return ( + +
+
+
+ SYS://GLITCH + LIVE +
+
+
+ {nodes.map((node, index) => ( +
+

{node}

+
+
+ ))} +
+
+

+ DATA BROKE CLEAN. +

+ +
+
+
+ + ); +} + +function DeconstructiveExhibition({ className, compact = false, style }: Props) { + const projects = ["Fold", "Cut", "Void"]; + + return ( + +
+
+ Architecture index + Projects 12 +
+
+
+
+

+ Fragments become navigation. +

+
+
+ {projects.map((project, index) => ( +
+

0{index + 1}

+

{project}

+
+ ))} +
+
+
+ + ); +} + +function AvantGardeEditorial({ className, compact = false, style }: Props) { + const program = ["Talk", "Film", "Essay"]; + + return ( + +
+
+ AG + Program / Publishing + 2026 +
+
+
+

+ New rules for public culture. +

+ +
+
+ {program.map((item, index) => ( +
+ 0{index + 1} + {item} +
+ ))} +
+ {[style.palette.accent, style.palette.accent2, style.palette.accent3].map((color) => ( + + ))} +
+
+
+
+ + ); +} + +function PostmodernMemphisPortal({ className, compact = false, style }: Props) { + const shapes = ["Chair", "Lamp", "Vase"]; + + return ( + +
+
+
+ Memphis shop + +
+
+
+

+ Objects with jokes inside. +

+
+
+ {shapes.map((shape, index) => ( +
+ +

{shape}

+
+ ))} +
+
+
+ + ); +} + +function RetroDinerShop({ className, compact = false, style }: Props) { + const products = ["Soda", "Vinyl", "Tote"]; + + return ( + +
+
+ Retro Mart + Open +
+
+
+

+ Nostalgia you can buy. +

+
+
+ {products.map((product, index) => ( +
+ +

{product}

+
+ ))} +
+
+
+ + ); +} + +function VintagePaperCatalog({ className, compact = false, style }: Props) { + const rows = compact ? ["Jacket", "Boot", "Tin"] : ["Wax jacket", "Field boot", "Tool tin", "Archive bag"]; + + return ( + +
+
+ Heritage catalog + Est. 1912 +
+
+
+

+ Goods with a long memory. +

+ +
+
+ {rows.map((row, index) => ( +
+ 0{index + 1} + {row} + ${[48, 92, 18, 64][index]} +
+ ))} +
+
+
+ + ); +} + +function SeventiesGroovyLanding({ className, compact = false, style }: Props) { + const cards = ["Listen", "Shop", "Gather"]; + + return ( + +
+
+
+ Groove house + RSVP +
+
+
+

+ Warm curves for easy days. +

+
+
+ {cards.map((card, index) => ( +
+ +

{card}

+
+ ))} +
+
+
+ + ); +} + +function EightiesSynthConsole({ className, compact = false, style }: Props) { + const tracks = ["FM", "VHS", "Arcade"]; + + return ( + +
+
+
+ SYNTH://88 + ON AIR +
+
+
+

+ Neon signal, midnight grid. +

+
+
+ {tracks.map((track, index) => ( +
+ {track} + +
+ ))} +
+
+
+ + ); +} + +function NinetiesGraphicZine({ className, compact = false, style }: Props) { + const windows = ["Drop", "Links", "Guestbook"]; + + return ( + +
+
+
+ browser window + [x] +
+
+
+

+ Web stickers and loud links. +

+
+
+ {windows.map((window, index) => ( + + {window} + + ))} +
+
+
+ + ); +} + +function Y2KGlossPortal({ className, compact = false, style }: Props) { + const widgets = ["Profile", "Chat", "Hits"]; + + return ( + +
+
+ Crystal portal + login +
+
+
+

+ Glossy widgets for web dreams. +

+
+
+ {widgets.map((widget, index) => ( +
+ +

{widget}

+
+ ))} +
+
+
+ + ); +} + +function RetroFuturismFlightDeck({ className, compact = false, style }: Props) { + const legs = ["Orbit", "Dock", "Return"]; + + return ( + +
+
+
+ Orbital departures + Gate 07 +
+
+
+

+ Book tomorrow as imagined yesterday. +

+
+
+ {legs.map((leg, index) => ( +
+

0{index + 1}

+

{leg}

+
+ ))} +
+
+
+ + ); +} + function BrutalistPoster({ compact = false, style }: Props) { return ( @@ -869,6 +1485,74 @@ export function DesignStyleSampleRenderer({ compact = false, style, className }: return ; } + if (style.slug === "soft-minimal") { + return ; + } + + if (style.slug === "high-end-minimal") { + return ; + } + + if (style.slug === "brutalism") { + return ; + } + + if (style.slug === "new-brutalism") { + return ; + } + + if (style.slug === "anti-design") { + return ; + } + + if (style.slug === "maximalism") { + return ; + } + + if (style.slug === "glitch-art") { + return ; + } + + if (style.slug === "deconstructivism") { + return ; + } + + if (style.slug === "avant-garde") { + return ; + } + + if (style.slug === "postmodernism") { + return ; + } + + if (style.slug === "retro") { + return ; + } + + if (style.slug === "vintage") { + return ; + } + + if (style.slug === "seventies-retro") { + return ; + } + + if (style.slug === "eighties-retro") { + return ; + } + + if (style.slug === "nineties-graphic") { + return ; + } + + if (style.slug === "y2k") { + return ; + } + + if (style.slug === "retro-futurism") { + return ; + } + switch (style.sampleType) { case "brutalist-poster": return ; diff --git a/src/data/designStyles.ts b/src/data/designStyles.ts index d8b48d3..cc239db 100644 --- a/src/data/designStyles.ts +++ b/src/data/designStyles.ts @@ -411,16 +411,192 @@ const palettes: Record = { accent3: "#9A7B5D", border: "#DED1C1", }, + "soft-minimal": { + base: "#F5F1EC", + surface: "#FFFDF8", + text: "#2B2824", + mutedText: "#82796F", + primary: "#2B2824", + accent: "#B8A898", + accent2: "#E6DED4", + accent3: "#D8C5B2", + border: "#D7CDC1", + }, + "high-end-minimal": { + base: "#F3F0EA", + surface: "#FFFDF8", + text: "#11110F", + mutedText: "#6F6A61", + primary: "#11110F", + accent: "#7E6A4F", + accent2: "#D3C5B0", + accent3: "#23201B", + border: "#BFB7AA", + }, brutalism: { - base: "#E4E2DD", - surface: "#F0EEE8", - text: "#1E1E1E", - mutedText: "#6D6962", - primary: "#1E1E1E", - accent: "#DB4A2B", - accent2: "#F8A348", - accent3: "#FF89A9", - border: "#1E1E1E", + base: "#F0EEE6", + surface: "#FFFFFF", + text: "#0A0A0A", + mutedText: "#55504A", + primary: "#0A0A0A", + accent: "#FF3B1F", + accent2: "#F4D230", + accent3: "#2E67FF", + border: "#0A0A0A", + }, + "new-brutalism": { + base: "#FFE76A", + surface: "#FFF8D6", + text: "#101010", + mutedText: "#4B4238", + primary: "#101010", + accent: "#FF5C39", + accent2: "#52D273", + accent3: "#6C5CFF", + border: "#101010", + }, + "anti-design": { + base: "#F5ED3F", + surface: "#FF6EDE", + text: "#111111", + mutedText: "#31251F", + primary: "#111111", + accent: "#00E0FF", + accent2: "#FF3B30", + accent3: "#F5F1EF", + border: "#111111", + }, + maximalism: { + base: "#241336", + surface: "#FFF0B8", + text: "#FFF0B8", + mutedText: "#D8B7DA", + primary: "#FFF0B8", + accent: "#FF4D88", + accent2: "#00B894", + accent3: "#F7C948", + border: "#FFF0B8", + }, + "glitch-art": { + base: "#05050B", + surface: "#11112A", + text: "#F5FBFF", + mutedText: "#8BA2B8", + primary: "#F5FBFF", + accent: "#00F0FF", + accent2: "#FF2BD6", + accent3: "#B6FF00", + border: "#00F0FF", + }, + deconstructivism: { + base: "#E8E4DA", + surface: "#FDFBF4", + text: "#111111", + mutedText: "#5E5A54", + primary: "#111111", + accent: "#E43D30", + accent2: "#1E57A8", + accent3: "#B6B0A6", + border: "#111111", + }, + "avant-garde": { + base: "#F8F5EF", + surface: "#101010", + text: "#101010", + mutedText: "#64605A", + primary: "#101010", + accent: "#D71920", + accent2: "#2256A7", + accent3: "#F2C438", + border: "#101010", + }, + postmodernism: { + base: "#F8E64D", + surface: "#FFFFFF", + text: "#141414", + mutedText: "#5F4D78", + primary: "#141414", + accent: "#FF4FA3", + accent2: "#22C7A9", + accent3: "#5B5BD6", + border: "#141414", + }, + retro: { + base: "#F8D992", + surface: "#FFF3D6", + text: "#3A1F13", + mutedText: "#8B5231", + primary: "#3A1F13", + accent: "#D94A2B", + accent2: "#2A7A78", + accent3: "#F2A541", + border: "#3A1F13", + }, + vintage: { + base: "#EEE0C4", + surface: "#FFF7E5", + text: "#2C2418", + mutedText: "#76664D", + primary: "#2C2418", + accent: "#8C3F2B", + accent2: "#B98E45", + accent3: "#345A4A", + border: "#5A432B", + }, + "seventies-retro": { + base: "#F4C05E", + surface: "#FFE6A8", + text: "#3C1D12", + mutedText: "#7D4A25", + primary: "#3C1D12", + accent: "#D75B27", + accent2: "#6E8B3D", + accent3: "#B5527C", + border: "#3C1D12", + }, + "eighties-retro": { + base: "#0B1024", + surface: "#151B3D", + text: "#F5F0FF", + mutedText: "#9B9BC9", + primary: "#F5F0FF", + accent: "#FF2BD6", + accent2: "#22E6FF", + accent3: "#F9E900", + border: "#22E6FF", + }, + "nineties-graphic": { + base: "#00A7A5", + surface: "#FFF1A8", + text: "#111111", + mutedText: "#3F3F3F", + primary: "#111111", + accent: "#FF4D29", + accent2: "#7129FF", + accent3: "#E7FF2E", + border: "#111111", + }, + y2k: { + base: "#E9F6FF", + surface: "#FFFFFF", + text: "#18233D", + mutedText: "#65718D", + primary: "#18233D", + accent: "#71D5FF", + accent2: "#FF8EE7", + accent3: "#B8FF5C", + border: "#8AA7C7", + }, + "retro-futurism": { + base: "#1A2238", + surface: "#F6DDA2", + text: "#F9F0D7", + mutedText: "#C9B68B", + primary: "#F9F0D7", + accent: "#FF6B45", + accent2: "#4AD7D1", + accent3: "#F2C84B", + border: "#4AD7D1", }, cyberpunk: { base: "#080A14", @@ -945,6 +1121,516 @@ const styleContentOverrides: Record = { "Use cream surfaces, terracotta accents, warm brown text, rounded cards, airy spacing, and soft studio modules so the style reads as warm minimal rather than generic beige minimalism.", }, }, + "soft-minimal": { + summary: "소프트 미니멀은 절제된 구조에 낮은 대비, 둥근 표면, 촉감 있는 중성색을 더해 긴장 없는 서비스형 웹 화면을 만드는 스타일입니다.", + description: + "소프트 미니멀은 Warm Minimal보다 색 온도가 더 조용하고, Japandi보다 제품/서비스 UI에 가깝습니다. Norm Architects, Vellum Studio, Toogood처럼 부드러운 크림 표면, 작은 라벨, 둥근 상담 카드, 여유 있는 텍스트 블록을 사용해 사용자가 천천히 읽고 결정하게 만듭니다.", + visualFeatures: ["크림과 그레이지 톤이 낮은 대비의 첫인상을 만듭니다.", "둥근 카드와 얇은 선이 실제 서비스 랜딩처럼 작동합니다.", "이미지 대신 부드러운 표면 블록과 상담/패키지 모듈이 중심이 됩니다."], + colorPalette: ["오프화이트와 그레이지를 기본으로 둡니다.", "따뜻한 베이지를 보조 표면에 쓰고 강한 색은 피합니다.", "텍스트는 검정보다 부드러운 차콜에 가깝게 둡니다."], + typography: ["중간 굵기의 산세리프로 차분한 제목을 만듭니다.", "본문은 넓은 행간과 짧은 문장으로 압박을 줄입니다.", "라벨은 작고 단정하게 두어 과한 장식을 피합니다."], + layoutTraits: ["서비스 소개, 패키지 카드, 예약 CTA가 자연스럽게 이어집니다.", "카드 간 간격이 넓고 경계는 낮은 대비로 둡니다.", "모바일에서는 하나의 상담 흐름처럼 세로로 읽히게 합니다."], + useCases: ["웰니스 서비스", "컨설팅 스튜디오", "프리미엄 로컬 브랜드", "라이프스타일 예약 페이지"], + goodFor: ["차분하지만 친근한 첫인상", "긴 설명을 부담 없이 읽혀야 하는 서비스", "상담/예약 전환이 중요한 사이트", "차가운 미니멀을 피해야 하는 브랜드"], + cautions: ["색 대비를 너무 낮추면 정보 위계가 사라집니다.", "Warm Minimal과 겹치지 않게 테라코타보다 그레이지를 우선합니다.", "실제 카드와 CTA가 없으면 단순 배경색 샘플처럼 보일 수 있습니다."], + imagePrompt: + "A soft minimal service website reference image with cream and greige surfaces, rounded consultation cards, low contrast typography, tactile neutral blocks, calm booking CTA, no logo, no watermark", + research: { + referenceSites: [ + { title: "Norm Architects - Soft Minimal", url: "https://normcph.com/project/soft-minimal-2/", note: "Concept reference for gentle restraint, tactile neutrals, soft light, and human-centered minimal composition." }, + { title: "Vellum Studio", url: "https://www.vellum.studio/", note: "Interior studio reference for low-contrast warm surfaces, calm portfolio pacing, and quiet service-oriented modules." }, + { title: "Toogood", url: "https://www.toogood.com/", note: "Design studio reference for softened editorial minimalism, sculptural product rhythm, and restrained off-white brand storytelling." }, + ], + referenceGalleries: [ + { title: "Pinterest - Soft Minimal Website Design", url: "https://www.pinterest.com/search/pins/?q=soft%20minimal%20website%20design", note: "Moodboard reference for cream neutrals, gentle shadows, rounded editorial cards, and low-pressure web service layouts." }, + { title: "Awwwards - Minimal Collection", url: "https://www.awwwards.com/awwwards/collections/minimal/", note: "Closest gallery reference for polished minimal sites that use soft pacing, subtle surface separation, and restrained typography." }, + { title: "Dribbble - Soft Minimal Website", url: "https://dribbble.com/search/soft%20minimal%20website", note: "UI reference for soft forms, neutral cards, approachable service blocks, and gentle conversion components." }, + ], + representativeTraits: ["Low-contrast neutrals", "Rounded service cards", "Gentle consultation CTA", "Soft editorial pacing", "Tactile calm"], + avoidTraits: ["Cold SaaS minimalism", "Terracotta-heavy warm minimal", "Hard Swiss precision"], + tokenIntent: + "Use low-contrast cream surfaces, rounded cards, soft borders, airy spacing, and gentle service modules so the style reads as soft minimal.", + }, + }, + "high-end-minimal": { + summary: "하이엔드 미니멀은 큰 여백, 정교한 상품 프레이밍, 절제된 명암으로 고급 제품의 품질을 조용히 강조하는 스타일입니다.", + description: + "하이엔드 미니멀은 단순히 비어 있는 화면이 아니라, 제품 이미지와 구매 흐름을 매우 엄격하게 정렬하는 럭셔리 커머스 언어입니다. Aesop, Jil Sander, Toteme처럼 좁은 팔레트, 정확한 상품 카드, 얇은 라인, 낮은 목소리의 CTA가 핵심입니다.", + visualFeatures: ["큰 제품 프레임과 넓은 여백이 화면의 중심이 됩니다.", "명도 차이가 작은 베이지/블랙 팔레트가 프리미엄 인상을 만듭니다.", "가격, 옵션, CTA는 작지만 매우 정확한 위치에 놓입니다."], + colorPalette: ["웜 화이트와 크림을 기본 표면으로 둡니다.", "차콜과 블랙을 텍스트와 CTA에 제한적으로 씁니다.", "금속성 베이지나 토프를 소재감 포인트로 사용합니다."], + typography: ["얇거나 중간 굵기의 산세리프를 정교하게 배치합니다.", "제목은 크게 쓰되 과시하지 않고 안정적인 행간을 유지합니다.", "상품 정보는 작은 크기로도 또렷하게 읽히게 합니다."], + layoutTraits: ["상품 히어로, 세부 옵션, 룩북 카드가 조용히 이어집니다.", "그리드는 매우 정렬되어 있고 장식보다 비례가 중요합니다.", "모바일에서는 제품 이미지와 구매 CTA가 먼저 보여야 합니다."], + useCases: ["럭셔리 제품", "패션 커머스", "뷰티 브랜드", "프리미엄 편집숍"], + goodFor: ["제품의 소재와 품질을 강조하는 페이지", "적은 카피로 신뢰감을 줘야 하는 브랜드", "고급 사진이 있는 커머스", "차분한 구매 전환"], + cautions: ["사진 품질이 낮으면 고급감이 바로 무너집니다.", "색을 너무 많이 쓰면 High-End Minimal이 아니라 일반 커머스가 됩니다.", "여백만 늘리면 정보가 부족한 화면처럼 보일 수 있습니다."], + imagePrompt: + "A high-end minimal luxury ecommerce website reference image with cream surface, precise product hero, black restrained typography, premium material swatches, quiet checkout CTA, no logo, no watermark", + research: { + referenceSites: [ + { title: "Aesop", url: "https://www.aesop.com", note: "Premium retail reference for disciplined product storytelling, refined spacing, muted material color, and controlled interaction detail." }, + { title: "Jil Sander", url: "https://www.jilsander.com", note: "Fashion reference for austere luxury minimalism, precise product grids, quiet typography, and severe neutral composition." }, + { title: "Toteme", url: "https://www.toteme.com", note: "Luxury fashion reference for image-led restraint, exact spacing, black-and-cream hierarchy, and editorial commerce modules." }, + ], + referenceGalleries: [ + { title: "Pinterest - High End Minimal Website Design", url: "https://www.pinterest.com/search/pins/?q=high%20end%20minimal%20website%20design", note: "Moodboard reference for luxury whitespace, refined serif and sans typography, premium product framing, and controlled neutral palettes." }, + { title: "Awwwards - Luxury Websites", url: "https://www.awwwards.com/websites/luxury/", note: "Award-gallery reference for high-end web execution, premium imagery, restrained motion, and careful editorial pacing." }, + { title: "Dribbble - Luxury Minimal Website", url: "https://dribbble.com/search/luxury%20minimal%20website", note: "UI reference for refined product detail pages, elegant navigation, premium cards, and spare conversion layouts." }, + ], + representativeTraits: ["Luxury product framing", "Exact spacing", "Quiet commerce CTA", "Neutral material palette", "Restrained hierarchy"], + avoidTraits: ["Generic SaaS minimalism", "Decorative luxury excess", "Soft rounded wellness cards"], + tokenIntent: + "Use precise luxury spacing, warm neutrals, fine borders, restrained black CTAs, and product-first modules so the style reads as high-end minimal.", + }, + }, + brutalism: { + summary: "브루탈리즘은 거친 HTML 구조, 두꺼운 선, 노골적인 정보 배치를 통해 가공되지 않은 웹의 힘을 드러내는 스타일입니다.", + description: + "브루탈리즘은 예쁜 포스터 효과가 아니라 실제 웹 구조의 날것을 전면에 보이는 방식입니다. Brutalist Websites, Balenciaga, Secession처럼 표 형태의 목록, 큰 경계선, 기본 컨트롤처럼 보이는 버튼, 강한 흑백 대비가 화면의 주된 언어가 됩니다.", + visualFeatures: ["굵은 테두리와 표 구조가 화면을 강하게 나눕니다.", "색은 적지만 액센트가 들어갈 때는 매우 직접적으로 보입니다.", "버튼과 링크가 장식 없이 기능처럼 드러납니다."], + colorPalette: ["흰색, 검정, 오래된 종이색을 기본으로 둡니다.", "빨강, 노랑, 파랑은 표식처럼 제한적으로 씁니다.", "회색은 설명과 상태 정보에만 사용합니다."], + typography: ["두껍고 큰 제목을 사용하지만 글자 간격은 벌리지 않습니다.", "본문과 표 라벨은 시스템 산세리프처럼 직접적이어야 합니다.", "정제된 세리프나 부드러운 스크립트는 피합니다."], + layoutTraits: ["목록, 표, 색인, 경고 박스가 웹 페이지의 실제 구조처럼 보입니다.", "카드보다 행과 칸을 우선하고 경계선을 숨기지 않습니다.", "모바일에서도 두꺼운 구획과 큰 링크가 유지됩니다."], + useCases: ["문화 기관", "실험적 포트폴리오", "패션 캠페인", "아카이브 인덱스"], + goodFor: ["강한 태도와 비상업적 이미지를 보여줄 때", "정보 구조 자체를 시각 언어로 쓰는 사이트", "브랜드가 일부러 거칠고 직접적으로 보여야 할 때", "포스터보다 실제 인덱스형 웹이 필요한 경우"], + cautions: ["텍스트가 많을수록 정렬 규칙이 없으면 그냥 깨진 화면처럼 보입니다.", "너무 귀여운 색과 그림자를 쓰면 New Brutalism으로 넘어갑니다.", "접근성과 클릭 가능성이 불분명해지지 않게 해야 합니다."], + imagePrompt: + "A brutalist web index reference image with raw black borders, table rows, default-like buttons, stark white and paper background, red warning accent, plain navigation, no logo, no watermark", + research: { + referenceSites: [ + { title: "Brutalist Websites", url: "https://brutalistwebsites.com", note: "Reference archive for raw HTML structure, default-looking controls, hard borders, and deliberately plain web composition." }, + { title: "Balenciaga", url: "https://www.balenciaga.com", note: "Fashion reference for sparse commerce, severe monochrome hierarchy, blunt navigation, and anti-polished luxury minimalism." }, + { title: "Secession", url: "https://www.secession.at", note: "Cultural reference for table-like structure, strict columns, plain surfaces, and brutalist institutional web rhythm." }, + ], + referenceGalleries: [ + { title: "Pinterest - Brutalist Website Design", url: "https://www.pinterest.com/search/pins/?q=brutalist%20website%20design", note: "Moodboard reference for raw typography, stark black-white layouts, exposed boxes, and intentionally severe web surfaces." }, + { title: "Awwwards - Brutalism Collection", url: "https://www.awwwards.com/awwwards/collections/brutalism/", note: "Gallery reference for award-level brutalist executions, including hard grids, exposed UI, oversized type, and rough interaction cues." }, + { title: "Dribbble - Brutalist Website", url: "https://dribbble.com/tags/brutalist_website", note: "UI reference for brutalist cards, thick borders, raw navigation, stark CTAs, and component-level layout tension." }, + ], + representativeTraits: ["Raw web index", "Thick borders", "Default-like controls", "Hard monochrome structure", "Direct information rows"], + avoidTraits: ["Playful neo-brutalist shadows", "Polished luxury whitespace", "Decorative poster-only layout"], + tokenIntent: + "Use monochrome surfaces, thick borders, raw table rows, no radius, and blunt CTAs so the style reads as real web brutalism.", + }, + }, + "new-brutalism": { + summary: "뉴 브루탈리즘은 브루탈리즘의 두꺼운 선과 직접성을 앱 UI에 맞게 밝은 색, 오프셋 그림자, 큰 버튼으로 재해석한 스타일입니다.", + description: + "뉴 브루탈리즘은 raw HTML보다 더 제품 UI적이고 장난스럽습니다. Gumroad, Neo Brutalism UI, Figma 커뮤니티 사례처럼 두꺼운 카드, 원색 배경, 눌리는 버튼, 큰 가격/상태 블록이 실제 앱 화면처럼 보이게 해야 합니다.", + visualFeatures: ["두꺼운 검정 선과 단색 그림자가 가장 강한 신호입니다.", "카드, 입력창, 버튼이 모두 물리적인 블록처럼 보입니다.", "밝은 노랑, 초록, 보라 같은 색이 UI 상태를 명확히 나눕니다."], + colorPalette: ["밝은 노랑 또는 크림을 기본 배경으로 둡니다.", "검정은 모든 테두리와 텍스트의 기준입니다.", "원색 액센트를 버튼, 알림, 가격 카드에 씁니다."], + typography: ["굵은 제목과 두꺼운 버튼 텍스트를 사용합니다.", "본문도 약간 무겁게 두어 블록감이 유지되게 합니다.", "글자 간격보다 면과 선의 힘으로 개성을 만듭니다."], + layoutTraits: ["대시보드, 가격 카드, 폼, 체크리스트가 실제 제품처럼 구성됩니다.", "각 모듈은 독립적인 박스처럼 명확하게 분리됩니다.", "모바일에서도 큰 터치 타깃과 그림자가 남아야 합니다."], + useCases: ["크리에이터 플랫폼", "SaaS 대시보드", "교육 앱", "가격/구독 페이지"], + goodFor: ["친근하지만 강한 제품 UI", "복잡하지 않은 앱 기능 소개", "크리에이터/개발자 대상 서비스", "명확한 CTA가 필요한 랜딩"], + cautions: ["그림자와 색을 너무 많이 겹치면 가독성이 떨어집니다.", "일반 브루탈리즘보다 더 앱 구조가 보여야 합니다.", "모서리와 두께 규칙이 흔들리면 유치해 보일 수 있습니다."], + imagePrompt: + "A neo brutalist product dashboard website reference image with thick black borders, yellow background, offset shadows, bright app cards, chunky buttons, pricing widgets, no logo, no watermark", + research: { + referenceSites: [ + { title: "Gumroad", url: "https://gumroad.com", note: "Product reference for playful digital brutalism, thick outline cards, blunt commerce hierarchy, and saturated accent blocks." }, + { title: "Neo Brutalism UI", url: "https://neobrutalism.dev/", note: "Component reference for offset shadows, heavy borders, direct controls, high-contrast panels, and web-native neo-brutalist rules." }, + { title: "Figma Community - Neubrutalism", url: "https://www.figma.com/community/tag/neubrutalism/files", note: "Design-resource reference for component-level neo-brutalist cards, buttons, forms, and dashboard surfaces." }, + ], + referenceGalleries: [ + { title: "Pinterest - Neo Brutalism Web Design", url: "https://www.pinterest.com/search/pins/?q=neo%20brutalism%20web%20design", note: "Moodboard reference for chunky outlines, playful shadows, saturated panels, and intentionally simple app interfaces." }, + { title: "Awwwards - Brutalism Collection", url: "https://www.awwwards.com/awwwards/collections/brutalism/", note: "Gallery reference for brutalist and neo-brutalist web executions, hard-edged modules, and expressive web-native structures." }, + { title: "Dribbble - Neo Brutalism", url: "https://dribbble.com/tags/neo-brutalism", note: "UI reference for neo-brutalist dashboards, cards, buttons, pricing blocks, and high-contrast product surfaces." }, + ], + representativeTraits: ["Chunky app UI", "Offset shadows", "Bright panels", "Thick black controls", "Direct product modules"], + avoidTraits: ["Raw archival brutalism", "Anti-design disorder", "Soft rounded minimalism"], + tokenIntent: + "Use bright panels, thick black outlines, block shadows, compact spacing, and app-like cards so the style reads as neo brutalism.", + }, + }, + "anti-design": { + summary: "안티디자인은 균형, 정렬, 세련됨을 일부러 비틀어 불편하지만 기억에 남는 실험적 웹 경험을 만드는 스타일입니다.", + description: + "안티디자인은 실수처럼 보이는 것이 아니라, 관습을 깨는 의도적인 연출입니다. Superbad, The HTML Review, Are.na처럼 엇나간 배치, 충돌하는 색, 비정형 링크, 불균형한 텍스트 블록을 사용하되 클릭과 읽기는 유지해야 합니다.", + visualFeatures: ["정렬이 일부러 흔들리고 모듈 크기가 불균형합니다.", "충돌하는 색과 배경이 관습적인 미감을 방해합니다.", "링크와 라벨은 낯설지만 실제 웹 요소처럼 작동합니다."], + colorPalette: ["형광 노랑, 핑크, 사이언처럼 충돌하는 색을 씁니다.", "검정 테두리로 최소한의 구조를 붙잡습니다.", "중성색은 숨을 쉴 수 있는 작은 영역에만 둡니다."], + typography: ["제목과 라벨 크기를 일부러 어긋나게 배치합니다.", "본문은 완전히 깨뜨리지 않고 읽을 수 있는 기준선을 유지합니다.", "다양한 굵기보다 위치와 색 충돌로 긴장을 만듭니다."], + layoutTraits: ["랜딩, 링크 허브, 아트 프로젝트, 독립 출판 페이지에 어울립니다.", "요소가 겹치거나 튀어나오되 주요 CTA는 남아야 합니다.", "모바일에서는 혼란보다 의도적 순서를 우선합니다."], + useCases: ["아트 프로젝트", "독립 출판", "실험적 캠페인", "문화 이벤트"], + goodFor: ["기억에 남는 첫인상이 필요한 프로젝트", "상업적 세련됨을 거부하는 브랜드", "짧고 강한 메시지를 던지는 캠페인", "디자인 관습 자체를 주제로 삼는 페이지"], + cautions: ["진짜 오류처럼 보이면 신뢰가 떨어집니다.", "접근성 대비와 클릭 영역은 끝까지 확인해야 합니다.", "장기 사용 제품 UI에는 피로도가 큽니다."], + imagePrompt: + "An anti-design website reference image with intentionally awkward layout, clashing yellow cyan pink surfaces, misaligned link blocks, raw black borders, readable chaos, no logo, no watermark", + research: { + referenceSites: [ + { title: "Superbad", url: "https://www.superbad.com", note: "Historical web reference for intentionally awkward composition, early-web friction, clashing visuals, and anti-polished navigation." }, + { title: "The HTML Review", url: "https://thehtml.review/", note: "Independent web reference for strange editorial systems, raw HTML feeling, unexpected layouts, and handcrafted anti-design energy." }, + { title: "Are.na", url: "https://www.are.na/", note: "Cultural platform reference for rough knowledge boards, dense links, plain interface elements, and anti-slick publishing rhythm." }, + ], + referenceGalleries: [ + { title: "Pinterest - Anti Design Website", url: "https://www.pinterest.com/search/pins/?q=anti%20design%20website", note: "Moodboard reference for clashing layouts, deliberate imbalance, uncomfortable type scale, and anti-commercial web composition." }, + { title: "Awwwards - Experimental Websites", url: "https://www.awwwards.com/websites/experimental/", note: "Gallery reference for unconventional web systems, broken expectations, experimental navigation, and intentionally unstable visual rhythm." }, + { title: "Dribbble - Anti Design Website", url: "https://dribbble.com/search/anti%20design%20website", note: "UI reference for anti-design posters, chaotic cards, distorted hierarchy, and deliberately awkward digital surfaces." }, + ], + representativeTraits: ["Intentional imbalance", "Clashing colors", "Misaligned links", "Readable chaos", "Anti-commercial attitude"], + avoidTraits: ["Random broken UI", "Cute neo-brutalist order", "Polished gallery minimalism"], + tokenIntent: + "Use clashing colors, uneven modules, raw borders, compact spacing, and intentionally awkward hierarchy while keeping key controls readable.", + }, + }, + maximalism: { + summary: "맥시멀리즘은 색, 패턴, 이미지, 장식 모티프를 풍부하게 쌓아 브랜드 세계관을 한 화면에 밀도 있게 보여주는 스타일입니다.", + description: + "맥시멀리즘은 단순히 많은 요소를 넣는 방식이 아니라, 반복 패턴과 강한 색으로 몰입형 브랜드 무대를 만드는 방식입니다. FARM Rio, Versace, Liberty London처럼 제품 카드, 캠페인 배너, 장식 패턴, 배지가 동시에 보이지만 중심 행동은 분명해야 합니다.", + visualFeatures: ["패턴과 색면이 화면의 빈 공간을 적극적으로 채웁니다.", "상품/이미지/라벨이 여러 층으로 겹쳐 브랜드 세계관을 만듭니다.", "장식적이지만 가격, 컬렉션, CTA 같은 정보가 살아 있어야 합니다."], + colorPalette: ["짙은 보라나 버건디 같은 깊은 배경을 사용할 수 있습니다.", "핑크, 그린, 골드처럼 강한 액센트를 함께 씁니다.", "패턴이 많을수록 텍스트 대비를 의식적으로 확보합니다."], + typography: ["굵은 제목과 장식적 라벨을 함께 사용합니다.", "본문은 짧게 유지해 장식 밀도에 묻히지 않게 합니다.", "가격과 CTA는 고대비 박스로 분명하게 처리합니다."], + layoutTraits: ["캠페인 히어로, 패턴 영역, 상품 카드, 배지가 한 화면에 공존합니다.", "대칭보다 풍부한 레이어와 시선 이동을 우선합니다.", "모바일에서는 레이어 수를 줄이고 핵심 카드부터 보여줍니다."], + useCases: ["패션 캠페인", "패턴 브랜드", "라이프스타일 편집숍", "한정 컬렉션"], + goodFor: ["브랜드 세계관이 강한 커머스", "시각 자산이 풍부한 캠페인", "고객이 둘러보는 재미를 느껴야 하는 페이지", "평범한 제품 목록을 무대로 바꾸고 싶을 때"], + cautions: ["정보 위계 없이 쌓으면 혼잡한 화면이 됩니다.", "모든 색을 같은 비중으로 쓰면 CTA가 사라집니다.", "성능과 이미지 로딩도 함께 고려해야 합니다."], + imagePrompt: + "A maximalist fashion campaign website reference image with layered textile patterns, saturated jewel colors, product cards, ornate badges, dense but readable ecommerce hierarchy, no logo, no watermark", + research: { + referenceSites: [ + { title: "FARM Rio", url: "https://farmrio.com/", note: "Fashion maximalism reference for saturated prints, joyful pattern density, tropical color, and expressive product storytelling." }, + { title: "Versace", url: "https://www.versace.com", note: "Luxury reference for gold, pattern, iconic motifs, high-contrast product drama, and unapologetically decorative surfaces." }, + { title: "Liberty London", url: "https://www.libertylondon.com", note: "Retail reference for textile pattern density, floral maximalism, heritage color, and layered commerce modules." }, + ], + referenceGalleries: [ + { title: "Pinterest - Maximalist Website Design", url: "https://www.pinterest.com/search/pins/?q=maximalist%20website%20design", note: "Moodboard reference for saturated color, layered pattern, dense composition, eclectic type, and decorative web scenes." }, + { title: "Awwwards - Colorful Websites", url: "https://www.awwwards.com/websites/colorful/", note: "Closest gallery reference for award-level maximal color, bold visual systems, ornamental motion, and dense campaign pages." }, + { title: "Dribbble - Maximalism", url: "https://dribbble.com/tags/maximalism", note: "UI reference for pattern-rich landing pages, expressive product cards, layered hero modules, and decorative component systems." }, + ], + representativeTraits: ["Layered pattern", "Saturated campaign color", "Dense product world", "Decorative badges", "Clear high-contrast CTA"], + avoidTraits: ["Random clutter", "Muted vintage catalog", "Single-color dopamine UI"], + tokenIntent: + "Use saturated palettes, patterned blocks, compact spacing, strong borders, and layered commerce modules so the style reads as maximalist.", + }, + }, + "glitch-art": { + summary: "글리치 아트는 디지털 오류, RGB 분리, 스캔라인, 깨진 데이터 패널을 시각 언어로 삼는 실험적 웹 스타일입니다.", + description: + "글리치 아트는 사이버펑크와 가깝지만 더 오류 자체에 집중합니다. Cyberpunk 2077, Patatap, 실험적 웹 레퍼런스처럼 화면이 깨지는 듯한 선, 모노스페이스 정보 패널, 노이즈가 있는 상태 카드가 실제 인터페이스처럼 구성되어야 합니다.", + visualFeatures: ["RGB 분리와 스캔라인이 디지털 손상을 암시합니다.", "패널은 터미널이나 진단 화면처럼 보입니다.", "밝은 사이언, 마젠타, 라임이 어두운 배경에서 충돌합니다."], + colorPalette: ["거의 검정에 가까운 배경을 사용합니다.", "사이언과 마젠타를 핵심 오류 색으로 씁니다.", "라임은 경고나 상태값에 제한적으로 둡니다."], + typography: ["모노스페이스 폰트와 짧은 상태 라벨이 잘 맞습니다.", "제목은 굵고 각진 느낌으로 처리합니다.", "긴 문단보다 코드, 수치, 로그 같은 짧은 단위를 씁니다."], + layoutTraits: ["진단 대시보드, 미디어 콘솔, 이벤트 티저 화면에 어울립니다.", "패널과 차트가 실제로 작동하는 인터페이스처럼 보여야 합니다.", "모바일에서는 노이즈보다 정보 패널의 가독성을 우선합니다."], + useCases: ["게임/음악 캠페인", "디지털 아트 전시", "테크 이벤트", "미디어 실험"], + goodFor: ["불안정한 디지털 감각이 필요한 브랜드", "짧고 강한 인터랙션 티저", "사이버 장르와 연결되는 콘텐츠", "데이터/사운드/영상 기반 프로젝트"], + cautions: ["글리치 효과가 과하면 텍스트를 읽기 어렵습니다.", "Cyberpunk와 구분하려면 도시/네온보다 오류 패널을 강조합니다.", "광과민 사용자를 위한 과한 점멸은 피해야 합니다."], + imagePrompt: + "A glitch art web interface reference image with dark diagnostic panels, RGB split typography, scanline texture, cyan magenta lime accents, corrupted data widgets, no logo, no watermark", + research: { + referenceSites: [ + { title: "Cyberpunk 2077 Official", url: "https://www.cyberpunk.net", note: "Commercial reference for error-like overlays, neon distortion, aggressive digital panels, and high-energy sci-fi interface rhythm." }, + { title: "Patatap", url: "https://patatap.com", note: "Interactive reference for audiovisual pulses, reactive digital marks, simple controls, and playful glitch-adjacent feedback." }, + { title: "The HTML Review", url: "https://thehtml.review/", note: "Experimental web reference for raw publishing, unexpected visual breaks, and non-standard digital composition." }, + ], + referenceGalleries: [ + { title: "Pinterest - Glitch Website Design", url: "https://www.pinterest.com/search/pins/?q=glitch%20website%20design", note: "Moodboard reference for RGB splits, broken scanlines, noisy panels, digital corruption, and distorted typography." }, + { title: "Awwwards - Experimental Websites", url: "https://www.awwwards.com/websites/experimental/", note: "Gallery reference for interactive experimental sites, digital distortion, non-linear motion, and unconventional interface effects." }, + { title: "Dribbble - Glitch Website", url: "https://dribbble.com/search/glitch%20website", note: "UI reference for glitch dashboards, corrupted type treatments, scanline overlays, and cyber interface modules." }, + ], + representativeTraits: ["RGB split", "Scanline panels", "Corrupted widgets", "Dark diagnostic UI", "Digital error energy"], + avoidTraits: ["Clean cyberpunk marketing", "Decorative neon only", "Unreadable distortion"], + tokenIntent: + "Use dark panels, mono typography, dashed borders, glitch shadows, compact spacing, and high-contrast cyan/magenta accents.", + }, + }, + deconstructivism: { + summary: "디컨스트럭티비즘은 안정적인 그리드를 해체하고 비껴난 면, 잘린 이미지, 각진 구조를 재조합해 긴장감 있는 웹 화면을 만듭니다.", + description: + "디컨스트럭티비즘은 무작위 회전이 아니라 건축적인 구조 해체에 가깝습니다. MoMA의 Deconstructivist Architecture, Coop Himmelb(l)au, Zaha Hadid Architects처럼 조각난 패널, 대각선 구획, 프로젝트 인덱스, 불완전한 정렬이 한 화면에서 공간적 긴장을 만들어야 합니다.", + visualFeatures: ["카드와 이미지가 직각 그리드에서 일부 벗어납니다.", "대각선, 잘린 면, 겹친 선이 구조 해체를 보여줍니다.", "흑백 구조 위에 빨강이나 파랑이 방향성을 만듭니다."], + colorPalette: ["콘크리트에 가까운 베이지/회색을 기본으로 둡니다.", "검정 선으로 구조를 잡고 빨강/파랑으로 긴장을 줍니다.", "색보다 면의 분할과 각도가 중요합니다."], + typography: ["굵은 산세리프를 건축 도면처럼 배치합니다.", "짧은 프로젝트명과 번호가 구조감을 만듭니다.", "본문은 작은 캡션처럼 기능적으로 두는 편이 좋습니다."], + layoutTraits: ["전시, 건축, 포트폴리오 페이지에 특히 어울립니다.", "비대칭과 겹침을 쓰되 페이지 탐색 순서는 유지합니다.", "모바일에서는 각진 레이어를 줄이고 프로젝트 카드 순서를 명확히 합니다."], + useCases: ["건축 포트폴리오", "전시 웹사이트", "실험적 브랜드", "프로젝트 아카이브"], + goodFor: ["공간적 긴장감이 필요한 시각 작업", "정적인 그리드에서 벗어나야 하는 포트폴리오", "이미지와 도면이 많은 사이트", "실험적이지만 지적인 인상이 필요한 브랜드"], + cautions: ["모든 요소를 비틀면 읽기 흐름이 사라집니다.", "Anti-Design과 구분하려면 구조적 의도를 보여야 합니다.", "모바일에서 겹침이 텍스트를 가리지 않는지 확인해야 합니다."], + imagePrompt: + "A deconstructivist architecture website reference image with fractured grid, angular panels, concrete neutrals, black structural lines, red and blue accents, project index modules, no logo, no watermark", + research: { + referenceSites: [ + { title: "MoMA - Deconstructivist Architecture", url: "https://www.moma.org/calendar/exhibitions/1813", note: "Historical reference for fragmented structure, broken geometry, spatial tension, and deconstructivist visual principles." }, + { title: "Coop Himmelb(l)au", url: "https://www.coop-himmelblau.at", note: "Architecture reference for angular fragments, asymmetric space, sharp structural overlays, and engineered visual disruption." }, + { title: "Zaha Hadid Architects", url: "https://www.zaha-hadid.com/?lang=en-US", note: "Architecture reference for dynamic deconstructive forms, sharp spatial movement, and complex project-driven visual structure." }, + ], + referenceGalleries: [ + { title: "Pinterest - Deconstructivism Website Design", url: "https://www.pinterest.com/search/pins/?q=deconstructivism%20website%20design", note: "Moodboard reference for broken grids, sliced panels, tilted forms, architectural fragments, and tense editorial composition." }, + { title: "Awwwards - Experimental Websites", url: "https://www.awwwards.com/websites/experimental/", note: "Gallery reference for unconventional structures, fragmented navigation, dynamic composition, and architecture-adjacent web work." }, + { title: "Dribbble - Deconstructivism Web Design", url: "https://dribbble.com/search/deconstructivism%20web%20design", note: "UI reference for angular cards, displaced content blocks, skewed editorial layouts, and fractured hero systems." }, + ], + representativeTraits: ["Fractured architecture grid", "Angular panels", "Structural tension", "Project index rhythm", "Controlled displacement"], + avoidTraits: ["Random anti-design chaos", "Flat brutalist table", "Pure poster collage"], + tokenIntent: + "Use concrete neutrals, hard borders, angular spacing, no radius, and displaced project modules so the style reads as deconstructivist.", + }, + }, + "avant-garde": { + summary: "아방가르드는 기존 웹 관습보다 실험적 타이포그래피와 전위적 구성을 앞세워 문화적 긴장과 새로움을 보여주는 스타일입니다.", + description: + "아방가르드는 장식적 과잉보다 새로운 시각 질서를 제안하는 쪽에 가깝습니다. Serpentine Galleries, Triple Canopy, Walker Art Center처럼 전시/출판/프로그램 정보가 비정형 타이포그래피와 강한 여백, 과감한 색면 안에서 읽히도록 구성합니다.", + visualFeatures: ["대담한 타이포그래피와 비정형 배치가 첫인상을 만듭니다.", "문화 기관처럼 프로그램, 에세이, 전시 모듈이 함께 보입니다.", "강한 원색 면이 개념적 포스터처럼 작동합니다."], + colorPalette: ["아이보리와 검정 구조를 기본으로 둡니다.", "빨강, 파랑, 노랑을 작지만 선명하게 씁니다.", "색은 장식보다 섹션의 개념을 나누는 역할을 합니다."], + typography: ["제목은 크게 쓰되 실험적인 줄바꿈과 블록 배치가 중요합니다.", "본문은 에디토리얼처럼 안정적인 읽기 폭을 유지합니다.", "번호, 날짜, 프로그램 라벨이 강한 그래픽 요소가 됩니다."], + layoutTraits: ["전시 히어로, 프로그램 리스트, 에세이 카드가 함께 구성됩니다.", "정렬은 고정된 격자보다 전위적 리듬을 따릅니다.", "모바일에서는 실험적 배치보다 콘텐츠 순서를 우선합니다."], + useCases: ["미술관", "문화 프로그램", "독립 매거진", "실험적 브랜드 소개"], + goodFor: ["기존 형식과 다른 인상을 줘야 하는 문화 프로젝트", "텍스트와 이미지가 모두 중요한 전시/출판 사이트", "예술적 권위와 새로움을 같이 보여줄 때", "단순한 포스터보다 실제 프로그램 웹이 필요할 때"], + cautions: ["난해함이 탐색 실패로 이어지지 않게 해야 합니다.", "Postmodernism보다 더 개념적이고 덜 장난스럽게 유지합니다.", "실험적 제목이 본문을 가리거나 밀어내지 않게 합니다."], + imagePrompt: + "An avant-garde cultural website reference image with experimental typography, exhibition program modules, ivory black red blue yellow palette, asymmetric editorial structure, no logo, no watermark", + research: { + referenceSites: [ + { title: "Serpentine Galleries", url: "https://www.serpentinegalleries.org", note: "Art institution reference for experimental editorial hierarchy, cultural programming, unexpected rhythm, and contemporary exhibition pages." }, + { title: "Triple Canopy", url: "https://canopycanopycanopy.com/", note: "Publishing reference for conceptual editorial systems, unusual reading pace, art-critical typography, and non-commercial structure." }, + { title: "Walker Art Center", url: "https://walkerart.org", note: "Museum reference for bold cultural navigation, flexible editorial modules, and progressive institutional visual language." }, + ], + referenceGalleries: [ + { title: "Pinterest - Avant Garde Website Design", url: "https://www.pinterest.com/search/pins/?q=avant%20garde%20website%20design", note: "Moodboard reference for experimental typography, art-poster composition, asymmetry, and cultural web layouts." }, + { title: "Awwwards - Experimental Websites", url: "https://www.awwwards.com/websites/experimental/", note: "Gallery reference for forward-looking web work, unusual navigation, expressive typography, and conceptual interaction systems." }, + { title: "Dribbble - Avant Garde Website", url: "https://dribbble.com/search/avant%20garde%20website", note: "UI reference for avant-garde landing pages, editorial experiments, angular typography, and gallery-style modules." }, + ], + representativeTraits: ["Experimental typography", "Cultural program modules", "Conceptual asymmetry", "Primary color accents", "Editorial tension"], + avoidTraits: ["Memphis playfulness", "Random anti-design disorder", "Corporate Swiss neutrality"], + tokenIntent: + "Use strong cultural typography, primary accents, angular editorial modules, and controlled asymmetry so the style reads as avant-garde.", + }, + }, + postmodernism: { + summary: "포스트모더니즘은 Memphis식 패턴, 아이러니한 색 조합, 유희적인 형태를 섞어 규칙을 즐겁게 비트는 스타일입니다.", + description: + "포스트모더니즘은 장난스럽지만 의도적인 혼합입니다. Memphis Milano, Vitra, Design Museum 사례처럼 기하학 패턴, 색면, 둥근/각진 형태, 상품 카드가 서로 다른 시대의 언어를 섞으며 하나의 웹 포털처럼 보여야 합니다.", + visualFeatures: ["Memphis 패턴과 기하학 조각이 강한 식별자가 됩니다.", "카드와 배지는 일부러 서로 다른 형태를 사용합니다.", "색은 밝고 충돌하지만 화면은 유쾌한 질서를 유지합니다."], + colorPalette: ["노랑, 핑크, 민트, 보라 같은 밝은 색을 조합합니다.", "흰색 표면으로 정보 영역을 분리합니다.", "검정 선을 사용해 장난스러운 모양을 묶습니다."], + typography: ["굵은 제목과 작은 제품 라벨을 대비시킵니다.", "세리프보다 그래픽한 산세리프가 잘 맞습니다.", "번호와 가격 같은 기능 텍스트를 장식처럼 활용합니다."], + layoutTraits: ["상품/전시/브랜드 포털처럼 여러 카드가 한 화면에 배치됩니다.", "도형 장식이 카드 주변을 리듬감 있게 감쌉니다.", "모바일에서는 패턴을 줄이고 카드 순서를 명확히 합니다."], + useCases: ["디자인 숍", "전시 굿즈", "문화 브랜드", "컬러풀 제품 랜딩"], + goodFor: ["밝고 아이러니한 브랜드 태도", "상품 자체가 그래픽한 커머스", "디자인 역사나 오브젝트를 소개하는 페이지", "엄격함보다 즐거운 혼합이 중요한 프로젝트"], + cautions: ["Maximalism보다 패턴의 언어가 더 명확해야 합니다.", "Anti-Design처럼 무질서하게 보이면 포스트모던의 유희가 약해집니다.", "텍스트 대비를 반드시 확보해야 합니다."], + imagePrompt: + "A postmodern Memphis-style website reference image with yellow background, geometric pattern pieces, playful product cards, pink mint purple accents, black outline structure, no logo, no watermark", + research: { + referenceSites: [ + { title: "Memphis Milano", url: "https://www.memphis-milano.com", note: "Primary postmodern reference for Memphis forms, bright geometric surfaces, ironic color, and playful product presentation." }, + { title: "Vitra - The Memphis Group", url: "https://www.vitra.com/en-us/magazine/details/the-memphis-group", note: "Design-history reference for postmodern pattern, anti-functional color, expressive furniture, and cultural context." }, + { title: "Design Museum - Memphis: Plastic Field", url: "https://designmuseum.org/exhibitions/memphis-plastic-field", note: "Museum reference for postmodern exhibition framing, graphic motifs, playful material, and Memphis visual vocabulary." }, + ], + referenceGalleries: [ + { title: "Pinterest - Postmodern Memphis Website Design", url: "https://www.pinterest.com/search/pins/?q=postmodern%20website%20design%20memphis", note: "Moodboard reference for Memphis patterns, playful geometry, ironic type, and colorful postmodern web composition." }, + { title: "Awwwards - Colorful Websites", url: "https://www.awwwards.com/websites/colorful/", note: "Closest gallery reference for postmodern-adjacent color, expressive geometry, layered campaign pages, and playful digital rhythm." }, + { title: "Dribbble - Postmodern Website", url: "https://dribbble.com/search/postmodern%20website", note: "UI reference for Memphis cards, mismatched shapes, colorful product modules, and ironic interface treatments." }, + ], + representativeTraits: ["Memphis geometry", "Playful mixed forms", "Ironic color", "Product portal", "Graphic black outlines"], + avoidTraits: ["Generic colorful UI", "Dense maximalist fashion pattern", "Raw brutalist severity"], + tokenIntent: + "Use bright Memphis colors, geometric cards, hard outlines, playful shapes, and product modules so the style reads as postmodernism.", + }, + }, + retro: { + summary: "레트로는 특정 시대의 색, 배지, 둥근 그래픽, 아날로그 미디어 감각을 현대 웹 커머스나 콘텐츠 화면으로 다시 구성하는 스타일입니다.", + description: + "레트로는 과거를 그대로 복사하기보다 현재 웹 구조 안에 향수를 얹는 방식입니다. Poolside FM, Radiooooo, Web Design Museum처럼 둥근 배지, 따뜻한 색, 음악/상품 카드, 오래된 인터페이스 느낌이 실제 탐색 경험으로 이어져야 합니다.", + visualFeatures: ["둥근 배지와 굵은 색면이 향수를 만듭니다.", "상품 카드나 미디어 카드가 아날로그 포스터처럼 보입니다.", "따뜻한 오렌지, 청록, 크림 조합이 첫인상을 잡습니다."], + colorPalette: ["크림과 머스터드를 기본으로 둡니다.", "레드 오렌지와 청록을 대표 포인트로 씁니다.", "갈색 텍스트로 인쇄물 같은 온도를 만듭니다."], + typography: ["둥글고 굵은 제목이 레트로 분위기를 만듭니다.", "짧은 라벨과 배지 텍스트가 잘 어울립니다.", "본문은 현대적인 가독성을 유지해야 합니다."], + layoutTraits: ["미디어 플레이어, 컬렉션 카드, 상품 배지가 한 화면에 배치됩니다.", "곡선과 원형 요소를 사용하되 탐색 구조는 단순하게 둡니다.", "모바일에서는 큰 배지와 주요 카드가 먼저 보여야 합니다."], + useCases: ["음악 서비스", "카페/식음료", "굿즈 커머스", "브랜드 캠페인"], + goodFor: ["친근한 향수를 주고 싶은 브랜드", "문화/음악/식음료 콘텐츠", "과거 감성을 현대적으로 판매하는 커머스", "밝고 쉽게 접근되는 이벤트 페이지"], + cautions: ["70s, 80s, 90s처럼 특정 시대 스타일과 구분해야 합니다.", "낡은 UI를 그대로 쓰면 사용성이 떨어집니다.", "향수 요소보다 실제 콘텐츠 카드가 중심이어야 합니다."], + imagePrompt: + "A retro ecommerce website reference image with warm cream and mustard background, rounded badges, teal and red accents, analog media cards, nostalgic product modules, no logo, no watermark", + research: { + referenceSites: [ + { title: "Poolside FM", url: "https://poolside.fm", note: "Retro web reference for nostalgia, playful media interface, warm color, and intentionally analog browsing cues." }, + { title: "Radiooooo", url: "https://radiooooo.com", note: "Music experience reference for time-travel navigation, nostalgic color, map-like interaction, and retro audio discovery." }, + { title: "Web Design Museum", url: "https://www.webdesignmuseum.org/", note: "Archive reference for historical web aesthetics, period UI patterns, typography, palettes, and layout conventions." }, + ], + referenceGalleries: [ + { title: "Pinterest - Retro Website Design", url: "https://www.pinterest.com/search/pins/?q=retro%20website%20design", note: "Moodboard reference for nostalgic palettes, rounded badges, vintage-inspired web graphics, and playful commerce layouts." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Gallery reference for modern retro web executions, nostalgic imagery, period color, and contemporary interaction polish." }, + { title: "Dribbble - Retro Website", url: "https://dribbble.com/search/retro%20website", note: "UI reference for retro landing pages, badge systems, diner-style cards, and nostalgic product screens." }, + ], + representativeTraits: ["Warm nostalgic palette", "Rounded badges", "Analog media cards", "Simple commerce modules", "Friendly retro rhythm"], + avoidTraits: ["Specific 70s/80s/90s overcoding", "Aged vintage paper", "Y2K gloss"], + tokenIntent: + "Use warm retro colors, rounded badges, medium borders, product/media cards, and friendly spacing so the style reads as general retro.", + }, + }, + vintage: { + summary: "빈티지는 오래된 인쇄물, 헤리티지 배지, 종이 질감, 클래식 카탈로그 구조를 활용해 시간의 깊이를 보여주는 스타일입니다.", + description: + "빈티지는 레트로보다 더 오래되고 물성 있는 쪽입니다. Filson, Levi's, Web Design Museum처럼 헤리티지 제품 카드, 카탈로그 표, 잉크색 텍스트, 배지형 인증 요소가 실제 쇼핑/아카이브 화면으로 구성되어야 합니다.", + visualFeatures: ["종이색 배경과 잉크 같은 텍스트가 오래된 느낌을 만듭니다.", "헤리티지 배지와 카탈로그 행이 브랜드 신뢰를 줍니다.", "사진 영역은 인쇄물처럼 단정한 프레임 안에 놓입니다."], + colorPalette: ["베이지, 크림, 브라운을 기본으로 둡니다.", "딥 레드와 올리브 그린을 오래된 인쇄 포인트로 씁니다.", "새하얀 흰색보다 바랜 종이색이 잘 맞습니다."], + typography: ["세리프 또는 세리프 느낌의 제목이 어울립니다.", "카탈로그 번호, 연도, 원산지 같은 작은 정보가 중요합니다.", "본문은 오래된 안내문처럼 안정적으로 읽혀야 합니다."], + layoutTraits: ["상품 카탈로그, 헤리티지 설명, 아카이브 리스트가 잘 맞습니다.", "장식보다 배지와 라벨이 브랜드의 시간감을 만듭니다.", "모바일에서는 카탈로그 표를 카드형으로 바꿔 읽기 쉽게 둡니다."], + useCases: ["헤리티지 브랜드", "빈티지 숍", "아카이브 페이지", "클래식 제품 커머스"], + goodFor: ["브랜드의 역사와 신뢰를 강조할 때", "제품 원산지와 재료 설명이 중요한 커머스", "아카이브 분위기의 콘텐츠", "새 제품을 오래된 가치로 보이게 할 때"], + cautions: ["낡은 질감만 넣으면 실제 웹 구조가 약해집니다.", "Retro보다 더 차분하고 인쇄물에 가까워야 합니다.", "색 대비가 낮아져 읽기 어려워지지 않게 합니다."], + imagePrompt: + "A vintage heritage catalog website reference image with aged paper background, ink brown serif headings, product archive rows, heritage badges, muted red olive accents, no logo, no watermark", + research: { + referenceSites: [ + { title: "Filson", url: "https://www.filson.com", note: "Heritage retail reference for rugged catalog rhythm, aged neutrals, serif accents, and practical vintage product storytelling." }, + { title: "Levi's", url: "https://www.levi.com", note: "Heritage apparel reference for archival denim tone, classic commerce modules, and vintage Americana brand cues." }, + { title: "Web Design Museum", url: "https://www.webdesignmuseum.org/", note: "Archive reference for older web layouts, historic graphics, period typography, and document-like page structure." }, + ], + referenceGalleries: [ + { title: "Pinterest - Vintage Website Design", url: "https://www.pinterest.com/search/pins/?q=vintage%20website%20design", note: "Moodboard reference for paper texture, muted ink, heritage badges, classic catalog grids, and aged color systems." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Closest gallery reference for vintage and retro web executions, heritage color, editorial pacing, and archival atmosphere." }, + { title: "Dribbble - Vintage Website", url: "https://dribbble.com/search/vintage%20website", note: "UI reference for vintage catalogs, badges, serif headings, paper-like cards, and heritage product pages." }, + ], + representativeTraits: ["Aged paper", "Heritage catalog", "Muted ink palette", "Archive rows", "Vintage badges"], + avoidTraits: ["Bright general retro", "70s psychedelic warmth", "Luxury minimal polish"], + tokenIntent: + "Use aged neutrals, serif display type, paper-like grain, catalog rows, and muted heritage accents so the style reads as vintage.", + }, + }, + "seventies-retro": { + summary: "70년대 레트로는 따뜻한 오렌지, 아보카도 그린, 둥근 곡선, 그루비한 배지를 사용해 편안하고 낙관적인 웹 무드를 만듭니다.", + description: + "70년대 레트로는 일반 Retro보다 시대 신호가 더 분명해야 합니다. Houseplant, Rolling Stone, Web Design Museum 같은 레퍼런스처럼 둥근 프로모션 카드, 물결형 섹션, 따뜻한 제품/이벤트 배지가 실제 브랜드 랜딩으로 작동해야 합니다.", + visualFeatures: ["오렌지와 머스터드가 화면의 기본 온도를 만듭니다.", "곡선, 물결, 둥근 배지가 70년대 감각을 드러냅니다.", "상품이나 이벤트 카드가 느긋한 라이프스타일처럼 보입니다."], + colorPalette: ["머스터드, 오렌지, 크림을 넓게 사용합니다.", "아보카도 그린과 먼지 낀 핑크를 보조색으로 둡니다.", "텍스트는 짙은 브라운으로 인쇄물 같은 안정감을 줍니다."], + typography: ["둥글고 굵은 제목이 잘 어울립니다.", "라벨과 버튼은 부드러운 알약 형태와 맞춥니다.", "본문은 너무 복고적이지 않게 읽기 쉬운 산세리프를 유지합니다."], + layoutTraits: ["히어로, 컬렉션, 이벤트/상품 카드가 느긋하게 이어집니다.", "직선 그리드 안에 곡선 배지를 섞어 시대감을 냅니다.", "모바일에서는 큰 곡선 장식보다 카드 내용을 우선합니다."], + useCases: ["라이프스타일 브랜드", "음악/이벤트", "식음료", "굿즈 커머스"], + goodFor: ["따뜻하고 즐거운 브랜드 첫인상", "음악/카페/홈 제품 캠페인", "너무 세련된 느낌보다 인간적인 분위기", "계절 프로모션"], + cautions: ["Retro와 구분하려면 70s 색과 곡선을 분명히 해야 합니다.", "패턴이 과하면 Maximalism으로 흐릅니다.", "곡선 장식이 CTA를 가리지 않게 해야 합니다."], + imagePrompt: + "A 1970s retro lifestyle website reference image with mustard and orange background, avocado green accents, groovy rounded badges, wavy product cards, warm campaign layout, no logo, no watermark", + research: { + referenceSites: [ + { title: "Houseplant", url: "https://www.houseplant.com", note: "Lifestyle commerce reference for warm 70s color, rounded typography, product character, and relaxed editorial modules." }, + { title: "Rolling Stone", url: "https://www.rollingstone.com", note: "Media reference for 70s cultural heritage, strong editorial identity, music nostalgia, and bold magazine hierarchy." }, + { title: "Web Design Museum", url: "https://www.webdesignmuseum.org/", note: "Archive reference for period web interpretation, old interface rhythm, nostalgic graphics, and historical color cues." }, + ], + referenceGalleries: [ + { title: "Pinterest - 70s Retro Website Design", url: "https://www.pinterest.com/search/pins/?q=70s%20retro%20website%20design", note: "Moodboard reference for groovy curves, warm orange and avocado palettes, psychedelic patterns, and relaxed retro layouts." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Gallery reference for contemporary retro sites that reinterpret 70s color, soft shapes, and nostalgic campaign structure." }, + { title: "Dribbble - 70s Website Design", url: "https://dribbble.com/search/70s%20website%20design", note: "UI reference for 70s landing pages, groovy badges, wavy modules, and warm product cards." }, + ], + representativeTraits: ["Warm orange palette", "Groovy curves", "Rounded promo cards", "Lifestyle nostalgia", "Relaxed campaign rhythm"], + avoidTraits: ["Generic retro badges", "80s neon grid", "Vintage paper archive"], + tokenIntent: + "Use warm 70s colors, rounded shapes, soft badges, normal spacing, and lifestyle commerce cards so the style reads as seventies retro.", + }, + }, + "eighties-retro": { + summary: "80년대 레트로는 어두운 배경, 네온 컬러, 신스웨이브 그리드, 아케이드식 패널을 사용해 전자적인 향수를 만듭니다.", + description: + "80년대 레트로는 밝은 Retro보다 더 야간적이고 전자적입니다. Poolside FM, Cyberpunk 2077, Windows 93처럼 네온 경계, 미디어 콘솔, 아케이드 버튼, 수평 그리드가 실제 인터페이스 안에서 보여야 합니다.", + visualFeatures: ["짙은 남색 배경 위에 핑크와 사이언 네온이 떠오릅니다.", "그리드, 콘솔, 미디어 패널이 신스웨이브 분위기를 만듭니다.", "버튼과 상태값은 아케이드 UI처럼 명확합니다."], + colorPalette: ["다크 네이비와 보라빛 배경을 사용합니다.", "마젠타, 사이언, 전기 노랑을 고대비 포인트로 씁니다.", "흰색 텍스트를 과하게 쓰지 않고 핵심 정보에 집중합니다."], + typography: ["모노스페이스나 각진 산세리프가 잘 맞습니다.", "제목은 크게 쓰되 네온 효과보다 가독성을 우선합니다.", "라벨은 짧고 콘솔처럼 기능적으로 둡니다."], + layoutTraits: ["미디어 콘솔, 이벤트 티켓, 게임/음악 패널에 어울립니다.", "어두운 화면 안에서 카드 경계를 빛으로 나눕니다.", "모바일에서는 네온 장식보다 컨트롤 크기를 우선합니다."], + useCases: ["음악 이벤트", "게임 캠페인", "아케이드 바", "레트로 테크 제품"], + goodFor: ["밤, 음악, 전자적 에너지를 강조할 때", "신스웨이브나 아케이드 코드가 필요한 브랜드", "짧고 강한 이벤트 랜딩", "다크 테마 기반 프로모션"], + cautions: ["Cyberpunk와 구분하려면 도시/디스토피아보다 80s 미디어 콘솔을 강조합니다.", "네온 대비가 과하면 눈이 피로합니다.", "텍스트가 어두운 배경에서 흐려지지 않게 합니다."], + imagePrompt: + "An 1980s retro synthwave website reference image with dark navy stage, neon magenta cyan grid, arcade control panels, media console widgets, electric yellow accents, no logo, no watermark", + research: { + referenceSites: [ + { title: "Poolside FM", url: "https://poolside.fm", note: "Interface reference for 80s media nostalgia, lo-fi desktop cues, bright controls, and playful analog-digital interaction." }, + { title: "Cyberpunk 2077 Official", url: "https://www.cyberpunk.net", note: "Commercial reference for neon futurist palettes, dark interface panels, sci-fi campaign hierarchy, and high-contrast digital drama." }, + { title: "Windows 93", url: "https://windows93.net", note: "Desktop-web reference for retro OS windows, pixel-era controls, playful app framing, and 80s/90s digital nostalgia." }, + ], + referenceGalleries: [ + { title: "Pinterest - 80s Retro Website Design", url: "https://www.pinterest.com/search/pins/?q=80s%20retro%20website%20design", note: "Moodboard reference for neon grids, synthwave gradients, VHS graphics, and arcade-style web surfaces." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Gallery reference for retro-futurist and 80s-inspired sites, neon motion, dark stages, and nostalgic interaction cues." }, + { title: "Dribbble - Synthwave Website", url: "https://dribbble.com/search/synthwave%20website", note: "UI reference for synthwave dashboards, neon panels, arcade buttons, and dark retro digital layouts." }, + ], + representativeTraits: ["Neon synth grid", "Dark media console", "Arcade controls", "Magenta cyan contrast", "Electric event energy"], + avoidTraits: ["General warm retro", "Glitch corruption", "Y2K glossy plastic"], + tokenIntent: + "Use dark backgrounds, neon accents, mono labels, glow shadows, and console panels so the style reads as eighties retro.", + }, + }, + "nineties-graphic": { + summary: "90년대 그래픽은 초기 웹, 데스크톱 창, 스티커 같은 그래픽, 강한 패턴을 섞어 활기 있는 디지털 향수를 만듭니다.", + description: + "90년대 그래픽은 Y2K보다 덜 광택 있고 더 거칠고 그래픽합니다. Space Jam 1996, Windows 93, Web Design Museum처럼 창 프레임, 굵은 스티커, 패턴 배경, 이미지 중심 네비게이션이 실제 웹 페이지처럼 보여야 합니다.", + visualFeatures: ["창 프레임과 스티커형 라벨이 초기 웹 느낌을 만듭니다.", "청록, 보라, 형광 노랑 같은 색이 강하게 충돌합니다.", "패턴과 작은 그래픽 조각이 배경과 카드에 섞입니다."], + colorPalette: ["청록과 노랑을 넓은 배경/표면에 사용합니다.", "보라, 오렌지, 형광 라임을 스티커 포인트로 씁니다.", "검정 선으로 요소를 명확히 묶습니다."], + typography: ["굵고 압축되지 않은 산세리프가 잘 맞습니다.", "작은 윈도우 타이틀과 버튼 라벨이 시대감을 줍니다.", "본문은 짧고 그래픽 블록 안에 배치합니다."], + layoutTraits: ["데스크톱 창, 메뉴 바, 스티커 카드, 링크 그리드가 함께 보입니다.", "비정형적이지만 실제 클릭 가능한 화면처럼 구성합니다.", "모바일에서는 창을 겹치기보다 세로 카드로 정리합니다."], + useCases: ["문화 캠페인", "음악/패션 드롭", "청소년 브랜드", "레트로 디지털 이벤트"], + goodFor: ["밝고 거친 디지털 향수", "초기 웹/데스크톱 감성을 쓰는 브랜드", "스티커와 패턴 자산이 많은 캠페인", "Y2K보다 더 그래픽하고 덜 광택 있는 분위기"], + cautions: ["Space Jam식 초기 웹을 그대로 복제하면 사용성이 떨어집니다.", "Y2K와 구분하려면 크롬 광택보다 창/스티커/패턴을 강조합니다.", "패턴이 텍스트를 방해하지 않게 합니다."], + imagePrompt: + "A 1990s graphic website reference image with teal background, desktop window cards, sticker labels, loud patterns, purple orange neon accents, early web navigation, no logo, no watermark", + research: { + referenceSites: [ + { title: "Space Jam 1996", url: "https://www.spacejam.com/1996/", note: "Historic web reference for 90s graphics, tiled backgrounds, image-heavy navigation, and early-web composition." }, + { title: "Windows 93", url: "https://windows93.net", note: "Retro desktop reference for playful window chrome, pixel controls, chaotic app surfaces, and 90s computing nostalgia." }, + { title: "Web Design Museum", url: "https://www.webdesignmuseum.org/", note: "Archive reference for historical 90s web layouts, visual tropes, browser-era UI, and graphic density." }, + ], + referenceGalleries: [ + { title: "Pinterest - 90s Graphic Website Design", url: "https://www.pinterest.com/search/pins/?q=90s%20graphic%20website%20design", note: "Moodboard reference for loud patterns, early digital graphics, sticker-like elements, and zine-style web layouts." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Gallery reference for modern retro sites that reinterpret 90s web energy, collage density, and graphic nostalgia." }, + { title: "Dribbble - 90s Website Design", url: "https://dribbble.com/search/90s%20website%20design", note: "UI reference for 90s landing pages, desktop windows, bold stickers, and high-energy graphic modules." }, + ], + representativeTraits: ["Desktop window cards", "Sticker graphics", "Loud pattern", "Early web navigation", "Teal-purple energy"], + avoidTraits: ["Y2K chrome gloss", "80s neon synth grid", "Vintage paper catalog"], + tokenIntent: + "Use loud 90s colors, thick window borders, sticker labels, compact cards, and patterned blocks so the style reads as nineties graphic.", + }, + }, + y2k: { + summary: "Y2K는 크롬 광택, 젤리 같은 색, 버블 패널, 초기 인터넷의 미래 낙관주의를 결합한 2000년대 초반 웹 스타일입니다.", + description: + "Y2K는 90년대 그래픽보다 더 매끈하고 미래적인 광택이 중요합니다. Web Design Museum의 Y2K 아카이브, Blingee, Windows 93처럼 반짝이는 버튼, 둥근 포털 카드, 파스텔 사이버 색, 장식적 위젯이 실제 웹 포털로 구성되어야 합니다.", + visualFeatures: ["버블형 패널과 글로시한 표면이 핵심 신호입니다.", "파스텔 블루, 핑크, 라임이 밝은 미래감을 만듭니다.", "포털, 프로필, 위젯 같은 작은 모듈이 화면을 채웁니다."], + colorPalette: ["아이스 블루와 흰색을 밝은 기본으로 둡니다.", "핑크와 라임을 장식/상태 포인트로 씁니다.", "테두리는 회청색으로 살짝 기술적인 느낌을 줍니다."], + typography: ["굵고 둥근 제목이 잘 어울립니다.", "작은 위젯 라벨과 버튼 텍스트는 또렷해야 합니다.", "긴 본문보다 짧은 포털 메뉴와 상태 텍스트가 효과적입니다."], + layoutTraits: ["포털 대시보드, 프로필 카드, 위젯, 배너가 함께 보입니다.", "카드는 둥글고 반짝이는 표면처럼 처리합니다.", "모바일에서는 위젯을 2열 이하로 줄여 가독성을 지킵니다."], + useCases: ["음악/패션 캠페인", "커뮤니티 포털", "레트로 테크 브랜드", "Z세대 이벤트"], + goodFor: ["초기 인터넷과 미래 낙관주의를 함께 보여줄 때", "밝고 장식적인 디지털 브랜드", "작은 위젯이 많은 랜딩", "Y2K 패션/음악/콘텐츠 캠페인"], + cautions: ["90s Graphic과 구분하려면 스티커보다 광택/버블/포털을 강조합니다.", "반짝임이 과하면 주요 정보가 묻힙니다.", "낮은 대비의 파스텔 텍스트는 피해야 합니다."], + imagePrompt: + "A Y2K web portal reference image with glossy bubble panels, ice blue background, pink and lime accents, chrome-like buttons, early 2000s widgets, no logo, no watermark", + research: { + referenceSites: [ + { title: "Web Design Museum - Y2K Aesthetic", url: "https://www.webdesignmuseum.org/exhibitions/y2k-aesthetic-in-web-design", note: "Archive reference for early-2000s web design, chrome effects, optimistic digital color, and period interface conventions." }, + { title: "Blingee", url: "https://www.blingee.com", note: "Living web reference for glitter graphics, decorative internet nostalgia, shiny surfaces, and participatory Y2K visual culture." }, + { title: "Windows 93", url: "https://windows93.net", note: "Retro desktop reference for playful legacy UI, pixel controls, layered windows, and early web nostalgia." }, + ], + referenceGalleries: [ + { title: "Pinterest - Y2K Website Design Inspiration", url: "https://www.pinterest.com/ideas/y2k-website-design-inspiration/893524089634/", note: "Moodboard reference for chrome, gradients, bubble type, glitter, plastic surfaces, and early-2000s web optimism." }, + { title: "Awwwards - Y2K Websites", url: "https://www.awwwards.com/websites/y2k/", note: "Gallery reference for contemporary Y2K web executions, glossy gradients, nostalgic interfaces, and cyber-pop visual systems." }, + { title: "Dribbble - Y2K Website", url: "https://dribbble.com/search/y2k%20website", note: "UI reference for Y2K landing pages, shiny cards, bubble navigation, chrome-like widgets, and playful web portals." }, + ], + representativeTraits: ["Glossy bubble panels", "Early web portal", "Pastel cyber color", "Chrome buttons", "Widget density"], + avoidTraits: ["90s sticker windows", "80s neon darkness", "General retro warmth"], + tokenIntent: + "Use glossy rounded panels, pastel cyber accents, gradient effect, medium spacing, and widget-like portal cards so the style reads as Y2K.", + }, + }, + "retro-futurism": { + summary: "레트로 퓨처리즘은 과거가 상상한 미래를 둥근 우주선 패널, 빈티지 기술 색, 낙관적인 여행 UI로 재구성하는 스타일입니다.", + description: + "레트로 퓨처리즘은 미래적이지만 차갑지 않고, 과거의 우주 시대 낙관주의가 보여야 합니다. Retro Futurism, Paleofuture, Web Design Museum 같은 아카이브를 바탕으로 우주 여행 예약, 궤도 지도, 둥근 계기판, 크림/코랄/터쿼이즈 조합을 실제 랜딩 화면으로 구성합니다.", + visualFeatures: ["둥근 계기판과 티켓형 카드가 과거의 미래감을 만듭니다.", "코랄, 터쿼이즈, 크림, 네이비가 우주 시대 팔레트를 구성합니다.", "로켓, 궤도, 시간표 같은 정보 모듈이 실제 서비스처럼 보입니다."], + colorPalette: ["짙은 네이비를 우주 배경처럼 사용합니다.", "크림과 골드를 따뜻한 미래 표면으로 둡니다.", "코랄과 터쿼이즈를 행동/경로 포인트로 씁니다."], + typography: ["모노스페이스나 기계식 라벨이 잘 어울립니다.", "제목은 굵지만 둥근 미래 낙관주의가 느껴져야 합니다.", "수치, 출발 시간, 궤도 라벨을 작은 정보 단위로 둡니다."], + layoutTraits: ["우주 여행 예약, 비행 콘솔, 제품 티저, 전시 랜딩에 어울립니다.", "둥근 패널과 표 형태의 일정 정보가 함께 보여야 합니다.", "모바일에서는 티켓, 경로, CTA 순서로 명확히 구성합니다."], + useCases: ["테크 캠페인", "전시 랜딩", "게임/엔터테인먼트", "미래형 제품 티저"], + goodFor: ["미래적이지만 따뜻하고 낙관적인 브랜드", "우주/교통/기술 은유가 필요한 랜딩", "아카이브와 현대 서비스를 연결하는 프로젝트", "레트로와 미래를 함께 보여줘야 하는 캠페인"], + cautions: ["Cyberpunk처럼 어둡고 디스토피아적으로 가면 방향이 달라집니다.", "일반 Retro보다 우주/기술/시간표 모듈이 보여야 합니다.", "장식적 행성만 있으면 실제 웹 화면처럼 보이지 않습니다."], + imagePrompt: + "A retro futurism space travel website reference image with navy background, rounded spacecraft control panels, cream ticket cards, coral turquoise accents, orbit schedule modules, no logo, no watermark", + research: { + referenceSites: [ + { title: "Retro Futurism", url: "https://retro-futurism.com/", note: "Archive reference for past visions of the future, space-age graphics, optimistic technology motifs, and period futurist imagery." }, + { title: "Paleofuture", url: "https://paleofuture.com/", note: "Cultural archive reference for historical future speculation, mid-century technology imagery, and optimistic space-age narrative." }, + { title: "Web Design Museum", url: "https://www.webdesignmuseum.org/", note: "Archive reference for historical digital aesthetics, period UI systems, and older web interpretations of future-facing design." }, + ], + referenceGalleries: [ + { title: "Pinterest - Retro Futurism Website Design", url: "https://www.pinterest.com/search/pins/?q=retro%20futurism%20website%20design", note: "Moodboard reference for space-age curves, chrome panels, pastel planets, vintage technology, and optimistic future nostalgia." }, + { title: "Awwwards - Retro Websites", url: "https://www.awwwards.com/websites/retro/", note: "Closest gallery reference for retro-futurist web execution, nostalgic future visuals, playful motion, and modern polish." }, + { title: "Dribbble - Retro Futurism Website", url: "https://dribbble.com/search/retro%20futurism%20website", note: "UI reference for space-age landing pages, rocket dashboards, rounded control panels, and future-nostalgia product screens." }, + ], + representativeTraits: ["Space-age optimism", "Rounded control panels", "Orbit schedule cards", "Warm future palette", "Travel-console CTA"], + avoidTraits: ["Cyberpunk dystopia", "Generic retro badges", "Y2K plastic gloss"], + tokenIntent: + "Use navy space backgrounds, rounded panels, mono labels, warm cream ticket cards, coral and turquoise accents, and schedule modules so the style reads as retro futurism.", + }, + }, }; function hashSlug(slug: string) { @@ -997,33 +1683,129 @@ const styleTokenOverrides: Record decoration: { shadow: "none", effect: "grain" }, layout: { heroVariant: "split", navStyle: "minimal", alignment: "left" }, }, + "soft-minimal": { + typography: { weightDisplay: 500, weightBody: 400, tracking: "0em", headingScale: 0.92 }, + shape: { radius: "20px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "1.5rem", padScale: 1.45 }, + decoration: { shadow: "0 18px 40px rgb(var(--st-text-rgb) / 0.06)", effect: "none" }, + layout: { heroVariant: "left", navStyle: "minimal", alignment: "left" }, + }, + "high-end-minimal": { + typography: { displayFont: '"Georgia", "Times New Roman", serif', weightDisplay: 400, weightBody: 300, tracking: "0em", headingScale: 0.88 }, + shape: { radius: "0px", radiusPill: "9999px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "airy", gap: "2rem", padScale: 1.75 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "split", navStyle: "minimal", alignment: "left" }, + }, "brutalism": { - typography: { weightDisplay: 900, tracking: "-0.05em" }, - shape: { radius: "0px", borderWidth: "4px" }, - decoration: { shadow: "6px 6px 0 var(--st-primary)", effect: "none" }, + typography: { weightDisplay: 900, weightBody: 600, tracking: "0em", headingScale: 1.22 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "4px", borderStyle: "solid" }, + space: { density: "tight", gap: "0.55rem", padScale: 0.82 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "left", navStyle: "underline", alignment: "left" }, }, "new-brutalism": { - typography: { weightDisplay: 900, weightBody: 600, tracking: "-0.06em", headingScale: 1.32 }, - shape: { radius: "0px", radiusPill: "0px", borderWidth: "5px" }, - space: { density: "tight", gap: "0.35rem", padScale: 0.78 }, + typography: { weightDisplay: 900, weightBody: 650, tracking: "0em", headingScale: 1.18 }, + shape: { radius: "6px", radiusPill: "6px", borderWidth: "4px", borderStyle: "solid" }, + space: { density: "tight", gap: "0.55rem", padScale: 0.88 }, decoration: { shadow: "8px 8px 0 var(--st-accent)", effect: "none" }, + layout: { heroVariant: "split", navStyle: "boxed", alignment: "left" }, + }, + "anti-design": { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.14 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "3px", borderStyle: "dashed" }, + space: { density: "tight", gap: "0.45rem", padScale: 0.78 }, + decoration: { shadow: "5px -5px 0 var(--st-accent-2)", effect: "grain" }, + layout: { heroVariant: "left", navStyle: "boxed", alignment: "left" }, + }, + "maximalism": { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.12 }, + shape: { radius: "4px", radiusPill: "4px", borderWidth: "2px", borderStyle: "double" }, + space: { density: "tight", gap: "0.55rem", padScale: 0.92 }, + decoration: { shadow: "4px 4px 0 var(--st-accent), -4px -4px 0 var(--st-accent-2)", effect: "grain" }, + layout: { heroVariant: "center", navStyle: "boxed", alignment: "left" }, }, "glitch-art": { - typography: { bodyFont: '"SFMono-Regular", monospace', weightDisplay: 800, tracking: "0.02em", headingScale: 1.22 }, + typography: { displayFont: '"SFMono-Regular", monospace', bodyFont: '"SFMono-Regular", monospace', weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.16 }, shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "dashed" }, space: { density: "tight", gap: "0.45rem", padScale: 0.82 }, decoration: { shadow: "3px 0 0 var(--st-accent), -3px 0 0 var(--st-accent-2)", effect: "glitch" }, + layout: { heroVariant: "split", navStyle: "boxed", alignment: "left" }, }, - "cyberpunk": { - typography: { bodyFont: '"SFMono-Regular", monospace', tracking: "0.02em" }, - shape: { radius: "2px", borderWidth: "1px" }, - decoration: { shadow: "0 0 24px rgb(var(--st-accent-rgb) / 0.6)", effect: "glow" }, + deconstructivism: { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.1 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.8rem", padScale: 0.95 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "split", navStyle: "underline", alignment: "left" }, + }, + "avant-garde": { + typography: { weightDisplay: 800, weightBody: 450, tracking: "0em", headingScale: 1.12 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "1rem", padScale: 1.0 }, + decoration: { shadow: "none", effect: "none" }, + layout: { heroVariant: "left", navStyle: "underline", alignment: "left" }, + }, + postmodernism: { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.05 }, + shape: { radius: "10px", radiusPill: "9999px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.8rem", padScale: 1.0 }, + decoration: { shadow: "5px 5px 0 var(--st-accent-2)", effect: "none" }, + layout: { heroVariant: "center", navStyle: "boxed", alignment: "left" }, + }, + retro: { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.02 }, + shape: { radius: "24px", radiusPill: "9999px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "1rem", padScale: 1.05 }, + decoration: { shadow: "4px 4px 0 var(--st-accent-2)", effect: "none" }, + layout: { heroVariant: "center", navStyle: "boxed", alignment: "center" }, + }, + vintage: { + typography: { displayFont: '"Georgia", "Times New Roman", serif', weightDisplay: 600, weightBody: 400, tracking: "0em", headingScale: 0.96 }, + shape: { radius: "2px", radiusPill: "2px", borderWidth: "1px", borderStyle: "double" }, + space: { density: "airy", gap: "1.25rem", padScale: 1.2 }, + decoration: { shadow: "none", effect: "grain" }, + layout: { heroVariant: "left", navStyle: "underline", alignment: "left" }, + }, + "seventies-retro": { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.04 }, + shape: { radius: "28px", radiusPill: "9999px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "1rem", padScale: 1.08 }, + decoration: { shadow: "4px 6px 0 var(--st-accent-3)", effect: "none" }, + layout: { heroVariant: "center", navStyle: "boxed", alignment: "center" }, + }, + "eighties-retro": { + typography: { displayFont: '"SFMono-Regular", monospace', bodyFont: '"SFMono-Regular", monospace', weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.08 }, + shape: { radius: "4px", radiusPill: "4px", borderWidth: "1px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.85rem", padScale: 0.98 }, + decoration: { shadow: "0 0 22px rgb(var(--st-accent-rgb) / 0.45)", effect: "glow" }, + layout: { heroVariant: "split", navStyle: "boxed", alignment: "left" }, + }, + "nineties-graphic": { + typography: { weightDisplay: 900, weightBody: 600, tracking: "0em", headingScale: 1.1 }, + shape: { radius: "0px", radiusPill: "0px", borderWidth: "3px", borderStyle: "solid" }, + space: { density: "tight", gap: "0.6rem", padScale: 0.9 }, + decoration: { shadow: "5px 5px 0 var(--st-accent-3)", effect: "none" }, + layout: { heroVariant: "split", navStyle: "boxed", alignment: "left" }, + }, + "y2k": { + typography: { weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.08 }, + shape: { radius: "18px", radiusPill: "9999px", borderWidth: "2px", borderStyle: "solid" }, + space: { density: "normal", gap: "0.8rem", padScale: 1.0 }, + decoration: { shadow: "0 14px 26px rgb(var(--st-accent-rgb) / 0.24)", effect: "gradient" }, + layout: { heroVariant: "center", navStyle: "boxed", alignment: "left" }, }, "retro-futurism": { - typography: { bodyFont: '"SFMono-Regular", monospace', weightDisplay: 800, tracking: "0.03em", headingScale: 1.12 }, - shape: { radius: "14px", radiusPill: "9999px", borderWidth: "2px" }, + typography: { displayFont: '"SFMono-Regular", monospace', bodyFont: '"SFMono-Regular", monospace', weightDisplay: 800, weightBody: 500, tracking: "0em", headingScale: 1.02 }, + shape: { radius: "18px", radiusPill: "9999px", borderWidth: "2px", borderStyle: "solid" }, space: { density: "normal", gap: "0.9rem", padScale: 1.08 }, decoration: { shadow: "0 0 22px rgb(var(--st-accent-rgb) / 0.45)", effect: "gradient" }, + layout: { heroVariant: "split", navStyle: "boxed", alignment: "left" }, + }, + "cyberpunk": { + typography: { bodyFont: '"SFMono-Regular", monospace', tracking: "0.02em" }, + shape: { radius: "2px", borderWidth: "1px" }, + decoration: { shadow: "0 0 24px rgb(var(--st-accent-rgb) / 0.6)", effect: "glow" }, }, "neon-noir": { typography: { bodyFont: '"SFMono-Regular", monospace', weightDisplay: 700, tracking: "0.04em", headingScale: 1.08 }, @@ -1100,18 +1882,6 @@ const styleTokenOverrides: Record space: { density: "normal", gap: "1rem", padScale: 1.2 }, decoration: { shadow: "12px 12px 24px rgb(var(--st-text-rgb) / 0.12), -12px -12px 24px rgb(var(--st-surface-rgb) / 0.9)", effect: "none" }, }, - "y2k": { - typography: { weightDisplay: 800, tracking: "-0.02em", headingScale: 1.15 }, - shape: { radius: "12px", borderWidth: "2px" }, - space: { density: "normal", gap: "0.75rem", padScale: 1.0 }, - decoration: { shadow: "3px 3px 0 var(--st-accent)", effect: "gradient" }, - }, - "maximalism": { - typography: { weightDisplay: 800, tracking: "-0.03em", headingScale: 1.2 }, - shape: { radius: "4px", borderWidth: "2px" }, - space: { density: "tight", gap: "0.5rem", padScale: 0.9 }, - decoration: { shadow: "4px 4px 0 var(--st-accent), -4px -4px 0 var(--st-accent-2)", effect: "grain" }, - }, "swiss-design": { typography: { weightDisplay: 700, weightBody: 400, tracking: "0em", headingScale: 1.02 }, shape: { radius: "0px", radiusPill: "0px", borderWidth: "2px", borderStyle: "solid" }, From acdc009c0a095d372e436e85dd272cfe670a0712 Mon Sep 17 00:00:00 2001 From: pandaofwild Date: Thu, 4 Jun 2026 20:19:49 +0900 Subject: [PATCH 10/14] Refine retro futurism style direction --- ...026-06-04-representative-style-redesign.md | 1 + scripts/style-references.json | 1 + .../DesignStyleSampleRenderer.tsx | 78 +++++++++++++++---- src/data/designStyles.ts | 45 +++++------ 4 files changed, 86 insertions(+), 39 deletions(-) diff --git a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md index d10e4d9..3ba865d 100644 --- a/docs/superpowers/plans/2026-06-04-representative-style-redesign.md +++ b/docs/superpowers/plans/2026-06-04-representative-style-redesign.md @@ -1004,3 +1004,4 @@ git commit -m "Document representative style research workflow" - [x] 2026-06-04: Completed the second per-style pass for `modernism`: added Bauhaus-Archiv, MoMA, Vitra, AIM, Pinterest, Awwwards, and Dribbble references; separated it from quiet minimalism with functional grid, primary color blocks, black structure, explicit copy, palette, tokens, research brief, and a dedicated web-like sample renderer; verified desktop and mobile renders with Playwright. - [x] 2026-06-04: Completed the next modern/minimal pass through `warm-minimal`: added Swiss, International, Scandinavian, Japandi, and Warm Minimal references; rewrote copy, palettes, tokens, research briefs, and dedicated web-like sample renderers; fixed mobile card overflow; verified `/styles` plus all five detail pages at desktop and 390px mobile. - [x] 2026-06-04: Completed the next representative pass through `retro-futurism`: added references, copy, palettes, token overrides, and dedicated web-like samples for `soft-minimal`, `high-end-minimal`, `brutalism`, `new-brutalism`, `anti-design`, `maximalism`, `glitch-art`, `deconstructivism`, `avant-garde`, `postmodernism`, `retro`, `vintage`, `seventies-retro`, `eighties-retro`, `nineties-graphic`, `y2k`, and `retro-futurism`. Verified targeted references for 24 styles, data, lint, build, and browser QA across `/styles` plus the 17 detail pages at desktop and 390px mobile. Reference capture completed for target real-site sources after replacing inaccessible URLs with captureable equivalents. +- [x] 2026-06-04: Refined `retro-futurism` after visual review: added NASA JPL `Visions of the Future` as a primary reference; moved the style away from dark sci-fi console language toward Space Age travel-poster advertising, Atomic/Googie motifs, cream/coral/turquoise color, ticket-style destination cards, and browser-verified desktop/mobile rendering. diff --git a/scripts/style-references.json b/scripts/style-references.json index 3042d89..05e0f0e 100644 --- a/scripts/style-references.json +++ b/scripts/style-references.json @@ -238,6 +238,7 @@ "retro-futurism": { "sites": [ + { "url": "https://www.jpl.nasa.gov/galleries/visions-of-the-future/", "title": "NASA JPL - Visions of the Future", "note": "Official space-tourism poster reference for retro-future travel advertising, WPA-inspired composition, optimistic destinations, and scientific imagination." }, { "url": "https://retro-futurism.com/", "title": "Retro Futurism", "note": "Archive reference for past visions of the future, space-age graphics, optimistic technology motifs, and period futurist imagery." }, { "url": "https://paleofuture.com/", "title": "Paleofuture", "note": "Cultural archive reference for historical future speculation, mid-century technology imagery, and optimistic space-age narrative." }, { "url": "https://www.webdesignmuseum.org/", "title": "Web Design Museum", "note": "Archive reference for historical digital aesthetics, period UI systems, and older web interpretations of future-facing design." } diff --git a/src/components/design-style/DesignStyleSampleRenderer.tsx b/src/components/design-style/DesignStyleSampleRenderer.tsx index 5797de0..db45dcc 100644 --- a/src/components/design-style/DesignStyleSampleRenderer.tsx +++ b/src/components/design-style/DesignStyleSampleRenderer.tsx @@ -1155,32 +1155,76 @@ function Y2KGlossPortal({ className, compact = false, style }: Props) { } function RetroFuturismFlightDeck({ className, compact = false, style }: Props) { - const legs = ["Orbit", "Dock", "Return"]; + const destinations = compact ? ["Moon", "Mars", "Titan"] : ["Lunar resort", "Mars canyons", "Titan seas"]; return ( -
-
-
- Orbital departures - Gate 07 -
-
-
+
+