Bolder

사용 시기

인터페이스가 다른 모든 인터페이스처럼 보일 때 /impeccable bolder를 사용하세요. 평범한 산스, medium 웨이트, 부드러운 그림자, 소극적인 액센트 색상, 적당한 간격, 잊힘. 디자인이 틀린 것이 아니라 안전한 것입니다. 프로젝트가 존재감을 감당할 수 있고 현재 상태가 아무것도 가져오지 않을 때 bolder를 사용하세요.

사람들이 몇 시간씩 바라보는 대시보드에는 사용하지 마세요. 대담함은 마케팅 페이지, 히어로 순간, 콘텐츠 기능에서 자리를 얻습니다. 운영 도구에서는 아닙니다.

작동 방식

스킬은 사용성을 깨지 않고 4가지 축을 증폭합니다:

1. 스케일: 디스플레이 타이포가 clamp(3rem, 6vw, 6rem) 이상으로 밀려납니다. 뷰포트를 채우는 헤드라인, 회피하는 것이 아닌.
2. 무게 대비: medium 대 regular 대신 light 300과 heavy 800. 진짜 긴장, 어깨 으쓱이 아닌.
3. 색상 커밋: 액센트 색상이 희석되지 않은 전체 강도로 나타납니다. 배경이 입장을 취할 수 있습니다(ink, accent, cream) 모든 것이 paper인 대신.
4. 구성적 자신감: 비대칭, 그리드 밖, 풀쿼트, 행어 펑추에이션, 스케일 점프. 레이아웃에 목소리가 있습니다.

스킬은 더 많이 추가하지 않습니다. 이미 있는 것을 증폭합니다. 디자인에 세 가지 색상이 있으면 bolder는 네 번째를 추가하지 않고 세 가지에 더 강하게 커밋합니다.

직접 해보기

/impeccable bolder the landing page hero

예상 변경:

• 히어로 제목 3rem에서 clamp(3.5rem, 7vw, 6.5rem)으로, 디스플레이 폰트, 무게 700
• 서브헤드 regular에서 1.5rem 이탤릭으로, 시각적 정렬을 위해 제목에서 8px 왼쪽으로 이동
• 배경 paper에서 cream-to-paper 그라데이션으로 전환, 더 따뜻한 컨테이너 생성
• CTA 버튼 채우기, 그림자 제거, 보더 라디우스 축소, hover 상태에서 색상 반전
• 서포팅 이미지 네거티브 상단 마진으로 살짝 그리드 밖으로 밀어 비대칭 생성

주의 사항

• 잘못된 페이지에 실행하기. 프로덕트 대시보드, 설정, 폼은 bold면 안 됩니다. 읽기 쉬워야 합니다. 대신 /impeccable layout이나 /impeccable polish를 사용하세요.
• bold와 loud 혼동하기. Bold는 커밋되고 자신감 있다는 뜻입니다. Loud는 소리친다는 뜻입니다. Bolder는 전자입니다. 결과가 공격적으로 느껴지면 /impeccable quieter로 후속하세요.
• 같은 패스에서 /impeccable delight와 페어링하기. Delight는 안정적인 시각적 기준선에서 가장 잘 작동합니다. 먼저 bold, 안정화, 그다음 delight.