스타일 가이드

이 페이지는 스플래시 이미지, 버튼, 카드, 복사 블록 및 시각 토큰의 실시간 참조입니다.

스플래시 이미지

캐논िकल 히어로 이미지 컨테이너: <section class="splash-image"><picture class="splash-image__asset">...</picture></section>

모바일에서는 이미지가 복사본 위에 쌓여서 전체 카드 너비로 확장됩니다.

패턴 프레임워크

이 문서는 개념을 설명하는 부분이지만, 복사본은 여전히 세부적인 의미를 지니고 있습니다. 이미지 열은 데스크톱에서 시각적으로 고정되어 있으며 모바일에서 전체 너비의 겹줄이됩니다.

가격

계획 카드, 비교 테이블, 대중 친화적인 구매 프레임링.

문서와 스펙

공개적인 리우라이트, 로컬 소스 파일, 링크된 소스 출처.

분석 쿠키

헤드라인 매트릭, 데이터태블에 기반한 그리드, 그리고 am차트 시각.

1차 행동 2차적 행동 브라우저 버튼을

🧠

핵심 제품 혜택, 기능 설명 및 개념 섹션에 사용하십시오.

가격표가

$28/월

쌍둥이 클라우드 + OAuth3 밸브 + 11부 건축 증거.

하이라이트 박스: TL;DR 법적 통보, 강력한 통보, 그리고 컴팩트 강조 복사본을 사용하십시오.

공식 차트 스택: am차트s 5, 현지에서 서비스됩니다.

공식 테이블 스택: 데이터 테이블, 로컬로 서비스됩니다.

콘텐츠 텍스트 그것은 제품 및 기술 설명의 기본 긴 형태의 읽기 스타일입니다.

인트로 섹션은 더 넓은 요약에 대한 것입니다. 이는 복사본보다 더 많은 존재가 필요하지만 제목보다 무게가 적은 것입니다.

히어로 자막은 메인 헤드 아래의 첫 번째 값 프레임에 대한 예약입니다.

파란색은 `--sa-blue`

보라색은 보라색입니다. `--sa-purple`

오렌지색은 오렌지색입니다. `--sa-orange`