styles
← 갤러리

Oatly Zine

크림빛 종이 위에 손으로 휘갈긴 검정 활자, 마커로 툭 찍은 파스텔 얼룩, 복사기로 긁어낸 콜라주 — 반짝임을 거부하는 손맛 가득한 반(反)기업 진(zine) 감성.

organic-natural hand-drawnzinediycollagephotocopy-texturehalftonecream-papermarker-accentsanti-corporateplayfulhard-shadow
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

오틀리(귀리우유 브랜드)의 상징적인 DIY·진(zine) 미학을 코드화한 스타일. 순백에 가까운 크림 종이, 굵고 각진 검정 테두리, 블러 0의 하드 오프셋(2px) 그림자를 뼈대로 삼되, 정제된 브루탈리즘과는 결이 다르다. 헤드라인은 일부러 삐뚤빼뚤하고 뭉툭한 디스플레이 활자로 크게 외치고, 액센트는 형광 원색이 아니라 마커로 문지른 듯한 탁한 노랑·핑크·초록·파랑 얼룩이다. 하프톤·해치·복사기 질감과 살짝 회전한 스티커·마커 밑줄이 '사람이 손으로 만든' 온기를 만든다. 완벽함 대신 의도된 불완전함, 매끈함 대신 종이의 결을 택하는 장난스럽고 인간적인 스타일.

타입 스케일

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

오틀리는 자체 커스텀 서체 'Margo'(일부러 삐뚤빼뚤하고 뭉툭한 위키(wonky) 그로테스크)를 헤드라인·본문에 두루 쓴다 — 측정값: H1 29.9px/900대 헤비, 본문 16px/400, 행간 1.3(빡빡). 상용 서체라 재현 시 Google Fonts 대체는 헤비 디스플레이=Archivo Black, 본문=Archivo. 위키한 손맛을 더 살리려면 디스플레이에 'Shantell Sans'로 바꿔도 좋다. 헤드라인은 대문자·헤비·큼직하게 외치고 행간은 좁게, 라벨은 대문자 스티커처럼 쓴다.

골든 예제 (exemplar)

News — Look Book Vol. 3

We exist to make it
easier to eat better.

Cream paper, black scrawl, marker splashes. A system that looks hand-pasted, not shipped.

01 — Paper

Cream, not white

Warm paper surfaces, thick black borders. The outline is the object.

02 — Stickers

Pasted on wonky

Everything tilts a degree or two, like it was cut out by hand.

03 — Texture

Photocopy hatch

Halftone and hatch fills add the grain of a zine, not a gradient.

Do

  • 크림빛 종이 위에 굵은 검정 2px 테두리 + 블러 0 하드 오프셋(2px) 그림자를 기본 문법으로 쓴다
  • 헤드라인은 대문자·헤비 웨이트로 크게 외치고 행간은 좁게(1.0 내외) 잡는다
  • 스티커·태그·카드를 -2deg~2deg 살짝 회전시켜 손으로 붙인 콜라주 느낌을 준다
  • 액센트는 형광이 아니라 마커로 문지른 탁한 노랑·핑크·초록·파랑을 배지·밑줄·얼룩처럼 포인트로 쓴다
  • 하프톤/해치/복사기 질감과 손그림 마커 밑줄로 사람 손맛의 온기를 더한다

Don't

  • 매끈한 그라디언트·글래스모피즘·소프트 다중 그림자 금지 — 그림자는 딱 한 겹, 블러 0
  • 형광 채도의 전자적 원색으로 화면을 채우지 말 것(그건 네오브루탈리즘) — 여긴 탁하고 인간적인 마커 톤
  • 모든 걸 완벽하게 정렬·대칭시키지 말 것 — 의도된 어긋남과 회전이 핵심
  • 은은한 1px 회색 경계선이나 큰 라운드 코너 금지 — 테두리는 굵은 검정, 코너는 각지게

컴포넌트 노트

button
base: border 2px solid var(--border), radius var(--radius-field)(3px), primary(잉크 블랙) 채움 + primary-foreground(크림) 대문자 헤비 라벨, padding 12px 20px, box-shadow 2px 2px 0 var(--foreground)
hover: 살짝 기울며(rotate -1deg) 그림자 4px 4px 0으로 커진다, 120ms
focus: 2px offset ring outline(var(--ring), 마커 옐로우), 보더 유지
disabled: opacity 0.5, box-shadow 제거
card
border 2px solid var(--border), radius var(--radius-box)(0~2px), box-shadow 2px 2px 0 var(--foreground). 배경은 card(크림) 또는 마커 액센트 블록. 콜라주 느낌으로 -2deg~2deg 미세 회전 허용. 내부 padding 24~36px.
input
border 2px solid var(--border), radius 3px, 배경 card(크림). 포커스 시 2px ring(옐로우) + 보더 유지.
nav
굵은 하단 보더(2px). 로고·아이콘은 손그림 톤, 링크는 대문자 라벨. 홈 아이콘·닫기(X) 등은 얇은 아이콘 폰트.
badge
대문자 라벨, border 2px solid var(--border), radius pill 또는 3px, 마커 액센트(옐로우/핑크/초록) 배경, 스티커처럼 -2deg 회전 + 2px 하드 그림자.
marker-underline
강조 텍스트 아래 var(--accent) 색의 굵고 삐뚤한 밑줄(마커로 그은 듯) — border-bottom 대신 background로 손그림 스트로크 흉내.