다크 SaaS 랜딩에 스며든 리니어 디자인 시스템 9종
핀터레스트를 뒤덮은 리니어 디자인 시스템은 이슈 트래커 Linear.app이 쓰는 짙은 잉크 배경에 파란 글로우 하나로 포인트를 주는 다크 스타일입니다.
이 다크 톤을 그대로 써서 조립한 원페이지 랜딩을 먼저 스크롤해 보십시오. 내비게이션에서 푸터까지 밝기가 한 번도 흔들리지 않는지가 핵심입니다.
위 화면을 만든 부품 아홉 개는 아래 격자에서 각각 따로 열어 볼 수 있습니다. 배열 순서는 방문자가 실제로 페이지를 훑는 흐름(첫눈에 들어오기, 둘러보기, 값 확인하기, 믿을 만한지 보기, 행동하기, 등록하기) 그대로입니다.
자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip
- 01 제품 목업+글로우 히어로
- 02 블러 스티키 내비
- 03 테두리 하이라이트 카드
- 04 모노스페이스 라벨 리스트
- 05 강조 플랜 글로우
- 06 로고 월+인용
- 07 그라디언트 보더 밴드
- 08 4열 다크 푸터
- 09 고스트/프라이머리 버튼
01히어로
브라우저 크롬 목업 창을 짙은 잉크 배경 위에 띄우고, 그 뒤로 파란 글로우 하나만 은은하게 번지게 합니다. 목업 안 제목·CTA 버튼이 함께 살짝 떠올랐다 가라앉아 시선을 목업 안으로 끌어옵니다.
<section class="relative overflow-hidden rounded-card border border-line bg-ink p-2 shadow-raised">
<span class="glow pointer-events-none absolute left-1/2 top-0 h-96 w-96
-translate-x-1/2"></span>
<div class="flex gap-1.5 px-3 py-2">
<span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
<span class="h-2.5 w-2.5 rounded-full bg-cream/20"></span>
</div>
<div class="relative flex flex-col gap-3 px-6 pb-10 pt-8">
<p class="text-xs font-bold uppercase tracking-wide text-accent">Console</p>
<h2 class="text-2xl font-bold text-cream">한 화면에서 배포까지</h2>
<button class="w-fit rounded-pill bg-accent px-5 py-2 text-sm font-bold text-cream">
무료로 시작
</button>
</div>
</section>
02내비게이션
backdrop-filter로 흐려진 캡슐형 내비 바 안에서, 현재 메뉴를 표시하는 작은 알약이 항목 사이를 옮겨 다닙니다. 브랜드와 CTA 버튼은 가운데 메뉴 캡슐 바깥, 내비 바 양 끝에 고정합니다.
<nav class="flex items-center gap-4 rounded-pill bg-ink/90 border border-line
backdrop-blur px-3 py-2 shadow-raised">
<span class="pl-3 font-display font-extrabold text-sm text-cream">Vantage</span>
<div class="relative flex flex-1 rounded-pill bg-cream/5 p-1">
<span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-accent"></span>
<span class="relative z-10 flex-1 text-center text-xs font-semibold py-2 text-cream">홈</span>
<span class="relative z-10 flex-1 text-center text-xs py-2 text-cream/70">기능</span>
</div>
<button class="rounded-pill bg-accent px-4 py-2 text-xs font-bold text-cream">시작</button>
</nav>
03카드 격자
다크 카드 격자에서 한 칸씩 순서대로 테두리가 파란 빛으로 밝아졌다 가라앉으며 시선을 이끕니다. 격자 전체가 한꺼번에 반짝이지 않고 한 칸씩 순서대로 도는 것이 핵심입니다.
<div class="grid grid-cols-2 gap-gutter">
<div class="rounded-card border border-line bg-cream/[.03] p-6
transition-colors hover:border-accent">
<span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
<p class="text-sm font-semibold text-cream">자동 배포</p>
</div>
<div class="rounded-card border border-line bg-cream/[.03] p-6
transition-colors hover:border-accent">
<span class="mb-3 block h-4 w-4 rounded-sm bg-accent/40"></span>
<p class="text-sm font-semibold text-cream">이슈 추적</p>
</div>
</div>
04기능 목록
각 기능 앞에 모노스페이스 번호 라벨을 달고, 리스트 줄마다 아래에서 위로 스치듯 나타납니다. 번호가 코드 에디터의 줄 번호처럼 보여 개발자 도구라는 인상을 강화합니다.
<ul class="flex flex-col gap-2 rounded-card border border-line bg-cream/[.03] p-4">
<li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
<span class="font-mono text-xs font-bold text-accent">01</span>
<span class="text-sm font-semibold text-cream">실시간 협업 편집</span>
</li>
<li class="flex items-center gap-4 rounded-control px-4 py-3 hover:bg-accent/10">
<span class="font-mono text-xs font-bold text-accent">02</span>
<span class="text-sm font-semibold text-cream">키보드 전용 커맨드바</span>
</li>
</ul>
05가격
추천 플랜 카드에만 파란 글로우 테두리를 두르고, 은은하게 커졌다 작아지며 숨 쉬게 합니다. 표 없이도 어느 플랜을 밀고 있는지 한눈에 들어옵니다.
<div class="relative flex-[1.1] rounded-card border-2 border-accent
bg-cream/[.03] p-6 pt-8 shadow-glow">
<span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
text-xs font-bold text-cream">추천</span>
<p class="font-bold text-cream">프로</p>
<p class="mt-1 text-sm text-cream/60">월 19,000원</p>
</div>
06후기
옅게 지운 로고 줄 아래 인용 카드 하나를 두고, 로고들이 차례로 밝아졌다 옅어지며 신뢰를 쌓습니다. 로고를 완전한 색으로 두면 광고 배너처럼 보여, 일부러 16% 밝기로 죽였습니다.
<div class="rounded-card border border-line bg-cream/[.03] p-6">
<div class="mb-5 flex justify-between gap-3 opacity-60">
<span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
<span class="h-4 flex-1 rounded-sm bg-cream/20"></span>
</div>
<blockquote class="border-t border-line pt-4">
<p class="text-sm font-semibold text-cream">
“온보딩 문서 없이도 팀 전체가 하루 만에 옮겨 왔어요.”
</p>
</blockquote>
</div>
07CTA 띠
CTA 띠 테두리를 감싸는 그라디언트 선이 천천히 회전해, 끝단이 빛나는 배지처럼 보입니다. conic-gradient를 박스보다 크게 깔고 회전만 시킨 뒤 안쪽 카드로 2px만 남기고 가려서 만듭니다.
<div class="relative overflow-hidden rounded-card border border-accent/40
bg-cream/[.03] px-10 py-12 text-center shadow-glow">
<h3 class="mx-auto max-w-md text-3xl font-extrabold text-cream">
지금 팀을 옮겨 보세요
</h3>
<button class="mt-6 rounded-pill bg-accent px-6 py-3 text-sm font-bold text-cream">
무료로 시작
</button>
</div>
08푸터
4열로 나뉜 링크 묶음이 왼쪽부터 순서대로 옅게 떠오르며 어두운 푸터를 채웁니다. 구분선 없이 열 사이 여백만으로 영역을 나눕니다.
<footer class="grid grid-cols-4 gap-gutter border-t border-line py-10">
<div>
<p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">제품</p>
<p class="text-sm text-cream/70">기능</p>
</div>
<div>
<p class="mb-2 text-xs font-bold uppercase tracking-wide text-accent">회사</p>
<p class="text-sm text-cream/70">소개</p>
</div>
</footer>
09버튼·입력
프라이머리 버튼의 파란 글로우와 입력창의 포커스 링 모양 테두리는 호버나 포커스와 상관없이 자동으로 커졌다 작아지길 반복하고, 고스트 버튼만 테두리만 두른 채 움직이지 않습니다. 세 요소의 모서리 반경을 카드와 같은 값으로 맞춰 화면 전체가 한 규격으로 보이게 합니다.
<form class="mx-auto flex max-w-md flex-col gap-3 rounded-card border
border-line bg-cream/[.03] p-6 sm:flex-row">
<label class="relative flex-1 rounded-control border border-line bg-cream/5">
<input class="w-full rounded-control bg-transparent px-4 py-3 text-sm
text-cream outline-none" type="email" placeholder="이메일 주소">
</label>
<button class="rounded-control bg-accent px-5 py-3 text-sm font-bold text-cream">
가입하기
</button>
</form>
tailwind.config 커스텀
위에서 본 부품 아홉 개와 원페이지는 전부 아래 설정 하나만 읽습니다. 배경·강조·반경·그림자 값을 여기서 고치면 화면 전체 톤이 한 번에 따라 바뀝니다.
theme: {
extend: {
colors: {
ink: "#17141a",
cream: "#fff7e6",
accent: "#2f6df6",
line: "rgba(255,247,230,.08)",
},
fontFamily: {
display: ["'Inter'", "system-ui", "sans-serif"],
body: ["'Inter'", "system-ui", "sans-serif"],
},
borderRadius: { control: "12px", card: "16px", pill: "999px" },
boxShadow: {
raised: "0 14px 24px rgba(23,20,26,.32)",
glow: "0 0 40px rgba(47,109,246,.35)",
},
spacing: { gutter: "16px" },
},
},
바이브코딩 프롬프트
위 설정 값을 프로젝트에 붙여 넣은 다음, Claude Code나 Cursor에는 아래처럼 짧게 지시하면 충분합니다. 전체 프롬프트 원문은 zip의 prompt.md에 들어 있습니다.
배경은 ink(#17141a) 하나. 카드도 순백이 아니라 ink 위에 옅은 cream 오버레이(3~5%)로 만든다.
강조가 필요한 곳(버튼·추천 배지·포커스 링)에만 accent(#2f6df6)를 쓴다.
두 번째 강조색을 넣지 않는다. 반경은 rounded-card·rounded-pill·rounded-control 세 값만 쓴다.
이 지시를 그대로 page/index.html에 넣어 돌린 결과는 1280px 뷰포트 기준 전체 페이지 캡처로 남겼습니다.
어디서 깨지는가 — 함정
이 스타일에서 가장 흔한 함정은 배경을 theme() 함수로 지정하는 것입니다. Tailwind Play CDN은 컴파일된 유틸리티 클래스(bg-ink 같은) 안의 theme() 값은 정상 처리하지만, <style> 태그 안에 직접 쓴 background: theme('colors.ink')는 무시하고 기본값(흰 배경)으로 조용히 되돌아갑니다. 이 프로젝트도 처음엔 <body> 배경을 <style> 태그의 theme()로 지정했다가 원페이지 전체가 흰 배경으로 렌더돼, 가격 카드의 text-cream/60 텍스트가 흰 배경 위에서 거의 안 보이는 상태로 스크린샷에 남을 뻔했습니다. <body class="bg-ink">처럼 컴파일되는 유틸리티 클래스로 바꾸고서야 잉크 배경이 제대로 적용됐습니다. 두 번째 함정은 모서리 반경입니다. 카드마다 rounded-card·rounded-pill·rounded-control을 벗어난 임의의 px 값을 쓰면 화면 전체가 한 시스템이 아니라 여러 사이트를 이어붙인 것처럼 보입니다. 부품 아홉 개와 원페이지 소스를 통째로 담은 zip은 암호가 걸려 있는데, 그 암호는 wdu6yd23이며 본문 아래 버튼을 누르면 내려받을 수 있습니다.
세 번째 함정은 320px처럼 좁은 화면입니다. 01번 히어로 목업의 안쪽 여백을 고정 px로 주면 좁은 화면에서 카드 높이가 뷰포트를 넘겨 스크롤바가 생기는데, 여백을 clamp()로 바꿔야 폭에 따라 자연스럽게 줄어듭니다.
접근성
아홉 개 데모 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리로 감쌌고, 동작 줄이기를 켠 방문자에게는 회전·글로우·스침 같은 움직임 대신 정지된 최종 상태만 보입니다. 02번 내비게이션의 필과 06번의 로고 블록처럼 색으로만 상태를 표시하는 요소는 aria-hidden 처리하고, 실제 의미(현재 메뉴, 파트너명)는 항상 곁에 텍스트로 함께 둡니다. 02번은 MDN backdrop-filter 문서의 안내대로 미지원 브라우저에서도 반투명 배경만으로 텍스트 대비가 유지되게 만들었습니다.
이 편 말고 다른 트렌드가 궁금하면 디자인 트렌드 카테고리를 훑어보시고, 이 사이트 자체가 어떤 곳인지는 소개 페이지에 짧게 적어 뒀습니다.
FAQ
리니어(Linear) 로고나 상표를 그대로 써도 되나요?
아니요. 이 편의 부품은 Linear.app의 로고·상표·실제 화면을 복제한 것이 아니라 짙은 배경·파란 강조·모노스페이스 라벨 같은 일반적인 디자인 언어만 참고했습니다. 브랜드명은 전부 가상의 이름(Vantage)으로 바꿔 실었습니다.
이 스타일을 라이트 모드와 같이 써도 되나요?
가능합니다. ink와 cream의 역할만 서로 바꾸면 되지만, accent 하나로 시선을 모으는 이 스타일의 핵심은 배경이 밝든 어둡든 그대로 유지돼야 합니다. 강조색을 두 개 이상 쓰면 어느 요소가 중요한지 알 수 없어집니다.
Tailwind 없이 순수 CSS로도 쓸 수 있나요?
네, zip 안의 tokens.css 하나만 링크하면 됩니다. 이 파일은 tailwind.config.js와 같은 값을 CSS 변수(--color-ink, --color-accent 등)로 옮겨 둔 것이라, Tailwind 클래스 대신 var(--color-accent)처럼 직접 참조하면 같은 톤을 유지할 수 있습니다.