​

스타일 가이드 데모

​

1. 타이포그래피

​

Source Serif 4가 적용된 제목

​

H1 제목 - Source Serif 4

​

H2 제목 - Source Serif 4

​

H3 제목 - Source Serif 4

​

H4 제목 - Source Serif 4

​

2. 브랜드 컬러

​

3. 배너 컴포넌트

​

4. 버튼 스타일

​

5. 그레이디언트 배경

​

사용 예시

​

MDX 내 배너

<div className="help-banner custom-banner">
  <h2>제목을 입력하세요</h2>
  <p>내용을 입력하세요</p>
</div>

​

MDX 내 버튼

<button className="primary-button">클릭하세요</button>

​

그레이디언트 섹션

<div className="hero-gradient">
  <h1>W&B에 오신 것을 환영합니다</h1>
  <p>더 나은 모델을 더 빠르게 구축하세요</p>
</div>

​

참고 사항

• 모든 스타일은 다크 모드를 자동으로 지원합니다
• 색상은 유지관리가 쉽도록 CSS 변수로 정의되어 있습니다
• 그레이디언트는 브랜드 컬러를 일관되게 사용합니다
• 호버 효과는 인터랙티브한 피드백을 제공합니다