v1.0 Released

Build with LemonDouble
Design System.

하나의 디자인 시스템으로 모든 개인 프로젝트에 일관된 브랜드 아이덴티티를 부여합니다.

Get Started Documentation
12
Projects
47
Components
3
Fonts
99%
Consistency
Projects
Recent Work

최근 작업한 프로젝트들입니다.

TypeScript

금요미식회 설문 툴

팀 내 식당 투표를 위한 실시간 설문 시스템. Geist 폰트와 zinc 다크 테마 기반.

Next.js Supabase Vercel
Infrastructure

홈서버 쿠버네티스

라즈베리파이 클러스터 위에 구축한 개인 k8s 인프라. GitOps로 관리.

K8s ArgoCD Terraform
IoT

Home Assistant 자동화

집 안 모든 IoT 장치를 연결하는 스마트홈 자동화 파이프라인.

MQTT Zigbee ESPHome
Overview
Design Tokens

시스템을 구성하는 핵심 디자인 토큰들.

Token Value Role Type
Primary #F0B90B CTA, 강조, 링크 Color
Secondary #CD6B5E 보조 강조, 태그, 코드 Color
Background #12100E 페이지 배경 Color
Heading Font Galmuri11 Bold 제목, 탭, 섹션 레이블 Font
Body Font Pretendard 본문, 버튼, 입력, 코드, 전부 Font
Code
Quick Start
theme.config.ts
1import { defineConfig } from "lemon-design"
2
3export default defineConfig({
4  colors: {
5    primary: "#F0B90B", // Logo Yellow
6    secondary: "#CD6B5E", // Logo Coral
7  },
8  fonts: {
9    heading: "Galmuri11", // Bold(700) only
10    body: "Pretendard",
11  },
12})
* Galmuri11은 항상 font-weight: 700 (Bold)로만 사용합니다. Regular(400) 사용은 금지.
! 코드 블록, 인라인 코드, Chip 등 가독성이 필요한 곳은 모두 Pretendard를 사용합니다.
Form
Interactive Elements
다크 모드 활성화
알림 수신

프로젝트 진행률

Phase 3 72%

Contributors

LemonDouble
K
J
+3
State
Disabled
비활성 토글
Typography
Type Scale
Galmuri11 Bold — 44px / Heading 1 레몬 디자인 시스템
Galmuri11 Bold — 28px / Heading 2 섹션 제목 스타일
Galmuri11 Bold — 20px / Heading 3 카드 및 소제목
Pretendard 400 — 18px / Body Large 본문 텍스트는 Pretendard로 렌더링되어 최적의 가독성을 제공합니다. 긴 문단에서도 눈이 편안합니다.
Pretendard 400 — 14px / Body 카드 설명, 테이블 내용, 메타데이터 등에 사용되는 기본 본문 크기입니다.
Pretendard 600 — 14px / Label 버튼, 태그, 강조 레이블에 사용합니다.
Navigation
Tabs

프로젝트의 전체 현황을 확인할 수 있는 개요 탭입니다. 카드, 차트, 요약 정보 등이 표시됩니다.

방문자 수, 페이지뷰, 이벤트 등 분석 데이터가 표시됩니다.

프로젝트 설정, 환경 변수, 도메인 관리 등을 구성합니다.

빌드 로그, 런타임 로그, 에러 로그를 확인합니다.

Navigation
Breadcrumb
Home / Projects / 금요미식회 / Settings
Navigation
Pagination
Form
Dropdown & Select
Native Select
▾
Dropdown Menu
Form
Checkbox & Radio
Checkbox
Radio
Form
Textarea
Overlay
Modal / Dialog

버튼을 클릭하면 모달이 열립니다.

Feedback
Toast / Notification
✓
배포가 성공적으로 완료되었습니다.
!
빌드 캐시가 만료되었습니다. 다음 배포 시 시간이 더 걸릴 수 있습니다.
✕
환경 변수 설정 중 오류가 발생했습니다.
i
새로운 버전 v2.4.0이 출시되었습니다. 변경 사항을 확인해 보세요.
Overlay
Tooltip

배포 상태는 SSR Server-Side Rendering 과 ISR Incremental Static Regeneration 에 따라 다르게 표시됩니다. Edge Runtime Vercel Edge Network에서 실행되는 서버리스 함수 을 사용하면 응답 시간이 단축됩니다.

Content
Blockquote & List
좋은 디자인 시스템은 제약을 통해 자유를 만든다. 선택지가 줄어들면 일관성은 자연스럽게 따라온다.

Unordered List

Ordered List

  1. DESIGN.md를 프로젝트 루트에 복사한다
  2. Galmuri11과 Pretendard CDN을 추가한다
  3. CSS 변수를 설정한다
  4. AI 에이전트에게 "이 디자인 시스템으로 만들어" 라고 말한다
Layout
Sidebar Navigation

Project Overview

사이드바 네비게이션은 대시보드나 설정 페이지에서 사용합니다. 왼쪽에 고정된 네비게이션과 오른쪽 콘텐츠 영역으로 구성됩니다.

Interactive
Accordion
제목(h1-h3), 탭 레이블, 섹션 레이블, Stat 숫자에만 사용합니다. 반드시 Bold(700) weight로만 사용하며, Regular(400)는 사용하지 않습니다.
코드 블록과 인라인 코드 모두 Pretendard를 사용합니다. 가독성이 최우선이기 때문에, 코드에서도 픽셀 폰트 대신 본문 폰트를 씁니다.
아니요. 이 디자인 시스템은 다크 모드 전용입니다. 로고의 따뜻한 브라운에서 파생된 다크 배경(#12100E)이 핵심 아이덴티티입니다.
State
Skeleton Loading
State
Empty State
LemonDouble

프로젝트가 없습니다

새 프로젝트를 만들어 시작하세요.