> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 스타일 가이드 데모

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

<div id="style-guide-demo">
  # 스타일 가이드 데모
</div>

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

<div id="1-typography">
  ## 1. 타이포그래피
</div>

<div id="headings-with-source-serif-4">
  ### Source Serif 4 제목
</div>

<div id="h1-heading-source-serif-4">
  # H1 제목 - Source Serif 4
</div>

<div id="h2-heading-source-serif-4">
  ## H2 제목 - Source Serif 4
</div>

<div id="h3-heading-source-serif-4">
  ### H3 제목 - Source Serif 4
</div>

<div id="h4-heading-source-serif-4">
  #### H4 제목 - Source Serif 4
</div>

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

<div id="2-brand-colors">
  ## 2. 브랜드 색상
</div>

<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem', marginBottom: '2rem'}}>
  <div style={{padding: '1rem', background: 'var(--wandb-gold)', color: 'var(--moon-900)', borderRadius: '8px'}}>
    W\&B 골드
    \#ffcc33
  </div>

  <div style={{padding: '1rem', background: 'var(--wandb-teal-500)', color: 'white', borderRadius: '8px'}}>
    W\&B Teal
    \#13a9ba
  </div>

  <div style={{padding: '1rem', background: 'var(--moon-100)', color: 'var(--moon-800)', borderRadius: '8px'}}>
    Moon 100
    \#f5f6f7
  </div>
</div>

일관성을 위해 링크에는 <a href="#">Teal 색상</a>을 사용합니다.

<div id="3-banner-components">
  ## 3. 배너 컴포넌트
</div>

<div className="help-banner custom-banner">
  <h2>도움말 및 지원팀 배너</h2>
  <p>이 배너는 지원팀 배경 이미지를 사용하고 텍스트 그림자 효과를 적용합니다.</p>
</div>

<div className="card-banner custom-banner">
  <h3>카드 배너</h3>
  <p>정보성 콘텐츠용의 은은한 회색 배경 배너입니다.</p>
</div>

<div className="gradient-banner custom-banner">
  <h3>그라디언트 배너</h3>
  <p>시선을 끄는 공지에 sunset 그라디언트를 사용합니다.</p>
</div>

<div className="wandb-banner custom-banner">
  <h3>W\&B 브랜드 배너</h3>
  <p>공식 W\&B 골드 그라디언트를 사용합니다.</p>
</div>

<div id="4-button-styles">
  ## 4. 버튼 스타일
</div>

<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '2rem'}}>
  <button className="cta-button">CTA 버튼</button>
  <button className="primary-button">기본 버튼</button>
  <button className="brand-button">브랜드 버튼</button>
  <a href="#" className="contact-button">문의하기 버튼</a>
</div>

<div id="5-gradient-backgrounds">
  ## 5. 그라디언트 배경
</div>

<div className="hero-gradient">
  <h2>그라디언트가 적용된 히어로 섹션</h2>
  <p>히어로 섹션과 중요한 공지에 사용하는 sunset 그라디언트입니다.</p>
</div>

<div className="card-gradient">
  <h3>은은한 그라디언트가 적용된 카드</h3>
  <p>카드 컴포넌트에 적용하는 은은한 그라디언트 오버레이로, 과하지 않으면서도 시각적 포인트를 더합니다.</p>
</div>

<div style={{fontSize: '2rem', fontWeight: 'bold', marginTop: '2rem'}}>
  <span className="text-gradient-wandb">W\&B 그라디언트 텍스트 효과</span>
</div>

<div id="usage-examples">
  ## 사용 예시
</div>

<div id="banner-in-mdx">
  ### MDX 배너
</div>

```mdx theme={null}
<div className="help-banner custom-banner">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>
```

<div id="button-in-mdx">
  ### MDX 버튼
</div>

```mdx theme={null}
<button className="primary-button">Click Me</button>
```

<div id="gradient-section">
  ### 그라디언트 섹션
</div>

```mdx theme={null}
<div className="hero-gradient">
  <h1>Welcome to W&B</h1>
  <p>Build better models faster</p>
</div>
```

<div id="notes">
  ## 참고 사항
</div>

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