// SQNC DESIGN SYSTEM · 2026

Sqnc Design System

WELLNESS PLATFORM · DESIGN SYSTEM · 2026

Sqnc Design System

발견하고, 참여하고, 개최하라.
웰니스 경험을 연결하는 플랫폼의 시각 언어.

시작하기 → 플랫폼 개념 보기
0px
Border Radius

날카로운 직선 모서리. 장식 없이 구조로 말한다.

B/W
Color Palette

흑과 백만으로 모든 위계를 표현한다. 색이 아닌 형태가 말한다.

3
Core Flows

Browse · Join · Host — 발견하고, 참여하고, 개최하라. 모든 UI는 이 세 흐름을 위해 존재한다.

20+
Components

즉시 사용 가능한 UI 컴포넌트. CSS 한 줄로 전체 시스템을 불러온다.

02 / PLATFORM CONCEPT

세 가지 경험

Sqnc는 웰니스 행사를 중심으로 사람과 경험을 잇는 플랫폼이다.

Core User Flows
01

Browse — 발견하다

요가, 명상, 러닝, 영양 워크샵 등 다양한 웰니스 행사를 탐색하고 나에게 맞는 경험을 찾는다.

02

Join — 참여하다

관심있는 행사에 간편하게 신청한다. 일정, 장소, 참여 인원 정보를 한눈에 확인하고 바로 합류한다.

03

Host — 개최하다

누구나 자신의 웰니스 행사를 열 수 있다. 강사, 커뮤니티 리더, 일반인 모두 개최자가 될 수 있다.

Design Philosophy
절제 — 웰니스는 과잉이 없다. 디자인도 마찬가지다. 색과 장식을 걷어내고 경험에 집중한다.
명확 — 행사 정보, 참여 버튼, 일정 안내. 사용자가 다음 행동을 즉시 알 수 있어야 한다.
연결 — 플랫폼의 본질은 사람과 경험을 잇는 것. UI는 그 연결의 조용한 매개체다.
03 / COLOR SYSTEM

색은 둘이다

웰니스는 과잉이 없다. 흑과 백. 나머지는 경험이 채운다.

White #ffffff
Off White #f8f8f8
Muted #999999
Secondary #555555
Black #000000

화려한 색이 아닌 구조로 정보를 전달한다.
행사 콘텐츠가 디자인보다 앞에 선다.

04 / TYPOGRAPHY

글자가 경험을 안내한다

무게(Weight)로 위계를, 크기로 집중을 만든다.

900 새벽 명상 클래스 — Dawn Yoga
700 도심 러닝 크루 · 2026 Spring
500 영양 워크샵 — 내 몸에 맞는 식단 만들기
400 행사 상세 안내 및 참여 방법. 누구나 신청 가능하며, 정원은 20명입니다. — Open to all levels, 20 spots available.
MONO WELLNESS — EVENT — SQNC — 2026.05 — BROWSE · JOIN · HOST
05 / ACTIONS

참여를 이끌다

참여 신청, 행사 개최 — 모든 인터랙션의 기본 단위.

Button
Badge & Tag
모집중 마감임박 완료 개최자
요가 명상 러닝 영양 필라테스
06 / FEEDBACK

상태를 전달하다

행사의 모든 순간 — 안내 · 완료 · 주의 · 마감

새로운 웰니스 이벤트가 등록되었습니다. 내 관심 카테고리의 행사를 지금 살펴보세요.
이벤트 참가 신청이 완료되었습니다. 함께하는 경험을 기대해주세요.
해당 이벤트 신청 마감이 24시간 이내입니다. 빠르게 신청해보세요.
신청 가능 인원이 마감되었습니다. 다음 회차 또는 다른 이벤트를 확인해보세요.
07 / DATA DISPLAY

플랫폼의 활동을 보다

누적 이벤트
0
+18.2%
활성 참여자
0
+9.4%
참여 완료율
92.3%
+1.2%
평균 이벤트 길이
1h 40m
±0%
요가
88%
명상
74%
러닝
91%
영양
62%
08 / CONTENT BLOCKS

콘텐츠를 구조화하다

event-card.htmlHTML
<div class="event-card">
  <span class="badge">모집중</span>
  <h3>새벽 명상 클래스</h3>
  <p>06:00 · 한강공원 · 20명</p>
  <button class="btn primary">
    참여하기
  </button>
</div>
Wellness is not a destination. It is a way of traveling. Sqnc Platform
Event Card Anatomy
01

상태 뱃지

모집중 / 마감임박 / 완료. 사용자는 한눈에 참여 가능 여부를 파악한다.

02

핵심 정보

시간, 장소, 정원. 행사 참여 결정에 필요한 정보만 명확하게 노출한다.

03

단일 액션

카드 하나에 행동 버튼은 하나. 참여하기 또는 관심등록만 남긴다.

09 / USAGE

바로 쓰면 된다

CSS 한 줄 임포트. 그게 전부다.

your-page.htmlHTML
<!-- 1. CSS 임포트 -->
<link rel="stylesheet"
      href="style-hyundaicard.css">

<!-- 2. 테마 패널 (선택) -->
<script src="theme.js"></script>

<!-- 3. 바로 클래스 사용 -->
<button class="btn primary">참여하기</button>
처음으로 ↑ 플랫폼 개념 보기