Master CSS 브랜드
Master CSS의 마크, 금색, 글꼴, 문체와 원본 이미지 및 사용 규칙입니다.
이 페이지의 내용
#정체성
Master CSS는 개발자와 AI 에이전트를 위한 마크업 기반 CSS 오케스트레이션 언어입니다. 정체성도 제품과 같은 약속을 합니다. 결정은 명시적이고 관계는 읽을 수 있으며 세부 요소는 연결됩니다.
- 명확함을 앞에 둡니다. 작업이 우선이며 텍스트, 코드, 데이터는 각자 분명한 자리를 가집니다.
- 읽을 수 있는 시스템입니다. 공유 값, 일정한 리듬, 의도적인 상태가 각 부분을 연결합니다.
- 정밀함에 따뜻함을 더합니다. 구조는 중립적으로 유지하고 금색으로 작고 알아보기 쉬운 온기를 더합니다.
이 페이지는 마크, 금색, 글꼴, 문체를 정의합니다. 디자인 시스템은 이를 재질, 컨트롤, 레이아웃, 동작으로 인터페이스에 적용합니다.
#로고
M 마크와 가로형 로고타입이 시그니처입니다. 좁은 공간에서는 마크만 사용하고 이름을 읽어야 하는 곳에서는 로고타입으로 Master CSS를 소개합니다. 둘 다 승인된 Master 브랜드 정체성 v2 이미지를 사용하며 밝은 배경용과 어두운 배경용 버전이 있습니다.
가로형 로고타입
| 이미지 | SVG 캔버스 | 최소 크기 | 여백 |
|---|---|---|---|
| 마크 | 216.6 × 120 | 높이 24px | 마크 높이의 절반 |
| 소형 마크 | 216.6 × 120 | 높이 16px 이상 24px 미만 | 마크 높이의 절반 |
| 가로형 로고타입 | 1197.53 × 130.26 | 높이 16px 또는 인쇄 너비 25mm | 워드마크 x-height 1개 |
| 입체 이미지 | — | 마크 높이 64px 이상 | 평면 버전과 같음 |
최소 크기
실제 CSS 픽셀로 표시
소형 마크 · 16px마크 · 24px로고타입 · 16px제공된 이미지를 사용하고 비율을 유지하며 배경에 맞는 버전을 선택하세요.
다시 그리거나 늘이거나 회전하거나 색을 바꾸거나 효과를 추가하지 말고 텍스트와 가장자리가 여백에 들어오지 않게 하세요.
#색상
금색은 브랜드를 식별하고 주변 인터페이스는 중립적으로 유지합니다. 각 화면에는 마크나 중요한 동작 옆의 단일 신호처럼 하나의 금색 초점을 두세요. 상태와 읽기 쉬운 내용은 말로 전달합니다.
#FDE2A7 → #E6B65D#FCDD98 → #E6B65D--color-amber-40두 마크 버전은 부드러운 날개 음영과 샴페인색에서 금색으로 이어지는 세로 그라데이션을 공유합니다. 제공된 SVG의 모든 색상 지점을 유지하세요. 중립 역할, 재질, 상태 색상은 디자인 시스템에, 전체 팔레트는 색상 참조에 있습니다.
#타이포그래피
인터페이스와 라틴 문자에는 Geist, 번체 중국어에는 Noto Sans TC, 코드·식별자·정렬된 숫자에는 IBM Plex Mono를 사용합니다. 글꼴을 사용할 수 없으면 시스템 sans-serif 또는 monospace로 대체합니다.
중국어 자간은 자연스럽게 유지하고 변하거나 정렬되는 값에는 표 형식 숫자를 사용하세요. 긴 제목은 줄이지 말고 줄바꿈하세요. 글자 크기 척도는 텍스트 참조에 있습니다.
#문체
사려 깊은 협업자처럼 쓰세요. 독자의 작업에서 시작해 대상을 정확히 이름 짓고 결과를 쉬운 말로 설명하세요. 주장은 제품으로 입증할 수 있는 범위에 두세요.
| 맥락 | 명확하고 유용한 표현 | 피할 표현 |
|---|---|---|
| 제품 소개 | class 이름과 디자인 토큰으로 마크업에 스타일을 작성하세요. | 궁극적이고 혁신적인 스타일링 경험. |
| 동작 안내 | 색상 변수를 복사하세요. | 팔레트의 모든 잠재력을 깨우세요. |
| 결과 설명 | var(--color-amber-40)을 복사했습니다. | 성공! 모든 준비가 끝났습니다. |
| 번체 중국어 작성 | 在標記中編寫樣式，使用共用的設計 tokens。 | 透過極致創新的方案，全面賦能設計體驗。 |
영문 제목은 문장형 대문자 표기를 사용하고 본문에서는 “Master CSS”로 씁니다. 영어와 번체 중국어는 같은 의미를 전달하며 API 이름과 class 문자열은 그대로 유지합니다. 메시지는 일어난 일과 필요할 때 유용한 다음 동작을 설명합니다.
#다운로드
글, 동영상, 문서, 통합 페이지에서 로고타입과 마크를 사용하세요. 각 파일은 투명 SVG입니다. 배경에 맞는 버전을 선택하고 비율을 유지하세요.
#로고타입
어두운 배경용 로고타입
밝은 글자와 샴페인색에서 금색으로 이어지는 마크입니다.
밝은 배경용 로고타입
어두운 글자와 샴페인색에서 금색으로 이어지는 마크입니다.
#마크
어두운 배경용 마크
높이 24px 이상을 위한 표준 평면 마크입니다.
밝은 배경용 마크
높이 24px 이상을 위한 표준 평면 마크입니다.
어두운 배경용 소형 마크
높이 16px 이상 24px 미만을 위해 간격을 넓힌 마크입니다.
밝은 배경용 소형 마크
높이 16px 이상 24px 미만을 위해 간격을 넓힌 마크입니다.
전체 키트에는 세로형 시그니처, 워드마크, 단색·입체 이미지, PNG 내보내기, 아이콘, 소셜 이미지와 사용 안내 및 소스 manifest가 추가됩니다. 작성 도구와 AI 에이전트는 이 페이지를 Markdown으로 읽을 수 있습니다.
#상표 정책
“Master CSS”, Master CSS 로고 및 관련 마크는 Aoyue Design이 소유한 상표입니다. 프로젝트와 커뮤니티를 나타내므로 다음 지침에 따라 사용해 주세요.
#허용되는 사용
- 교육 콘텐츠, 블로그 글, 튜토리얼, 오픈 소스 도구에서 “Master CSS”를 언급할 수 있습니다.
- 프로젝트를 “built with Master CSS”, “powered by Master CSS”, “compatible with Master CSS”라고 설명할 수 있습니다.
- 블로그 글, 동영상, 인터페이스 모형, 플러그인 문서에 로고를 표시하거나 Master CSS 통합 및 지원을 나타내는 데 사용할 수 있습니다.
- 원래 가로세로 비율을 유지하며 로고 크기를 조절할 수 있습니다.
#허용되지 않는 사용
mastercss-tools.io나Master CSS UI처럼 제품, 도메인, 회사 이름에 “Master CSS”나 로고를 사용할 수 없습니다.- 공식 파트너십 없이 프로젝트를 공식 또는 공인된 것으로 제시할 수 없습니다.
- 서면 동의 없이 티셔츠나 스티커 등을 판매하거나 상품에 로고를 넣을 수 없습니다.
- 로고의 색상, 모양, 방향을 바꾸거나 그림자, 그라데이션 등 시각 효과를 추가할 수 없습니다.
- 자신의 로고나 제품 정체성의 일부로 사용할 수 없습니다.
#이름 표기
이름은 Master CSS로 씁니다. 예를 들어 “Built with Master CSS”나 “Powered by Master CSS”처럼 사용하세요. mastercss, MASTERcss, CSSMaster로 쓰지 마세요.