styles
← 갤러리

Bento Modern

애플 키노트 시대의 벤토 그리드 — 중립 캔버스 위에 크기가 뒤섞인 라운드 타일들이 스케일 대비로 이야기하는 스타일.

bento-modern bento-gridfeature-tilesstat-calloutsrounded-surfacesapple-keynotetonal-separation
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

2020년대 애플 키노트 벤토 그리드에서 출발한 피처 타일 미학. 부드러운 회색 캔버스 위에 2x2·1x2·1x1 크기의 라운드 타일을 촘촘히 배치하고, 각 타일은 캔버스보다 살짝 밝거나 어두운 소프트 콘트라스트 서피스로 띄운다. 큰 숫자·통계 콜아웃이 주인공이며 타일당 강한 액센트는 최대 하나. 그림자는 거의 없는 수준으로 옅게 쓰거나 완전히 플랫한 톤 단차로 대체하고, 모션은 1.02 스케일 호버 정도로 절제한다.

타입 스케일

stat Ag 스타일 견본 Style Specimen
display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

시스템 산세리프(SF 계열, Inter 폴백) 단일 패밀리. 위계는 스케일 대비로: 타일 안의 stat 숫자는 본문의 6배까지 키우고, 타이트한 네거티브 자간으로 밀도를 만든다. 캡션은 소문자 유지 — 대문자 라벨은 이 스타일이 아니다.

골든 예제 (exemplar)

Everything, at a glance.

Requests served, daily

2.4B

One tonal step off the canvas, one accent per tile, and a numeral doing all the talking.

See the numbers

Uptime

99.99%

Regions

Live in 34 regions worldwide

34

Median latency

18ms

Do

  • Compose every section as a bento grid of mixed tile sizes (2x2, 1x2, 1x1) on a 4-column base
  • Lead each key tile with one oversized stat numeral or a single bold visual
  • Separate tiles from the canvas by tonal step (card vs background), keeping shadows barely visible or absent
  • Limit each tile to at most one vivid accent color; reuse chart-1..5 as per-tile accents
  • Give tiles generous inner padding (28-40px) and tight 16-20px gaps between them

Don't

  • No frosted glass, backdrop blur, or translucent surfaces
  • No gradients as identity — surfaces are solid tonal steps
  • No heavy drop shadows or borders as the primary separation device
  • No uppercase tracked labels or editorial hairline rules
  • No more than one accent hue inside a single tile; never rainbow a tile's content

컴포넌트 노트

button
base: radius 999px(필), 배경 primary, 글자 primary-foreground, padding 10px 22px, 폰트 600
hover: 밝기 +5% 또는 scale(1.02), 200ms ease-out
focus: 2px ring offset outline
secondary_variant: 배경 secondary, 글자 secondary-foreground — 타일 내부 CTA용
disabled: opacity 0.45
card
타일 = card 배경, radius 22px, padding 28-40px, 소프트 섀도 1단계 또는 플랫. 내용은 상단 캡션 + 하단 큰 스탯/비주얼의 수직 대비. 호버 scale(1.02).
input
배경 secondary(보더 없음), radius 12px, padding 12px 16px, 포커스 시 ring 2px.
nav
얇은 고정 바, 배경 background에 살짝 블러 없이 톤만. 중앙 정렬 링크, 우측 필 버튼 1개.
stat
타일의 주인공. clamp(3.5rem,7vw,6rem)/700/자간 -0.04em 숫자 + 아래 caption 설명. 색은 foreground 기본, 액센트는 타일당 최대 1회.