브랜드 시스템은(는) 무엇을 하나요?
사용 준비가 완료된 종합적인 시각 및 편집 레퍼런스: 색상, 타이포그래피, 그라데이션, 컴포넌트, 로고 규칙, 외부 문서 어조, 산출물 구조. 클라이언트, 잠재 고객 또는 외부 대상에게 제공되는 모든 출력에 적용됩니다.
이 값들은 기본값입니다. 프로젝트에 자체 가이드라인이 있을 경우, 먼저 해당 가이드라인을 읽고 토큰(팔레트, 폰트, 로고)을 대체하십시오: 구성 규칙, 어조, 산출물 구조는 그대로 유효합니다.
전반적인 정신: 수단의 경제, 넉넉한 여백, 높은 가독성의 타이포그래피, 스위스 및 바우하우스 미학.
참고 파일:
references/tokens.css및references/tokens.json: 아래 토큰들을 가져올 준비가 된 상태로 제공합니다.references/charte.png(및.svg): 팔레트, 타이포그래피, 컴포넌트가 보드에 표시되어 있습니다.
1. 팔레트
| 역할 | Hex | 비고 |
|---|---|---|
| 로고 색상 | #295FEC | 로고 전용 |
| 기본 색상 (CTA, 링크, 강조) | #3D65E8 | 인터페이스, 강조 텍스트, 버튼 |
| 밝은 전체 배경 | #EBEFF7 | 콘텐츠 슬라이드 배경, 배너 |
| 오프-화이트 배경 (그라데이션 기준) | #F8F9FB | 그라데이션이 있는 슬라이드 및 페이지 기준 |
| 표면, 카드 | #FFFFFF | 카드, 블록, 박스 |
| 가벼운 표면 블록 | #F0F2F7 | 그리드 내 카드 |
| 주요 텍스트 | #111827 | 본문, 어두운 제목 |
| 보조 텍스트 | #6B7280 | 라벨, 캡션, 메타데이터 |
| 상태 녹색 | #22C55E | 긍정적 표시 |
매체당 하나의 강조 색상 레벨만 사용: 기본 색상.
2. 배경 그라데이션
밝은 표면과 슬라이드에 적용되는 부드러운 방사형 그라데이션. 미묘하게 유지됩니다: 언뜻 보기에는 보이지 않습니다.
background: radial-gradient(
ellipse at 85% 10%,
rgba(180, 215, 245, 0.55) 0%,
rgba(200, 230, 252, 0.25) 35%,
transparent 65%
), #F8F9FB;
/* 두 반대쪽 모서리를 사용한 변형 */
background:
radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
#F8F9FB;
PPTX에서는: 슬라이드 배경 #F8F9FB, 오른쪽 상단 모서리에 방사형 그라데이션 채우기, 시작 색상 #B4D7F5 불투명도 55%, 투명으로 전환.
3. 컴포넌트
버튼
- 기본 동작: 알약 형태(반경 999px), 기본 색상 배경, 흰색 텍스트, 오른쪽 화살표 아이콘.
- 보조 동작: 알약, 흰색 배경, 가벼운 테두리, 어두운 텍스트, 오른쪽 화살표 아이콘.
카드
- 흰색 또는 가벼운 표면 배경, 반경 16px, 부드러운 그림자, 뚜렷한 테두리 없음.
- 메타데이터: 연도를 보조 텍스트로, 그 다음 점 구분자(예: "2024 · 프로젝트명").
- 제목은 세미볼드, 본문은 레귤러, 링크는 아래쪽에 보조 텍스트.
4. 타이포그래피
| 용도 | 폰트 | 굵기 |
|---|---|---|
| 주요 제목 | Inter | Black 900 또는 ExtraBold 800 |
| 부제목, 라벨 | Inter | SemiBold 600 |
| 본문 텍스트 | Inter | Regular 400 |
| 메타데이터, 캡션 | Inter | Regular 400, 보조 텍스트 |
우선 대체 폰트: Public Sans. 시스템 대체: Geist, SF Pro, Helvetica Neue. 세리프 또는 장식용 폰트 없음.
5. 아이콘
Phosphor Icons 또는 Lucide, 맥락에 따라 Regular 또는 Light 굵기. 산출물에 이모지 사용 금지.
6. 로고
프로젝트 로고는 프로젝트와 함께 제공됩니다: 이 스킬에는 로고 파일이 포함되어 있지 않습니다. 모든 로고에 적용되는 사용 규칙:
- 슬라이드, 색상 배경 커버: 왼쪽 상단에 로고타입, 흰색 버전이 있다면 사용, 심볼 높이 36~40px.
- 콘텐츠 슬라이드, 밝은 배경: 심볼만 사용하거나 완전한 로고타입을 페이지 하단에, 높이 20~24px, 보조 텍스트, 왼쪽 하단 정렬.
- Word 문서: 첫 페이지 헤더에 로고타입, 왼쪽 정렬, 높이 28~32px, 늘리지 않음.
- 웹 아티팩트: 인라인 SVG 심볼, 32px, 웹사이트 링크 포함.
- 보호 여백: 심볼 높이의 최소 1배를 각 측면에 확보, 이 영역에 텍스트나 그래픽 요소 없음.
- 금지 사항: 로고를 변형하거나 늘리기, 로고 색상 외의 색상이나 흰색으로 다시 칠하기, 흐리거나 저해상도 버전 사용, 명암 대비가 충분하지 않은 배경 위에 배치.
7. 외부 문서 어조
- 동등한 관계(peer-to-peer), 결코 거만하거나 상업적이지 않음.
- 정확하고 구체적: 실제 사례, 지표, 관찰 가능한 메커니즘.
- 대중화하지 않으면서 접근 가능. 전문성은 과장된 표현이 아닌 정확성에서 드러납니다.
- 필진의 태도를 위해
sober-writing을, 프랑스어 텍스트를 위해francais-parfait를 함께 적용하세요.
모든 외부 문서에서 금지: "열정적인", "결과 지향적인", "가치 창출자", 자기 칭찬 위주의 3인칭 약력, 맥락이나 증거 없는 기술 목록, 많이 약속하고 거의 설명하지 않는 에이전시 톤.
8. 산출물 구조
제안서, 원페이지
- 자신에 대한 소개 없이 클라이언트의 맥락과 과제.
- 개입 포인트와 그 메커니즘.
- 산출물과 마일스톤.
- 요금 및 조건.
- 관련 레퍼런스(유사 사례).
사례 연구
- 시작 상황: 지표, 제약 조건, 조직.
- 내린 결정과 그 이유.
- 측정 가능한 결과.
- 다르게 했을 수 있는 점.
전문 약력 (80~100단어)
- 역할과 차별화 포인트로 시작.
- 구체적인 증거 2~3가지: 클라이언트, 결과, 맥락.
- 현재 가용성 또는 전문 분야로 마무리.
영업 이메일 : 수신자에게 특화된 제목; 본문 80~120단어, 수신자의 상황에 대한 관찰, 직접적인 제안, 명확한 행동 촉구 포함.
Word 문서 : 헤더에 로고타입, 프로젝트 연락처 정보가 포함된 바닥글, 본문은 Inter 또는 Public Sans, 제목은 세미볼드, 하나의 강조 색상만 사용, 장식적 요소 없음.
9. slides 및 pptx와 함께 사용하기
세 가지 스킬, 세 가지 역할:
| 스킬 | 역할 |
|---|---|
brand-system (현재 스킬) | 아이덴티티: 팔레트, 타이포그래피, 그라데이션, 컴포넌트, 로고, 어조 |
slides | 레이아웃: 15가지 레이아웃, 내러티브 구조, 제목 |
pptx (Anthropic 스킬, 별도 설치 필요) | .pptx 파일의 기술적 생성 |
프레젠테이션을 제작하는 절차:
brand-system을 읽어 토큰을 설정합니다(또는 프로젝트의 토큰으로 대체).slides를 읽어 덱 구조와 레이아웃을 선택하고, 이 토큰을 적용합니다.pptx를 읽어 파일을 생성하고, 처음 두 스킬의 값을 적용합니다.slides의 검증을 통해 슬라이드별로 결과를 제어합니다(이미지로 내보내기).
10. 모든 산출물 전 검증
- 포지셔닝은 자격 설명이 아닌 증거에 기반해야 합니다.
- 어조는 동등한 관계(peer-to-peer)이며 상업적이지 않아야 합니다.
- 로고는 사용 규칙과 여백을 준수해야 합니다.
- 로고 색상(#295FEC)과 인터페이스 강조 색상(#3D65E8)은 구분되어야 합니다.
- 타이포그래피는 Inter 또는 Public Sans만 사용해야 합니다.
- 이모지, 줄표(em dash), 공허한 유행어가 없어야 합니다.
sober-writing이 적용되었고, 프랑스어 텍스트에는francais-parfait도 적용되었습니다.