큐레이션 · 오픈 · 무료

Sierra

따뜻하고 에디토리얼 사진을 사용하여 복잡한 기술을 인간적이고 신뢰할 수 있게 만드는 정교한 AI 에이전트 플랫폼입니다.

aienterprise
Sierra 스크린샷
↓ 디자인 시스템 다운로드 (18 MB)OpenDesign 에서 열기

원본 사이트: https://sierra.ai

📦 팩 내용 보기 →

01

디자인 DNA

AI고객 경험기업에이전트플랫폼

AI 에이전트를 위한 프리미엄 컨설팅으로, 기술적 깊이와 접근 가능하고 인간 중심적인 스토리텔링의 균형을 맞춥니다.

02

컬러

#302E2DInk
#716F6CInk soft
#FFFFFFBG
#F6F5F3BG soft
#E4E0DCMuted
rgba(228, 224, 220, 1)Line

따뜻한 중립색: 웜 그레이와 어스톤을 기반으로 한 팔레트로, 시각적 관심을 위해 합성 강조색보다는 고품질 사진에 의존합니다.

03

타이포그래피

grotesque-sans · monospace

큰 디스플레이 텍스트에는 좁은 트래킹(-1.3px에서 -0.38px)을 사용하여 세련된 에디토리얼 느낌을 만듭니다. · 거의 모든 텍스트에 400 웨이트를 엄격히 유지합니다; 500은 특정 강조에 매우 드물게 사용합니다. · 본문 텍스트에는 넉넉한 line-height(1.4-1.5)를 보장하여 가독성을 유지합니다.

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
80px

넉넉하고 구조화되어, 주요 섹션에는 큰 padding(80px)을 사용하고 내부 간격에는 일관된 8/16/20px 단위를 사용하여 깔끔하고 숨 쉴 듯한 레이아웃을 만듭니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid rgb(228, 224, 220)

0px 28px 34px 0px rgba(15, 79, 138, 0.15) · 0px 75px 63px 0px rgba(15, 79, 138, 0.15)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

최대 너비 컨테이너를 가진 중앙 정렬 반응형 레이아웃으로, 대시보드를 위한 구조화된 다중 컬럼 UI로 전환되는 풀블리드 에디토리얼 히어로.

07

모션과 인터랙션

220msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

색상, 배경색, 불투명도에 대한 표준 전환(0.25초) · 필터와 같은 복잡한 속성에 대한 약간 더 긴 전환(0.5초) · 상호작용 요소에 대한 미세한 transform

버튼 및 내비게이션 링크와 같은 상호작용 요소에서 부드러운 색상 및 배경 전환. · 주요 CTA에 미세한 transform(스케일/이동) 또는 불투명도 변화.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Sierra — 桌面首屏（hero）
桌面首屏（hero）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Sierra — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

시에라(Sierra)는 인간 중심적이고 에디토리얼한 관점을 통해 포지셔닝하는 프리미엄 AI 에이전트 플랫폼입니다. 그 시각적 DNA는 따뜻하고 중립적인 색조 팔레트(잉크 #302E2D, 부드러운 배경 #F6F5F3)로 정의되며, 이는 고품질 사진이 감정적 역할을 담당하도록 합니다. 타이포그래피는 큰 디스플레이에 좁은 트래킹을 사용한 세련된 고딕-산스로, 깔끔하고 정교한 느낌을 만듭니다. UI 컴포넌트는 간단하며, 알약 형태 버튼과 미세한 border를 사용합니다. 핵심 주의사항: 합성 강조색을 피하고, 헤드라인에는 좁은 트래킹을 유지하고, 본문에는 가벼운 폰트 웨이트를 사용하며, 넉넉하고 숨 쉴 듯한 간격을 유지합니다. 전체적인 느낌은 신뢰할 수 있고 전문적이면서도 접근 가능합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko