ModigenceVision Design System

로고·색·서체 규칙, 웹·IR 덱·제품 UI 세 레지스터의 시각 원칙, 견본 카드, PowerPoint 사양을 한곳에 모았습니다. 회사 자료를 만들 때 이 페이지의 규칙과 카드를 기준으로 삼습니다.

정본은 Claude Design 프로젝트 「ModigenceVision Design System」이고, 이 사이트는 그 내보내기를 담은 GitHub 저장소 ModigenceVision/design-system의 main 브랜치를 그대로 보여 줍니다.

사내 전용 · 회사 계정 로그인 뒤에만 열립니다 · 외부 공유 금지

Start here

읽는 순서

처음이라면 가이드를 먼저 읽고, 작업할 레지스터의 카드로 내려갑니다. 값 하나가 헷갈릴 때는 토큰 CSS 원문이 최종 기준입니다.

브랜드 맥락, 세 레지스터, 콘텐츠 규칙, 시각 원칙, 이미지·아이콘 규칙, 견본 카드 전부, 토큰 원문. 브라우저에서 읽는 판입니다.

같은 내용의 인쇄판. A4 34쪽, 본문 검색 가능. 오프라인이나 인쇄가 필요할 때 씁니다.

덱 레지스터를 PowerPoint 단위(pt·cm·배수·투명도)로 옮긴 서식 파일. 슬라이드 견본은 아래 카드의 Slides 그룹에 있습니다.

Registers

공통 규칙을 먼저 읽고, 지금 만드는 것이 어느 레지스터인지 정한 뒤 그 규칙만 따릅니다. 한 화면에 두 레지스터를 섞지 않습니다.

레지스터	어디에	겉모습	기준 파일
Deck	IR·회사소개 슬라이드, PowerPoint	검정 + 흰색 + 회색, 얇은 선 카드, 슬라이드마다 작은 파란 포인트 하나	`slides/deck.css` · `ppt-*` 카드
Web	modigencevision.com	순수 뉴트럴, 모서리 0, 그림자 없음, 굵기 600 상한, 로고의 파랑 둘만 포인트	`tokens/web.css` · `web-*` 카드 · 사이트 저장소
Product UI	대시보드·콘솔·React 컴포넌트	푸른 기운 그레이 위 흰 카드, 10–24px 모서리, 푸른 그림자, 파란 채움 버튼	`tokens/colors.css` · `spacing.css` · `components/`

Specimen cards

Claude Design의 Design System 탭에 있는 카드 전부를 그룹 순서대로 실었습니다. 각 카드는 원본 HTML을 그대로 축소해 보여 주며, 「원본 열기」로 실제 크기의 파일을 엽니다. 목록은 _ds_manifest.json에서 읽습니다.

카드 목록을 불러오는 중입니다.

Files

CSS를 쓰는 곳은 styles.css 하나만 링크합니다. 이 파일이 토큰 다섯을 순서대로 불러옵니다.

styles.css — 진입점. 아래 토큰 다섯을 @import
tokens/web.css — 웹 레지스터 변수(사이트에서 그대로 추출)
tokens/typography.css — IBM Plex Sans · Noto Sans KR · IBM Plex Mono, 크기·굵기·자간
tokens/colors.css — 브랜드 블루 스케일, 쿨 뉴트럴, 상태색, 그라디언트
tokens/spacing.css — 4px 그리드, 모서리, 테두리, 그림자, 모션, 컨테이너
tokens/base.css — HTML 요소 기본값
readme.md — 가이드 원문(Markdown)
github.md — 웹사이트 저장소와의 대응표, 동기화 기록
SKILL.md — 에이전트용 요약(레지스터 고르기, 가드레일)
assets/ — 로고, MARU 마크, 파트너 로고, 제품 렌더, 장면 사진, 팀 사진
slides/index.html — 샘플 슬라이드 8장 격자 미리보기(덱 레지스터의 실물 예시)

Maintenance

규칙은 Claude Design 프로젝트에서 고치고, 여기에는 내보내기를 옮겨 담습니다. 이 저장소에서 직접 고치면 다음 내보내기 때 사라집니다.

Claude Design 프로젝트 「ModigenceVision Design System」에서 규칙·카드·자산을 고친다.
프로젝트를 zip으로 내보내 저장소 작업본에 풀어 덮어쓴다. 큰 내보내기 파일(샘플 덱 pptx, IR 덱 HTML)과 작업 찌꺼기(tmp_pptx/), uploads/의 덱 원본 PDF는 용량 때문에 제외한다 — 목록은 AGENTS.md.
인쇄 가이드를 다시 만든다: python3 exports/build-guide-pdf.py
main에 push한다. 이 사이트는 자동으로 갱신된다.

웹 레지스터 규칙은 여기서 먼저 바꾸지 않습니다. 사이트 저장소에서 바꾼 뒤 tokens/web.css와 web-* 카드를 다시 추출합니다(github.md).