← 목록

버건디 아틀리에 (Burgundy Atelier)

출처	Rubus (건설/부동산 협업 SaaS) 피처 섹션 디자인 시스템
날짜	2026-07-09
카테고리	web
태그	웜크림, 버건디세리프, 카드기반, 세이지그린액센트, SaaS

🗣️ 이렇게 말하세요

"2번(버건디 아틀리에 (Burgundy Atelier)) 스타일로 만들어줘"

에이전트용 정본: ~/design-team/references/web/rubus-burgundy-atelier-20260709.md

📦 실제 적용 사례

클로드 설치 가이드 (2페이지 전자책)
2026-07-09
이 스타일로 실제 납품된 첫 결과물 (라이브 발행 전, 로컬)
~/design-team/deliverables/클로드설치가이드/index.html

색상	토큰	HEX
	background	#FDF8F5
	heading	#4A1D1F
	accent	#3D4A3D
	ctaButton	#8B3A3E
	divider	#E8DDD8

역할	폰트	비고
heading	Playfair Display	Italic, leading-tight — 헤딩·서명 전용
body	시스템 sans	regular, leading-relaxed — UI 텍스트 전반

Design System — Rubus 스타일 가이드

레퍼런스 등록: 2026-07-09 · 디자인명 버건디 아틀리에 (Burgundy Atelier) · 출처: Rubus(건설/부동산 협업 SaaS) 피처 섹션에서 추출한 디자인 시스템

건설/부동산 협업 SaaS 플랫폼의 피처 섹션에서 추출한 디자인 시스템 문서입니다. 따뜻한 크림 배경 위에 딥 버건디 세리프 헤딩을 얹은, 신뢰감 있고 클래식한 무드가 핵심입니다.

관찰 체크리스트 (레퍼런스 충실 프로토콜 1단계)

#	항목	레퍼런스는? (관찰)
1	레이아웃 형태 (싱글페이지 스크롤 / 페이지 넘김 / 단 구성·본문 폭)	`max-w-6xl mx-auto` 컨테이너, 피처 카드 `grid-cols-1 md:grid-cols-2`, 하단 2단(`gap-12 items-center`) — 섹션형 랜딩 피처 블록
2	네비게이션 (상단/측면 고정 여부, 목차 점프, 따라다님)	해당 없음 (피처 섹션만 발췌한 문서, 네비게이션 범위 밖)
3	현재 위치·진도 표시 (스크롤 진도바, "N/M", 현재 장 하이라이트)	해당 없음 (정적 디자인 시스템 문서)
4	인터랙션 (목차 접기·펼치기, 긴 표/섹션 토글, 부드러운 앵커 스크롤)	섹션 진입 페이드+슬라이드(`opacity 0→1, y 20→0`, `whileInView` 1회), 구분선 `scaleX 0→1`, 카드 스태거(`staggerChildren 0.15`), 링크 호버 시 화살표 `translate-x-1`
5	색·타이포 (강조색, 폰트 위계, 박스 색 구분)	웜 크림 배경(`#FDF8F5`)+딥 버건디 헤딩(`#4A1D1F`)+세이지 그린 보조 액센트(`#3D4A3D`), 라이트/다크 풀 토큰 세트. Playfair Display 이탤릭 세리프 헤딩 + 시스템 sans 본문
6	도식·일러스트 (흐름도/다이어그램 스타일, 인라인 SVG vs 이미지)	바 차트(마지막 바만 진한색, 나머지 연한색), 라인 차트(SVG quadratic 곡선 + 원형 끝점 마커)
7	콜아웃 박스 (팁/주의/단계/인용 등 정보 유형별 박스)	상태 컬러 도트(그린=수신/긍정, 레드=철회/미해결), 옐로 태그(필터/라벨, `yellowTag` 배경)
8	반응형·모바일 (좁은 화면 동작)	텍스트 단계적 축소(`text-3xl → md:text-4xl → lg:text-5xl`), 그리드 `grid-cols-1 → md:grid-cols-2`
9	표지·간지 (키비주얼, 챕터 도입)	해당 없음 (피처 섹션만 발췌, 표지 개념 없음)

1. 디자인 컨셉

무드: 따뜻함, 신뢰, 장인정신 (Warm · Trustworthy · Craftsmanship)
시그니처: Playfair Display 이탤릭 세리프 헤딩 + 버건디/세이지 그린의 절제된 액센트
원칙: 카드 기반 정보 구조, 낮은 채도의 배경, 상태 표시에만 원색(그린/레드) 사용

2. 컬러 토큰

2.1 Light Mode

토큰	HEX	용도
`background`	`#FDF8F5`	페이지 배경 (웜 크림)
`cardBackground`	`#FFFFFF`	카드 배경
`heading`	`#4A1D1F`	대형 세리프 헤딩 (딥 버건디)
`subheading`	`#1F1F1F`	카드 제목, 강조 텍스트
`description`	`#6B6B6B`	본문, 설명 텍스트
`divider`	`#E8DDD8`	구분선, 카드 보더
`link`	`#8B3A3E`	링크 (버건디)
`linkHover`	`#6A2C2F`	링크 호버
`accent`	`#3D4A3D`	보조 액션 버튼 (세이지 그린)
`accentHover`	`#2D3A2D`	보조 버튼 호버
`ctaButton`	`#8B3A3E`	주요 CTA 버튼
`ctaButtonHover`	`#6A2C2F`	CTA 호버
`yellowTag`	`#F5E6B0`	필터/태그 배경
`yellowTagText`	`#8B7A3D`	태그 텍스트
`greenDot`	`#22C55E`	긍정 상태 (수신, 상승)
`redDot`	`#EF4444`	부정 상태 (철회, 미해결)
`chartLine`	`#8B3A3E`	차트 주 색상
`chartLineLight`	`#D4B5A0`	차트 보조 색상

2.2 Dark Mode

토큰	HEX	용도
`background`	`#1A1A1A`	페이지 배경
`cardBackground`	`#2A2A2A`	카드 배경
`heading`	`#F5E6E0`	헤딩 (웜 화이트)
`subheading`	`#FFFFFF`	카드 제목
`description`	`#A0A0A0`	본문
`divider`	`#444444`	구분선
`link` / `ctaButton`	`#E8A0A4`	링크·CTA (로즈 핑크로 반전)
`linkHover` / `ctaButtonHover`	`#F5C0C4`	호버
`accent`	`#6B8B6B`	보조 버튼
`accentHover`	`#8BAB8B`	보조 버튼 호버
`yellowTag`	`#4A4535`	태그 배경
`yellowTagText`	`#F5E6B0`	태그 텍스트
`greenDot` / `redDot`	`#22C55E` / `#EF4444`	상태 컬러 (모드 무관 고정)
`chartLine`	`#E8A0A4`	차트 주 색상
`chartLineLight`	`#6B5A50`	차트 보조 색상

다크 모드 규칙: 버건디 → 로즈 핑크, 세이지 → 라이트 세이지로 명도 반전. 상태 컬러(그린/레드)는 두 모드에서 동일하게 유지.

3. 타이포그래피

역할	폰트	스타일	크기
Display 헤딩	Playfair Display (serif)	Italic, `leading-tight`	`text-3xl` → `md:text-4xl` → `lg:text-5xl`
섹션 서브헤딩	Playfair Display	Italic	`text-2xl` → `md:text-3xl` → `lg:text-4xl`
카드 제목	시스템 sans	`font-semibold`	`text-lg`
본문/설명	시스템 sans	regular, `leading-relaxed`	`text-sm`
메타/라벨/캡션	시스템 sans	regular 또는 `font-medium`	`text-xs`
서명(장식)	Playfair Display	Italic	`text-lg`
지표 숫자	시스템 sans	`font-semibold`	`text-2xl`

헤딩은 whiteSpace: pre-line으로 의도적 줄바꿈(\n)을 지원.
세리프 이탤릭은 헤딩·서명 등 "브랜드 목소리"에만 사용하고, UI 텍스트는 전부 sans로 처리.

4. 레이아웃 & 스페이싱

컨테이너: max-w-6xl mx-auto, 섹션 패딩 py-16 md:py-24, 좌우 px-6 md:px-12 lg:px-24
그리드: 피처 카드 grid-cols-1 md:grid-cols-2 gap-8, 하단 2단 gap-12 items-center
카드: p-6 rounded-xl shadow-sm (내부 미니 카드: p-3~4 rounded-lg border)
구분선: 헤딩 아래 전폭 1px 라인 (h-px, divider 컬러)
수직 리듬: 헤딩 → 8 (mb-8) → 구분선 → 12 (mb-12) → 카드 그리드 → 16 (mb-16) → 하단 섹션

5. 컴포넌트 패턴

5.1 피처 카드

흰 카드(제품 UI 미리보기) + 카드 밖 하단에 제목/설명 배치. 설명은 카드 안이 아니라 카드 아래 px-2 에 두는 것이 특징.

5.2 버튼

종류	스타일
Primary CTA	`ctaButton` 배경, 흰 텍스트, `rounded`, 아이콘+텍스트 `gap-1.5`, `text-xs px-3 py-1.5`
Secondary	`accent`(세이지) 배경, 흰 텍스트
Outline	1px `divider` 보더, `description` 컬러 텍스트
텍스트 링크	`link` 컬러 + `ChevronRight` 아이콘, 호버 시 `translate-x-1`

5.3 상태 표시

컬러 도트(●) + 라벨 조합: 그린 = 수신/긍정, 레드 = 철회/미해결
지표 변화: ▲ 8.6%(그린), ▼ -20%(그린 — 감소가 긍정일 때도 그린 사용)

5.4 태그/필터

옐로 배경(yellowTag) + 다크 옐로 텍스트, rounded, 아이콘 동반, text-xs font-medium

5.5 아바타

w-8 h-8 rounded-full + 파스텔 그라디언트 (from-orange-200 to-orange-300 등 인물별 상이한 색)

5.6 차트

바 차트: 얇은 바, 마지막(현재) 바만 chartLine 진한 색, 나머지는 chartLineLight
라인 차트: SVG quadratic 곡선 + 끝점 원형 마커, strokeWidth 2

6. 아이콘

라이브러리: lucide-react
크기: 10–16px (매우 작게, 텍스트 보조 용도)
사용 아이콘: Plus, Filter, Clock, Check, ChevronRight, Pen, X

7. 모션 (motion/react)

패턴	값
섹션 진입	`opacity 0→1, y 20→0`, `duration 0.6`, `whileInView` + `viewport={{ once: true }}`
구분선	`scaleX 0→1`, `duration 0.8`, `delay 0.2`
카드 스태거	컨테이너 `staggerChildren: 0.15`, 아이템 `y 20→0`, `duration 0.5`
하단 섹션	`y 30→0`, `duration 0.6`
링크 호버	화살표 `translate-x-1` 마이크로 인터랙션

원칙: 모든 진입 애니메이션은 스크롤 트리거 1회만 실행. 화려한 효과 대신 페이드+슬라이드의 절제된 조합.

8. 컴포넌트 API 컨벤션

interface Props {
  mode?: "light" | "dark";          // 테마는 prop으로 주입
  title?: string;                    // "\n"으로 줄바꿈 제어
  features?: { title: string; description: string }[];
  // ... 모든 카피는 기본값을 가진 optional prop
}

컬러는 COLORS[mode] 객체에서 조회해 인라인 style로 적용 (Tailwind 유틸은 레이아웃·타이포 전용)
파일 상단 CUSTOMIZATION 블록에 브랜드 토큰을 모아 수정 지점을 한 곳으로 집중