01 — HERO

Apple-inspired · 2026

Designed in cells.
Built with intention.

Apple 제품 페이지 톤 — 비대칭 grid, 큰 radius, 부드러운 shadow. SaaS 피처 랜딩 · 포트폴리오 · 제품 소개에 어울려요.

02 — Typography

Display XL

Display XL

Display

Display Default

Title LG

Title LG

Title

Title default

Body

Body 1rem regular. The quick brown fox jumps over the lazy dog.

Mono

$ swift build
03 — Buttons
04 — Form

Email

Message

Progress · 72%

05 — Tags
Default Accent Success Warning Danger Inverted
06 — Cards

Default

Pearl base.

소프트한 펄 화이트 — Apple bento 톤.

View →

Accent

Apple blue.

Linear gradient — accent → soft.

View →

Inverted

Deep night.

반전 surface — 강조 셀에 어울려요.

View →
07 — Stats

Users

12,489

↑ 18% this week

Revenue

$42.5K

↑ 7.1% MTD

Sessions

3.2K

↓ 4% yesterday

08 — Article

Dispatch · 042

Cells, not columns.

By Ryan · 2026.05.22 · 4 min

Bento Grid는 일본 도시락 칸막이에서 영감을 받았어요. Apple이 iPhone, MacBook 피처 페이지에서 처음 대중화했고, 이제 Notion, Linear, Pinterest 등 다양한 제품 페이지의 기본 레이아웃이 되었어요.

핵심은 *동일한 radius와 gap으로 통일감을 주면서, 셀 크기를 비대칭으로 다양화*하는 거예요. CSS Grid의 `span`을 활용하면 1×1, 2×1, 1×2, 2×2 등 다양한 비율의 셀을 하나의 그리드 안에 자연스럽게 배치할 수 있어요.

The grid is the message. The cells are the medium.

참고: bentogrids.com — gallery

09 — Signature

Bento 시그니처: 비대칭 셀 grid — `grid-column: span N` 으로 1×1, 2×1, 1×2, 2×2 자유 조합.

FEATURED · 2×2

042

가장 큰 셀에 가장 중요한 메시지. Apple keynote 스타일.

USERS

12K

UPTIME

99.9%

FEATURE · 2×1

Asymmetric, intentional.

가로 2칸 셀은 헤드라인이나 인용에 적합해요.

SPEED

12ms

REGIONS

28

이 디자인, 내 프로젝트에 바로 쓸 수 있어요

크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.

Creator OS 사용 중이라면

에이전트에게 말 한마디면 끝

테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.

"Bento 스타일로 SaaS 피처 랜딩 만들어줘"
Creator OS 시작하기 →
직접 적용하고 싶다면

2단계로 즉시 적용

① <head> 에 CSS 2줄

<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-tokens.css">
<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-components.css">

② <body> 에 테마 한 줄

<body data-theme="bento">