DevsLab
SaaS Development Studio — MVP부터 엔터프라이즈까지, 빠르고 견고하게.
> from idea to launch
[01] logo
마크는 모노크롬, 단 하나의 형태
데브스랩 마크는 32 그리드 위의 단일 폴리곤입니다 — 블록에서 잘려 나온 ㄱ자 형태는 코드 블록을 쌓아 SaaS의 골격을 세우는 아키텍처 설계를 가리킵니다. 마크와 워드마크는 언제나 모노크롬(라이트에서 zinc-950, 다크에서 zinc-50)으로만 씁니다.
라이트 위 — zinc-950 (#09090B). 기본 테마이자 문서·인쇄물 기본.
다크 위 — zinc-50 (#FAFAFA). 다크 테마·발표 자료용.
// 구성 — 32 그리드
비례 — 몸통 24×24, 노치 8×16. 노치의 안쪽 모서리 (20,12)가 형태의 기준점입니다.
여백 — 사방으로 노치 너비(8유닛)만큼 비웁니다. 최소 표시 크기 16px.
// 금지
✕ cyan으로 칠하기 — cyan은 액센트지 로고색이 아닙니다
✕ 비례 왜곡
✕ 회전
✕ 그림자·글로우 효과
✕ 저대비 배경 위 사용
[02] color
Electric Cyan, 아껴 쓰는 한 가지 색
브랜드 팔레트는 zinc 뉴트럴과 단 하나의 액센트 — 코드베이스에서 electric이라 부르는 cyan — 으로 이루어집니다. 화면의 약 90%는 뉴트럴이고, cyan은 프롬프트·링크·핵심 CTA에만 허락됩니다. 아껴 쓸수록 강해지는 색입니다.
hover #22D3EE · electric-400
다크 그라운드
라이트 그라운드
// 뉴트럴 스케일 — zinc
// 사용 비율
on-brand 규칙. cyan 면 위 텍스트는 흰색이 아니라 zinc-950입니다. 흰 텍스트는 대비 2.3:1로 접근성 기준(WCAG AA)에 미달하고, 다크 텍스트는 약 8:1로 통과합니다.
[03] typography
단단한 산세리프, 말하는 모노스페이스
라틴·숫자는 Geist, 한글은 시스템 고딕(또는 Pretendard) 폴백 — 타이트한 자간의 볼드 헤드라인이 구조를 세웁니다. Geist Mono는 장식이 아니라 브랜드의 목소리입니다: 프롬프트, 인덱스 라벨, 경로, 코드가 등장하는 모든 곳에서 개발 스튜디오의 정체성을 드러냅니다.
display · Geist Bold · letter-spacing −2.5%
당신의 SaaS,
우리가 만듭니다.
body · Geist Regular 16/24 · Korean system fallback
MVP부터 엔터프라이즈 SaaS까지 — 아키텍처, 풀스택 · 모바일 개발, AI 통합을 한 팀에서. 빠르고 견고하게 첫 사용자를 만나도록 함께합니다.
mono · Geist Mono · labels · prompts · code
~/your-saas npx create-saas @devslab/starter
→ AI 에이전트 · RAG 통합...✓ 견고한 SaaS 기반 완성
[04] motifs
터미널에서 온 그래픽 언어
데브스랩의 그래픽 장치는 전부 개발자의 터미널에서 왔습니다. 새 장치를 만들기 전에 이 어휘 안에서 먼저 찾습니다.
> from idea to launch
프롬프트 — 헤드라인·태그라인 앞에. cyan.
[01] capabilities
인덱스 라벨 — 섹션 눈썹. 실제 순서가 있을 때만.
~/your-saas
경로 — 맥락·위치를 나타낼 때.
→ 진행✓ 완료
화살표·체크 — 과정과 완료. 이모지는 쓰지 않습니다.
[05] voice
짧게 끊어 말하고, 증명으로 잇는다
선언은 짧게, 근거는 구체적으로. 과장 대신 운영 실적과 스택을 보여줍니다. 기술 용어는 억지로 번역하지 않고 영어 그대로 씁니다.
DO
“검증된 스택. 군더더기 없이.”
짧은 선언 + 마침표. 실제 홈페이지 카피입니다.
DON'T
“최고의 혁신적인 차세대 솔루션을 경험해보세요!”
최상급·느낌표·수식어 누적은 브랜드 보이스가 아닙니다.
DO
“LLM · RAG · 에이전트 워크플로우를 제품에 안전하고 실용적으로 녹입니다.”
기술 용어는 영어 그대로, 동사는 한국어로 정확하게.
DON'T
“인공지능 대규모 언어 모델 검색 증강 생성 기술을 활용하여…”
전부 번역하면 오히려 읽히지 않습니다.
[06] in use
적용 예시
규칙이 실제 지면에서 어떻게 작동하는지 — 다크 그라운드, 모노크롬 마크, 한 점의 cyan.
> from idea to launch
당신의 SaaS,
우리가 만듭니다.
아키텍처 · 풀스택 · AI 통합을 한 팀에서
// 명함 — 실제 인쇄 앞면
두 사람 × 다크/라이트 앞면입니다. 앞면 QR은 그 사람의 AskLinq 채팅 페이지를 열고, 직통 연락처와 vCard QR이 있는 뒷면은 인쇄물 전용으로 웹에는 싣지 않습니다.
// design system
이 규칙들은 DDS(DevsLab Design System)로 관리됩니다 — 웹과 모바일이 공유하는 하나의 토큰 소스. 전체 파운데이션·컴포넌트 쇼케이스: