스타일 가이드 데모

타이포그래피, 색상, 배너, UI 컴포넌트 렌더링 예시를 포함한 맞춤형 W&B 브랜드 스타일을 미리 봅니다.

스타일 가이드 데모

이 페이지는 W&B 문서에 적용된 맞춤형 브랜드 스타일을 보여줍니다.

1. 타이포그래피

Source Serif 4 제목

H1 제목 - Source Serif 4

H2 제목 - Source Serif 4

H3 제목 - Source Serif 4

H4 제목 - Source Serif 4

본문 텍스트는 플랫폼 전반에서 최적의 가독성을 위해 시스템 글꼴 스택을 사용합니다.

2. 브랜드 색상

W&B 골드 #ffcc33

W&B Teal #13a9ba

Moon 100 #f5f6f7

일관성을 위해 링크에는 Teal 색상을 사용합니다.

3. 배너 컴포넌트

도움말 및 지원팀 배너

이 배너는 지원팀 배경 이미지를 사용하고 텍스트 그림자 효과를 적용합니다.

카드 배너

정보성 콘텐츠용의 은은한 회색 배경 배너입니다.

그라디언트 배너

시선을 끄는 공지에 sunset 그라디언트를 사용합니다.

W&B 브랜드 배너

공식 W&B 골드 그라디언트를 사용합니다.

4. 버튼 스타일

CTA 버튼기본 버튼브랜드 버튼문의하기 버튼

5. 그라디언트 배경

그라디언트가 적용된 히어로 섹션

히어로 섹션과 중요한 공지에 사용하는 sunset 그라디언트입니다.

은은한 그라디언트가 적용된 카드

카드 컴포넌트에 적용하는 은은한 그라디언트 오버레이로, 과하지 않으면서도 시각적 포인트를 더합니다.

W&B 그라디언트 텍스트 효과

사용 예시

MDX 배너

<div className="help-banner custom-banner">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>

MDX 버튼

<button className="primary-button">Click Me</button>

그라디언트 섹션

<div className="hero-gradient">
  <h1>Welcome to W&B</h1>
  <p>Build better models faster</p>
</div>

참고 사항

• 모든 스타일은 자동으로 다크 모드에 맞춰집니다
• 색상은 손쉽게 유지 관리할 수 있도록 CSS 변수로 정의되어 있습니다
• 그라디언트는 브랜드 색상을 일관되게 사용합니다
• 호버 효과는 대화형 피드백을 제공합니다