디자인 팩 아틀라스
EN
C Carbon · 13

본문

Body text

제목은 굵지 않은 가는 글씨, 체크리스트는 빈 네모 칸이에요. 표는 회색 머리 줄에 가로선만(ruled), 바깥 상자에 줄마다 번갈아 회색(boxed), 머리 바탕 없이 아래 선만(open)으로 달라져요.

쓰는 규칙본문 글자는 폰 17px·넓은 화면 18px, 줄 간격 1.8 — 어느 팩도 이걸 줄이지 않는다. 글 구조는 공통이고 팩은 모양만 바꾼다.

다른 이름: Prose
···
usage (Astro)
---
// src/pages/[post].astro
import { Prose } from '../components/registry';
---
<Prose>
  <Content />
</Prose>
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Prose": "ruled" }
}
props (TypeScript)
export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

네 팩 나란히 보기 →

···

KRDS

13본문Body text

본문을 넉넉한 글자 크기와 줄 간격으로 읽게 하고, 표·타임라인·체크리스트·인용에 모양을 입혀요. 변형은 선과 상자의 양이 달라요.

···

Primer

13본문Body text

깃허브 문서 본문처럼 제목 아래에 가는 선이 그어지고(open 은 선 없이 크게), 표·체크리스트·인용도 그 모양을 따라요.

···

shadcn/ui

13본문Body text

제목 아래 가는 선, 바깥 상자 없이 가로선만 있는 표가 기본(ruled)이에요. 상자로 감싸는 boxed, 여백이 넓고 제목이 큰 open 으로 바꿀 수 있어요.

ruled는 회색 머리 줄과 48px 가로선이 있는 표이고, 제목 위에 회색 선이 있어요. 타임라인은 점과 선으로 이어져요. boxed는 줄마다 회색이 번갈아 칠해진 표를 바깥 상자로 감싸고, 타임라인 항목마다 상자를 둬요. open은 표 머리 바탕과 세로선 없이 아래 선만 진하게 두고, 제목을 더 크게 쓰며, 넓은 화면에서 타임라인이 「시기 | 내용」 두 칸으로 나뉘어요.

본문에는 타임라인, 표, 인용, 체크리스트, 위급도 안내가 모두 같은 말투로 들어가요. 표가 많은 글은 ruled나 boxed가 읽기 쉽고, 글자 위주로 쭉 읽는 글은 open이 여백이 넉넉해요. 세 변형의 차이는 표와 타임라인, 제목 쪽에 몰려 있어요.

이럴 때 — 변형 3

  1. ruled가로선 표가 많고 차분하게 읽혀야 할 때 — 표는 가로선만, 타임라인은 점과 선.쓰는 사이트 4곳: feeding, toddlerfood, vaccination, 허브
  2. boxed칸 선 용량표·월령표처럼 칸을 짚어 가며 읽어야 할 때.쓰는 사이트 4곳: babyfood, babysick, milestone, newborn
  3. open넓은 여백 시기별 내용이 많은 글 — 큰 소제목, 시기 칸 | 내용.쓰는 사이트 3곳: babyplay, babysleep, birthprep
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.