Semrush

파란 데이터 컨트롤 사이에 딱 하나 박힌 오렌지 CTA, 숫자와 차트가 빽빽한 SEO 분석 대시보드

서양마케팅디자인 시스템복합modern-minimal고딕compactsoftsubtle라이트다크공식한글 지원출시 2019개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Semrush (셈러시)
한 줄 정체성: 검색 순위·키워드·백링크·광고·경쟁사 트래픽을 한 곳에서 보는 온라인 마케팅 분석 플랫폼. 2025년 말 Adobe 에 인수되어 지금은 "Adobe 계열사"로 운영된다.
공식 디자인 철학: 제품 UI 는 오픈소스 디자인 시스템 Intergalactic(@semcore/* React 라이브러리, MIT)으로 만든다. 설계 원칙은 "데이터가 많은 화면에서도 읽히는 인터페이스" — 의미 토큰(--intergalactic-bg-primary-neutral 처럼 역할로 이름 붙인 색)과 차트 전용 팔레트, 접근성(키보드 포커스 3px 링)을 기본값으로 둔다. 2026년에는 마케팅 브랜드를 "혜성(comet)" 로고와 라벤더·아쿠아·민트 팔레트, Lazzer 서체로 새로 바꿨지만, 제품 앱의 브랜드 버튼 색은 여전히 오렌지다.
시그니처 요소 1개: 파란(info) 버튼·링크·차트 선이 대부분인 빽빽한 분석 화면에, 오렌지 `#FF642D` 는 "검색"·"무료 체험" 같은 최상위 CTA 한 곳에만 박혀 있는 구조. 오렌지가 적게 쓰이기 때문에 더 눈에 띈다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 데이터 중심, 명료함, 성장 지향
무드 설명: 마케터가 수치와 추세를 빠르게 훑는 작업 도구라, 흰 카드와 옅은 회색 바탕 위에 숫자·스파크라인·표가 촘촘히 놓인다. 색은 "의미"로만 쓴다 — 상승은 초록, 하락은 빨강, 클릭 가능한 것은 파랑. 상단 바는 짙은 보랏빛 남색이고, 좌측 내비는 옅은 라벤더 톤으로 활성 메뉴를 표시한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 표 행 높이 32~40px, 폼 컨트롤 M 사이즈 28px. 한 화면에 지표 타일·차트·표를 동시에 올리는 분석 도구의 밀도.
모서리 성향: Soft (6px) — 버튼·입력·카드(surface)·팝오버 모두 6px, 모달만 12px, 태그는 24px 알약형.
평면성: Subtle — 카드는 1px 가량의 아주 옅은 그림자(box-shadow-card), 드롭다운·모달에만 뚜렷한 그림자.

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Semrush Orange (Intergalactic base token orange-50~800, 실측) */
  --color-primary-50:  #FFF3D9;  /* 경고 옅은 면 (bg-secondary-warning) */
  --color-primary-100: #FFDCA2;
  --color-primary-200: #FFB26E;  /* 경고 테두리 */
  --color-primary-300: #FF8C43;
  --color-primary-400: #FF7849;  /* 보간값 (추정) — 원 팔레트엔 없음 */
  --color-primary-500: #FF642D;  /* 기본 — 브랜드 CTA (control-primary-brand, 원 이름 orange-400) */
  --color-primary-600: #C33909;  /* hover (control-primary-brand-hover) */
  --color-primary-700: #8B1500;  /* active */
  --color-primary-800: #551200;
  --color-primary-900: #351000;

  /* Secondary - Info Blue (앱에서 가장 많이 쓰는 조작 색) */
  --color-secondary-500: #008FF8;  /* 기본 버튼·체크박스·차트 2계열 */
  --color-secondary-600: #006DCA;  /* 링크 글자·hover */
  --color-secondary-700: #044792;
  /* 헤더·사이드 내비 (violet-dusty 계열) */
  --color-header-bg:     #1D113E;  /* 상단 바 (violet-dusty-800, 사용처 추정) */
  --color-header-border: #382E5E;  /* header-border-primary */
  --color-nav-active-bg: #E2DDFF;  /* sidebar-nav-control-active */
  --color-nav-text:      #6D619F;  /* sidebar-nav-control-text-normal */
  --color-nav-text-active: #4D407E;
  /* 2026 마케팅 브랜드 (앱 UI 에는 아직 미적용) */
  --color-brand-lavender: #C190FF;
  --color-brand-aqua:     #18F0BF;
  --color-brand-mint:     #DCEEEB;
  --color-brand-black:    #181E15;

  /* Neutral - gray (실측) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F9;  /* 페이지 바탕·hover */
  --color-neutral-100:  #E0E1E9;  /* 약한 구분선·active 면 */
  --color-neutral-200:  #C4C7CF;  /* 입력 테두리 */
  --color-neutral-300:  #A9ABB6;
  --color-neutral-400:  #8A8E9B;  /* 플레이스홀더 */
  --color-neutral-500:  #6C6E79;  /* 보조 글자·아이콘 */
  --color-neutral-600:  #484A54;
  --color-neutral-700:  #2B2E38;
  --color-neutral-800:  #191B23;  /* 본문 글자 */
  --color-neutral-1000: #000000;

  /* Semantic (실측) */
  --color-success-bg: #DBFEE8;
  --color-success-fg: #007C65;
  --color-warning-bg: #FFF3D9;
  --color-warning-fg: #C33909;
  --color-error-bg:   #FFF0F7;
  --color-error-fg:   #D1002F;
  --color-info-bg:    #E9F7FF;
  --color-info-fg:    #006DCA;

  /* Surface */
  --bg-base:     #F4F5F9;   /* 앱 페이지 (bg-secondary-neutral) */
  --bg-subtle:   #F4F5F9;   /* 표 머리·섹션 */
  --bg-elevated: #FFFFFF;   /* 카드·위젯 (bg-primary-neutral) */
  --bg-overlay:  #FFFFFF;   /* 드롭다운·모달 */
  --bg-invert:   #191B23;   /* 툴팁 (bg-primary-invert) */

  /* Text */
  --text-primary:    #191B23;
  --text-secondary:  #6C6E79;
  --text-tertiary:   #8A8E9B;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #A9ABB6;   /* 실제로는 컴포넌트 전체 opacity .3 로 비활성 처리 */
  --text-link:       #006DCA;

  /* Border */
  --border-default: #C4C7CF;   /* border-primary */
  --border-subtle:  #E0E1E9;   /* border-secondary */
  --border-strong:  #A9ABB6;
  --border-focus:   rgba(0, 143, 248, 0.5); /* keyboard-focus 3px 링 */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (OFL) / Noto Sans KR 폴백 — Inter 와 글자 폭·x-height 가 비슷하다
- 영문 UI: Inter (OFL) — Intergalactic --intergalactic-base 토큰
- 영문 마케팅 제목: Lazzer (2026 브랜드 전용, 이전엔 Factor A)
위계 (Intergalactic fs/lh 토큰 기준):
- Display: 48px / 700 / 117% / -0.01em (fs-800)
- H1: 36px / 700 / 110% / -0.01em (fs-700)
- H2: 32px / 700 / 125% / 0 (fs-600)
- H3: 24px / 600 / 117% / 0 (fs-500)
- Body Large: 16px / 400 / 150% / 0 (fs-300)
- Body: 14px / 400 / 142% / 0 (fs-200)
- Body Small: 12px / 400 / 133% / 0 (fs-100)
- Caption: 10px / 500 / 120% / 0.3px (fs-50)

Spacing

스페이싱

Base unit: 4px (--intergalactic-scale-indent)
토큰: ``css --space-xs: 4px; /* spacing-1x */ --space-sm: 8px; /* spacing-2x */ --space-md: 16px; /* spacing-4x */ --space-lg: 24px; /* spacing-6x */ --space-xl: 32px; /* spacing-8x */ --space-2xl: 56px; /* spacing-14x */ --space-3xl: 80px; /* spacing-20x */ ``
Container: 앱은 폭 100%(좌측 내비 제외) + 좌우 24px. 반응형 기준점 320 / 768 / 1200 / 1920px.

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* rounded-small — 애드온·작은 칩 */
--radius-md: 6px;      /* control·surface·popper·badge — 기본값 */
--radius-lg: 12px;     /* 모달·카운터 */
--radius-xl: 24px;     /* 태그·스위치 알약형 */
--radius-full: 9999px; /* 아바타 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 0 1px 0 rgba(25,27,35,.16), 0 1px 2px 0 rgba(25,27,35,.12); /* 카드 기본 */
--shadow-md: 0 1px 12px 0 rgba(25,27,35,.15);   /* 드롭다운·팝오버 */
--shadow-lg: 0 3px 8px 0 rgba(25,27,35,.2);     /* 모달 */
--shadow-xl: 3px 3px 30px 0 rgba(25,27,35,.15); /* 카드 hover·끌어 옮기는 위젯 */

Iconography

스타일: Filled 위주의 단순한 글리프 (@semcore/icon), 좌측 내비는 Outline
Stroke 굵기: 1.5px 상당 (16px 기준)
모서리 처리: Round
추천 라이브러리: 공식 @semcore/icon, 대체로는 Lucide / Tabler

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button

.btn { font: 500 14px/1 Inter,"Pretendard",sans-serif; height: 28px; padding: 0 12px; border-radius: var(--radius-md); border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.btn-l { height: 40px; padding: 0 16px; font-size: 16px; }
.btn-primary { background: var(--color-secondary-500); color: #fff; }             /* 일반 주요 동작 = 파랑 */
.btn-primary:hover { background: var(--color-secondary-600); }
.btn-primary:active { background: var(--color-secondary-700); }
.btn-brand { background: var(--color-primary-500); color: #fff; }                 /* 화면당 1개: 검색·체험 CTA */
.btn-brand:hover { background: var(--color-primary-600); }
.btn-brand:active { background: var(--color-primary-700); }
.btn-secondary { background: rgba(138,142,155,.1); color: var(--text-primary); }
.btn-secondary:hover { background: rgba(138,142,155,.2); }
.btn-ghost { background: transparent; color: var(--text-link); }
.btn-ghost:hover { background: rgba(0,143,248,.2); }
.btn-danger { background: #FF4953; color: #fff; }
.btn-danger:hover { background: #D1002F; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--border-focus); }
.btn:disabled { opacity: .3; cursor: default; }
.btn[aria-busy="true"] { color: transparent; position: relative; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px; margin: -7px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: var(--radius-full); animation: spin 700ms linear infinite; }

Input

.input { height: 28px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0 8px; font-size: 14px; color: var(--text-primary); }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; box-shadow: 0 0 0 3px var(--border-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { opacity: .3; }
/* 도메인 검색창: 입력 + 오렌지 버튼이 한 덩어리로 붙는다 */
.search-group { display: flex; }
.search-group .input { border-radius: var(--radius-md) 0 0 var(--radius-md); flex: 1; }
.search-group .btn-brand { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

Card

.card { background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-md); }
.card-emphasis { box-shadow: var(--shadow-sm), inset 0 3px 0 var(--color-primary-500); }
.card-outlined { background: transparent; box-shadow: none; border: 1px solid var(--border-subtle); }
.card:hover { box-shadow: var(--shadow-xl); }

Badge / Tag

.badge { display: inline-block; padding: 0 4px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500; line-height: 16px; }
.badge-solid   { background: var(--color-secondary-500); color: #fff; }       /* "new" 등 */
.badge-subtle  { background: var(--color-info-bg); color: var(--color-info-fg); } /* 검색 의도 I·N·C·T */
.badge-outline { box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); }
.tag { display: inline-flex; height: 20px; padding: 0 8px; border-radius: var(--radius-xl); background: rgba(138,142,155,.1); font-size: 12px; }

Navigation (상단 바 + 좌측 도구 내비)

.top-bar { height: 48px; background: var(--color-header-bg); border-bottom: 1px solid var(--color-header-border); display: flex; align-items: center; gap: 12px; padding: 0 16px; color: #fff; }
.top-bar a { color: rgba(255,255,255,.8); }
.side-nav { width: 240px; background: var(--bg-elevated); border-right: 1px solid var(--border-subtle); padding: 8px; }
.side-nav a { display: flex; gap: 8px; height: 32px; align-items: center; padding: 0 8px; border-radius: var(--radius-md); color: var(--color-nav-text); }
.side-nav a:hover { background: #E7E8F2; }
.side-nav a[aria-current="page"] { background: var(--color-nav-active-bg); color: var(--color-nav-text-active); font-weight: 600; }

Motion

--duration-fast: 100ms;   /* extra-fast · 스위치 */
--duration-base: 200ms;   /* control·popper·modal·accordion 공통 */
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.2, 0, 0, 1);   /* (추정) */
--ease-in-out: ease-in-out;               /* (추정) */

Intergalactic 은 지속 시간만 토큰으로 두고 곡선은 컴포넌트마다 기본 ease 를 쓴다. 팝오버·드롭다운은 200ms 페이드, 아코디언은 200ms 높이 전환.

Anti-patterns

1. 오렌지 버튼을 한 화면에 여러 개 두지 않는다 — 일반 주요 동작은 파랑(info), 오렌지는 최상위 CTA 하나 2. 오렌지를 "위험"·"삭제" 의미로 쓰지 않는다 — 위험은 빨강(#FF4953·#D1002F), 오렌지 옅은 면은 경고 전용 3. 원시 팔레트 값(--orange-400)을 컴포넌트에 바로 쓰지 않는다 — 역할 이름의 의미 토큰을 거친다 4. 비활성 상태를 별도 회색으로 다시 칠하지 않는다 — 컴포넌트 전체 opacity .3 5. 2026 마케팅 라벤더·아쿠아를 분석 화면 데이터 색으로 섞지 않는다 — 차트 색은 차트 팔레트에서만

Semrush

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처