Design Language Pack for Creators · v1.17

DLPC

웹 · 앱 · 랜딩 · 콘텐츠에 바로 쓰는
15가지 완성형 디자인 시스템이에요.

FREE OPEN NO SIGN-UP CSS 2-LINE

Glassmorphism

data-theme="purple-haze"

반투명 backdrop-blur + 보라 그라디언트.
프리미엄 SaaS · 한정판 · 럭셔리 product에 딱 맞아요.

미리보기 →

Editorial

data-theme="editorial"

Linear · Vercel · Stripe 감성의 큰 타이포 + 미니멀.
블로그 · 뉴스 · 개발자 도구에 어울려요.

미리보기 →

Tonal

data-theme="tonal"

Tonal — Google Material 풍 tonal + elevation의 tonal palette + elevation 5단계.
일반 SaaS · 모바일 친화 서비스에 맞아요.

미리보기 →

Candy Plastic

data-theme="candy-plastic"

1998~2003 캔디 시대 — Bondi Blue + 5 컬러 + glossy.
노스탤지아 · 크리에이티브 툴 · 레트로 앱에 어울려요.

미리보기 →

Memphis 80s

data-theme="memphis"

80s 기하학 도형 + 핑크/노랑/민트 컬러 폭발.
음악 · 패션 · 갤러리 · 예술적 프로덕트에 맞아요.

미리보기 →

Brutalist

data-theme="brutalist"

raw 강한 대비 · asymmetric · thick border · 0 radius.
에이전시 · 패션 · 예술적 포트폴리오에 어울려요.

미리보기 →

Terminal

data-theme="terminal"

mono only · amber paper · ink green · $ 메타포.
개발자 도구 · 콘솔 앱 · 마니아 프로덕트에 맞아요.

미리보기 →

Neumorphism

data-theme="neumorphism"

soft dual shadow · embossed/depressed · 저채도 단일 컬러.
명상 · 웰니스 · 미니멀 대시보드에 어울려요.

미리보기 →

Neo-Brutalism

data-theme="neo-brutalism"

캔디 파스텔 + pure black 보더 + offset shadow.
인디 SaaS · 크리에이터 도구 · 1인 제품에 어울려요.

미리보기 →

Claymorphism

data-theme="claymorphism"

부풀어 오른 점토 · 3중 inset shadow · 큰 radius.
웰니스 · 키즈 · 게임 · 명상 앱에 어울려요.

미리보기 →

Bento

data-theme="bento"

Apple 비대칭 grid · 펄 베이스 · 절제된 액센트.
SaaS 피처 랜딩 · 포트폴리오 · 제품 소개에 어울려요.

미리보기 →

Frutiger Aero

data-theme="frutiger-aero"

Aqua glossy 버튼 · frosted glass · 하늘+에메랄드 팔레트.
자연/환경 SaaS · 뮤직 플레이어 · Gen Z 노스탤지아에 어울려요.

미리보기 →

Cyberpunk

data-theme="cyberpunk-dark"

네온 마젠타+시안 · vaporwave grid · RGB 글리치 · 다크 메인.
인디 게임 · 일렉트로닉 뮤직 · 이스포츠 · NFT/Web3에 어울려요.

미리보기 →

Swiss

data-theme="swiss"

기하학 정밀 · 거대 숫자 · 단일 빨강 액센트 · Helvetica.
미술관 · 건축 사무소 · 럭셔리 갤러리 · 출판사에 어울려요.

미리보기 →

Aurora

data-theme="aurora"

다중 radial blob mesh · grain texture · glass overlay.
AI 스타트업 · ML 도구 · 모던 SaaS hero · 크리에이티브 포트폴리오에 어울려요.

미리보기 →

직접 만져보세요

컴포넌트 + 테마를 실시간으로 조합해보고 코드 한 번에 복사.

🎛

컴포넌트 플레이그라운드

14 컴포넌트 + 6 섹션 프리셋을 직접 편집 — 텍스트·variant·배경·카드 개수까지 자유롭게. 15 테마 × Light/Dark 즉시 전환. 완성 HTML 한 번 복사로 어디든 붙여넣기.

열기 →

템플릿 & 도구

완성된 페이지 예시 + 테마 비교.

⊞

15 테마 비교

같은 mini hero 를 15 테마에 나란히. Light/Dark 토글.

열기 → 📊

대시보드 템플릿

사이드바 + breadcrumb + KPI + 차트 + 알림 — Bento 테마.

열기 → 💰

가격표 템플릿

3티어 + monthly/annual 토글 + FAQ — Aurora 테마.

열기 → 📰

블로그 템플릿

featured post + 필터 + 6 카드 grid — Editorial 테마.

열기 →

이 디자인들을 내 프로젝트에 적용하는 방법

Creator OS에 에이전트에게 말 한마디면 끝이에요. 복잡한 코드는 몰라도 돼요.

🎨
Creator-OS › # designer
# designer
🔔 📌 👥
🙋
ryan_creator 오늘 오후 2:34

@designer Memphis 스타일로 10장짜리 캐로셀 만들어줘

🙋
ryan_creator 오늘 오후 2:41

@designer Terminal 스타일로 PDF 파일 만들어줘

#designer 에게 메시지 보내기
＋ 😊 🎁

다른 방법도 있어요

CSS 2줄 + 테마 한 줄이면 즉시 적용돼요.

Claude · Cursor · Copilot 사용 중이라면

프롬프트 한 줄로 적용

아래 URL을 프롬프트에 붙여주면 AI가 알아서 세팅해줘요.

memphis 테마로 랜딩 페이지 만들어줘.
CSS는 아래 2줄 import해서 사용해:
https://design-tokens.creator-os.app/design-tokens.css
https://design-tokens.creator-os.app/design-components.css

Claude Code · Cursor · GitHub Copilot · Windsurf 등 어느 AI 코딩 도구에서도 동일하게 작동해요.

직접 코드 작업을 한다면

2단계로 즉시 적용

① <head> 에 CSS 2줄 추가

<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-tokens.css">
<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-components.css">

② <body> 에 테마 지정

<body data-theme="purple-haze">
<!-- editorial · tonal · candy-plastic
     memphis · brutalist
     terminal-dark · neumorphism -->

③ 클래스 이름만 붙이면 테마 스타일 자동 적용

<main class="demo-page">
  <section class="section">

    <h1 class="hero__title">타이틀</h1>
    <p  class="hero__sub">부제목</p>

    <button class="button button--primary">버튼</button>
    <article class="card card--accent">카드</article>
    <input   class="input" placeholder="입력">
    <span    class="tag tag--success">태그</span>

    <div class="stat">
      <p class="stat__label">라벨</p>
      <p class="stat__value">42</p>
    </div>

  </section>
</main>

data-theme 한 줄만 바꾸면 위 클래스 전체가 그 테마로 자동 전환돼요. Framer · Wix 커스텀 코드에도 동일하게 작동해요.