본문으로 건너뛰기

디자인 시스템

Scoutello는 따뜻하고, 능숙하며, 제품 중심적인 느낌을 주어야 합니다. 선호하는 모습은 밝고, 넉넉하며, 둥글고, 편집적인 스타일입니다. 명확한 콘텐츠를 먼저 배치하고, 그 다음으로 미묘한 브랜드 색상, 부드러운 표면, 그리고 장식적인 노이즈가 되지 않으면서 제품이 반응하는 것처럼 느껴지게 하는 차분한 움직임을 사용합니다.

마케팅 랜딩 페이지는 현재 시각적 방향에 대한 가장 명확한 공개 참조 자료입니다. 제품 표면은 가능한 경우 공유된 디자인 토큰을 재사용해야 하며, 표면이 명시적으로 브랜드 또는 마케팅 지향적일 때만 더 표현적으로 변해야 합니다.

로고 및 브랜드 에셋​

에이전트, 통합 또는 생성된 페이지에 재사용 가능한 브랜드 마크가 필요한 경우 공개 문서 에셋 URL의 Scoutello 로고를 사용합니다.

화면 크기에 걸쳐 선명한 렌더링을 위해 SVG 버전을 선호합니다. SVG를 처리할 수 없는 도구나 대상에서는 PNG 버전을 사용합니다. 마크 주위에 충분한 여백을 유지하고, 늘리거나 색상을 변경하지 않으며, 대비를 유지하는 흰색, 따뜻한 크림색 또는 기타 차분한 표면에 배치합니다.

브랜드 색상​

주요 색상: #ff8d49

Scoutello의 액센트 색상으로 주요 주황색을 사용합니다. 주요 CTA, 포커스 상태, 활성 탐색, 작은 아이콘 배경, 강조 텍스트, 부드러운 빛, 따뜻한 그라디언트에 사용합니다. 제품 코드에서는 --primary: 24 100% 64% 및 bg-primary, text-primary, border-primary/15, shadow-primary/10과 같은 Tailwind 클래스로 매핑됩니다.

보조 색상: #145466

보조 딥 틸 색상은 기반을 잡아주는 색상으로 사용합니다. 주요 주황색과의 그라디언트, 어두운 CTA 패널, 시각적 깊이, 그리고 가끔씩 강조되는 브랜드 순간에 가장 잘 어울립니다. 기본 액션 색상으로 주요 주황색을 대체해서는 안 됩니다.

지원 색상:

  • 따뜻한 크림색 배경: #fff8f1, #fff4ea, #fcf6f1 및 부드러운 orange-50 / amber-50 표면.
  • 제품 중립 색상: 흰색 카드, 어두운 전경 텍스트, 약 70-75% 불투명도의 흐릿한 텍스트, 밝은 테두리.
  • 삼차 파란색: hsl(205 100% 51%)이 지원 토큰으로 사용 가능하지만, 주황색과 틸 색상이 브랜드 쌍으로 인식될 수 있도록 제한적으로 사용해야 합니다.

시각적 스타일​

일반적인 느낌을 피할 만큼 충분한 따뜻함을 가진 깔끔하고 프리미엄한 SaaS 스타일을 선호합니다. 랜딩 페이지는 크림색 메쉬 배경, 흰색 카드, 큰 제품 스크린샷, 둥근 모서리, 절제된 그라디언트를 결합합니다.

사용할 것:

  • 둥근 카드 및 패널, 종종 rounded-2xl에서 rounded-[2rem]까지.
  • 부드러운 테두리, 예를 들어 border-primary/10, border-primary/15, ring-black/5, 밝은 중립 테두리.
  • 무거운 색상 블록 대신 계층화된 흰색 또는 크림색 표면.
  • 미묘한 그림자, 예를 들어 shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 또는 사용자 정의 낮은 불투명도 그림자.
  • 증거로 큰 제품 스크린샷 또는 UI 목업, 특히 마케팅 및 기능 스토리에 사용.
  • 작은 브랜드 요소, 예를 들어 주황색 강조 텍스트, 아이콘 칩, 링, 빛, 그라디언트 CTA.

피할 것:

  • 시끄러운 전체 페이지 주황색 배경.
  • 일반적인 컨트롤에 틸 색상을 과도하게 사용.
  • 밀집되고 비좁은 레이아웃.
  • 거친 그림자, 날카로운 사각형 또는 차가운 단색 대시보드.
  • 읽기 또는 작업 완료를 방해하는 장식적인 움직임.

타이포그래피​

마케팅 사이트에서는 다음을 사용합니다.

  • landing-display 클래스를 통한 디스플레이 헤드라인용 Space Grotesk.
  • 마케팅 본문 텍스트용 Manrope.

공유 앱 및 문서 표면은 시스템 정렬 UI 타이포그래피를 사용하며, 현재 Inter에 더 가깝습니다. 스타일 목표는 모든 표면에서 일관됩니다. 자신감 있는 제목, 촘촘한 헤드라인 자간, 읽기 쉬운 본문 텍스트, 넉넉한 줄 높이입니다.

헤드라인 가이드라인:

  • 마케팅 페이지에 크고 균형 잡힌 제목을 사용합니다.
  • 중요한 구문만 주요 주황색으로 강조합니다.
  • 가능한 경우 max-w-* 및 text-balance를 사용하여 줄 길이를 제어합니다.

본문 텍스트 가이드라인:

  • 단락을 차분하고 직접적으로 유지합니다.
  • 설명에는 흐릿한 전경 텍스트를 사용합니다. 일반적으로 text-foreground/70 또는 text-foreground/75입니다.
  • 스캔 가능한 섹션, 짧은 단락, 명확한 레이블을 선호합니다.

레이아웃 및 간격​

레이아웃은 넓고 안정적인 느낌을 주어야 합니다. 랜딩 페이지는 max-w-7xl 컨테이너를 사용하며 반응형 가로 패딩과 큰 세로 섹션을 사용합니다.

일반적인 패턴:

  • 섹션 패딩은 py-16, py-20 또는 주요 마케팅 섹션의 경우 더 크게 사용합니다.
  • 일관된 간격의 반응형 그리드로 배열된 카드.
  • 강력한 왼쪽 콘텐츠 열과 오른쪽에 제품 스크린샷 또는 장치 구성을 갖춘 히어로 섹션.
  • 광범위한 제품 약속을 위한 중앙 정렬 섹션 헤더; 스토리 또는 워크플로 섹션을 위한 왼쪽 정렬 헤더.
  • 더 큰 화면에서 여러 열이 되기 전에 깔끔하게 쌓이는 모바일 우선 레이아웃.

공백을 디자인의 일부로 사용합니다. 섹션이 불분명하게 느껴지면 장식을 더 추가하기 전에 콘텐츠를 단순화하고 여백을 늘립니다.

컴포넌트 및 표면​

Scoutello 표면은 촉감이 느껴지지만 가벼워야 합니다.

  • 버튼: 주요 마케팅 CTA의 경우 둥근 필, 다른 곳에서는 표준 제품 버튼.
  • 카드: 흰색 또는 크림색, 둥근 모서리, 테두리, 약간의 입체감.
  • 아이콘: 주황색 톤의 칩에 있는 작고 단순한 선 아이콘.
  • 통계 및 신뢰 요소: 주황색 톤의 테두리 또는 그라디언트가 있는 절제된 카드.
  • 양식: 명확한 레이블, 직접적인 도움말 텍스트, 모바일 사용을 위한 충분한 간격.
  • 스크린샷: 크고 선명하며 약간의 입체감이 있습니다. 제품의 구체적인 증거로 사용합니다.

제품 UI를 구축할 때 사용자 정의 일회성 스타일링 대신 기존의 공유 UI 컴포넌트 및 토큰에서 시작합니다. 마케팅 UI를 구축할 때 랜딩 기본 요소 및 랜딩 클래스를 적합한 경우 사용합니다.

움직임​

움직임은 인터페이스를 바쁘게 만들기보다는 세련되게 느껴지게 해야 합니다. 랜딩 페이지는 짧은 표시 애니메이션, 장치 상승 효과, 빛 번짐 효과, 작은 호버 리프트를 사용합니다.

선호하는 움직임:

  • 부드러운 불투명도로 12-24px에서 위로 표시.
  • 몇 픽셀만 들어 올리는 호버 카드.
  • 약간 들어 올리고 그림자를 깊게 하는 CTA 호버 상태.
  • 내러티브 스캔을 지원하는 경우 순차적인 섹션 진입.

항상 줄어든 움직임 환경 설정을 존중합니다. 콘텐츠를 숨기거나, 상호 작용을 차단하거나, 페이지 이해에 필수적인 것처럼 느껴지는 애니메이션은 피합니다.

음성 및 콘텐츠 디자인​

시각 시스템은 직접적이고 구체적인 카피와 가장 잘 작동합니다. 조직이 Scoutello에서 게시, 관리 또는 자동화할 수 있는 내용을 설명하는 언어를 선호합니다.

사용할 것:

  • 제품별 명사: 랜딩 페이지, 타일, 투어, 이벤트, 조직, 대시보드, 게스트, QR 코드, 번역.
  • 게스트 경험을 운영자 워크플로와 연결하는 결과 지향적 설명.
  • 독일어 및 기타 현지화된 카피에서 성별 중립적인 언어.

피할 것:

  • 예시가 없는 모호한 플랫폼 언어.
  • 지나치게 형식적인 기업 전문 용어.
  • 스캔 가능한 섹션이 더 나은 곳에 긴 단락.

실용적인 규칙​

  • #ff8d49를 주요 브랜드 액센트로, #145466을 보조 기반 색상으로 사용합니다.
  • 제품 표면에서 하드코딩된 색상 대신 토큰화된 클래스(primary, secondary, foreground, muted, border)를 선호합니다.
  • 마케팅 페이지는 따뜻하고, 넓으며, 둥글고, 스크린샷 중심이며, 약간의 애니메이션을 적용합니다.
  • 대시보드 및 운영 표면은 더 차분하고, 필요한 경우에만 밀집되며, 작업 중심적으로 유지합니다.
  • 제품이 이미 브랜딩 컨트롤을 노출하는 경우 고객 소유의 게스트 경험이 조직 브랜딩을 지원하도록 하되, Scoutello 소유 표면은 이 시스템과 일치하도록 유지합니다.

관련 개념: 경로 및 표면, 랜딩 페이지 및 타일, 브라우저 우선 게스트 경험.