브랜드

Posty의 브랜드를 한 페이지에

파트너, 대행사, 기자가 Posty를 지면과 화면에 싣기 위해 필요한 모든 것입니다. 마스코트 패밀리, 아이콘 세트, 실제로 쓰는 이미지, 컬러 토큰, 서체. 필요한 것을 가져가세요. 부탁은 아래 규칙뿐입니다.

파일 95개 · 24.8 MB · design tokens v1.0 · 배포할 때마다 저장소에서 자동 생성

로고와 앱 아이콘

Puff가 Posty의 마크입니다. mascot/cloud-default.png가 기본 로고이고, app-icon/ 에는 앱스토어, 파비콘, 프로필 이미지를 위한 정사각형 타일이 들어 있습니다. 비율을 유지해 조정하고, 사방에 Puff 높이의 절반 이상 여백을 두세요.

apple-touch-icon.png180×180 · 37.2 kB
icon-192.png192×192 · 41.7 kB
icon-512.png512×512 · 270.2 kB
icon.png64×64 · 6.8 kB
app-icon.png1024×1024 · 789.4 kB
cloud-default.png1024×1024 · 375.3 kB

표정별 Puff

같은 마크를, 저희가 그린 모든 표정으로. 화면당 하나만 고르세요. 빈 상태, 완료, 오류 페이지에는 각각 어울리는 표정이 있습니다. 한 구성 안에 두 표정을 섞지 마세요.

cloud-cool.png1024×1024 · 389.8 kB
cloud-happy.png1024×1024 · 381.5 kB
cloud-love.png1024×1024 · 402.8 kB
cloud-sleepy.png1024×1024 · 445.1 kB
cloud-sparkle.png1024×1024 · 413.2 kB
cloud-surprised.png1024×1024 · 385.2 kB
cloud-wink.png1024×1024 · 395 kB

Puff의 친구들

나머지 캐릭터도 Puff와 같은 몸짓을 쓰며 블로그 카드, 공유 이미지, 빈 상태에 등장합니다. 모든 캐릭터가 같은 표정 세트로 제공됩니다.

Beat

beat-cool.png1024×1024 · 324.5 kB
beat-default.png1024×1024 · 305.7 kB
beat-happy.png1024×1024 · 324.8 kB
beat-sleepy.png1024×1024 · 315.9 kB
beat-surprised.png1024×1024 · 310.5 kB
beat-wink.png1024×1024 · 312.6 kB

Blab

blab-cool.png1024×1024 · 302.1 kB
blab-default.png1024×1024 · 274.9 kB
blab-happy.png1024×1024 · 289.7 kB
blab-sleepy.png1024×1024 · 294.1 kB
blab-surprised.png1024×1024 · 282.1 kB
blab-wink.png1024×1024 · 285.3 kB

Penny

penny-cool.png1024×1024 · 317 kB
penny-default.png1024×1024 · 295.9 kB
penny-happy.png1024×1024 · 302.3 kB
penny-sleepy.png1024×1024 · 296.3 kB
penny-surprised.png1024×1024 · 297.9 kB
penny-wink.png1024×1024 · 285.4 kB

Tap

tap-cool.png1024×1024 · 282.2 kB
tap-default.png1024×1024 · 252.6 kB
tap-happy.png1024×1024 · 270.4 kB
tap-sleepy.png1024×1024 · 266.1 kB
tap-surprised.png1024×1024 · 256.2 kB
tap-wink.png1024×1024 · 264.3 kB

Twinkle

twinkle-cool.png1024×1024 · 297.9 kB
twinkle-default.png1024×1024 · 276.5 kB
twinkle-happy.png1024×1024 · 286.1 kB
twinkle-sleepy.png1024×1024 · 285.6 kB
twinkle-surprised.png1024×1024 · 286.6 kB
twinkle-wink.png1024×1024 · 286.6 kB

Zip

zip-cool.png1024×1024 · 388.8 kB
zip-default.png1024×1024 · 377.4 kB
zip-happy.png1024×1024 · 376.9 kB
zip-sleepy.png1024×1024 · 379.2 kB
zip-surprised.png1024×1024 · 378.3 kB
zip-wink.png1024×1024 · 381.2 kB

장면과 소품

동전, 하트, 별, 재생 버튼을 든 Puff와 단체 컷, 별똥별입니다. 표정 하나로 화면의 의미를 다 말할 수 없을 때 쓰세요.

friend-bubble.png1024×1024 · 281.3 kB
friend-coin.png1024×1024 · 276.9 kB
friend-heart.png1024×1024 · 311.9 kB
friend-play.png1024×1024 · 253.1 kB
friend-star.png1024×1024 · 281.9 kB
friends-group.png1024×1024 · 327 kB
shooting-star.png1024×1024 · 365.7 kB

글라스 아이콘

마스코트와 같은 질감을 가진 둥글고 유리 같은 아이콘 세트입니다. 장식 요소이므로 반드시 라벨과 함께 쓰고, 아이콘 하나가 의미를 혼자 지게 하지 마세요.

glass-bell.png640×640 · 167.8 kB
glass-bolt.png640×640 · 143.3 kB
glass-camera.png640×640 · 267.2 kB
glass-chat.png640×640 · 241.9 kB
glass-check.png640×640 · 226 kB
glass-cloud.png640×640 · 184.1 kB
glass-coin.png640×640 · 247.8 kB
glass-crown.png640×640 · 225.1 kB
glass-fire.png640×640 · 185.4 kB
glass-gift.png640×640 · 203.3 kB
glass-heart.png640×640 · 202.1 kB
glass-megaphone.png640×640 · 205 kB
glass-note.png640×640 · 181.3 kB
glass-play.png640×640 · 201.8 kB
glass-sparkle.png640×640 · 177.7 kB
glass-star.png640×640 · 202.8 kB

사진과 제품 화면

posty.so에서 사용하는 사진과 제품 화면입니다. Posty에 관한 보도와 파트너 자료에 사용할 수 있습니다. 스톡 이미지가 아니므로 다른 내용을 설명하는 데는 쓸 수 없습니다.

blob-avatars.jpg1600×893 · 65 kB
compliance-contracts.jpg1200×805 · 101.9 kB
compliance-disclosures.jpg1200×805 · 100 kB
compliance-taxes.jpg1200×805 · 146.2 kB
creators-1.jpg900×1117 · 143.9 kB
creators-2.jpg900×1117 · 108.5 kB
creators-3.jpg900×1117 · 144.9 kB
creators-4.jpg900×1117 · 186.9 kB
flow-reward-poster.jpg1200×900 · 26.5 kB
flow-reward.png1600×1194 · 651.2 kB
flow-source-poster.jpg1200×900 · 32.3 kB
flow-source.png1600×1194 · 749.2 kB
flow-track-poster.jpg1200×900 · 23.8 kB
flow-track.png1600×1194 · 496.3 kB
hero-creators-2.jpg1920×1071 · 343.8 kB
hero-creators-3.jpg1920×1071 · 291.7 kB
hero-creators.jpg1920×1071 · 291.6 kB
hero-poster.jpg1920×1068 · 29.7 kB
hero.jpg1920×1071 · 60.7 kB
sticker-pack.jpg1600×1194 · 132.9 kB
story-1.jpg1200×896 · 125 kB
story-2.jpg1200×896 · 197.3 kB
story-3.jpg1200×896 · 199.7 kB

컬러

제품, 이 사이트, 모바일 앱이 모두 컴파일 원본으로 삼는 단 하나의 토큰 목록 design/tokens.css에서 직접 읽어 옵니다. 이 페이지에 없는 색은 Posty의 색이 아닙니다.

Blush — 바탕

--blush-50#FFF6F7
--blush-100#FFEEF0
--blush-200#FFDCE2
--blush-300#FFC6D0
--blush-400#FFA3B4

Sky — 보조 전용

--sky-100#E6F4FF
--sky-200#C9E8FF
--sky-300#9DD6FF
--sky-400#62BBFF
--sky-500#2790E6
--sky-600#1F7FD1

Rose — 단 하나의 주요 행동

--rose-300#FFB3C1
--rose-500#FF8098
--rose-600#E8436B
--rose-700#D93A5E

Ink — 모든 텍스트

--ink-900#2B2036
--ink-700#5E5468
--ink-500#75697F
--ink-200#C9BFD3
--ink-100#E9E4EC

상태

--success#1B7A55
--success-bg#E3F7EE
--warning#8A5A00
--warning-bg#FFF3D6
--danger#B3273A
--danger-bg#FFE5E7
--info#1F7FD1
--info-bg#E6F4FF

면과 테두리

--bg-warm#FFEEF0
--bg-cool#E6F4FF
--paper#FFFFFF
--border-warm#F5D6DC
--border-cool#CFE6F7

그러데이션

--bg-hero
--bg-section
--mascot-body
--mascot-eyes

엘리베이션

--shadow-warm
--shadow-cool
--shadow-ink

모서리 반경

8px
12px
16px
24px
999px

컨트롤 높이

48px--control-h
40px--control-h-md
32px--control-h-sm

타이포그래피

제목은 Fredoka, 본문은 Plus Jakarta Sans, 숫자와 식별자는 JetBrains Mono입니다. Posty는 10개 로케일로 제공되므로 각 문자 체계는 해당 글리프가 있는 둥근 서체로 폴백합니다. 아래 스택은 페이지의 언어 속성에 따라 전환됩니다.

브랜드와 크리에이터, 제때 정산합니다.

Fredoka제목: 500, 600, 700. 헤드라인과 워드마크..font-display

브랜드와 크리에이터, 제때 정산합니다.

Plus Jakarta Sans본문: 400, 500, 600, 700. 읽는 모든 글..font-body

브랜드와 크리에이터, 제때 정산합니다.

JetBrains Mono고정폭: 400, 500. 숫자, 아이디, 파일명..font-mono

폰트 스택

문자 체계별 폴백을 토큰 파일에 선언된 그대로 옮긴 것입니다.

--font-display'Fredoka', 'M PLUS Rounded 1c', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Baloo Bhaijaan 2', system-ui, sans-serif
--font-body'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, sans-serif
--font-mono'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace

타입 스케일

--text-display64px
--text-h144px
--text-h232px
--text-h324px
--text-lg18px
--text-md16px
--text-label14px
--text-caption12px

브랜드 사용법

한 줄로: Blush는 바탕, Ink는 글자, Rose는 가장 누르게 하고 싶은 하나에만.

권장

모든 것 아래에 Blush를 깔아 주세요. 단색도, 위의 그러데이션도 좋습니다. 바탕이자 마스코트의 몸입니다.
모든 텍스트는 Ink로 조판하세요.
Rose는 마스코트의 눈과 화면당 하나의 주요 행동에만 쓰고, 그 버튼의 글자는 Ink로 두세요.
Sky는 보조로만 쓰세요. 링크, 정보, 신뢰 점수입니다.
모든 컨트롤은 알약 모양으로, 44-48px 터치 영역을 확보하세요.
문구는 이미지 안이 아니라 텍스트로 두세요. 그래야 10개 로케일로 번역됩니다.

금지

마스코트를 다시 그리거나 색을 바꾸거나 좌우 반전하거나 회전하지 마세요. 그 위에 글자를 올리는 것도 안 됩니다.
Rose 위에 흰 글자를 쓰지 마세요.
한 화면에 Rose 버튼을 두 개 두지 마세요.
로고를 늘이거나 자르거나 테두리를 넣거나 효과를 더하지 마세요. 비율을 유지해 조정하세요.
위 토큰 목록에 없는 색, 모서리 반경, 그림자를 새로 만들지 마세요.
파일을 다시 내보내거나 잘라 쓰지 마시고, 필요한 크기를 알려 주세요.

여기에 없는 것이 필요하세요?

벡터 원본, 로고 록업, 다른 크롭, 또는 전체를 묶은 아카이브까지 말씀해 주시면 보내 드립니다. 어디에 실리는지 알려 주시면 위 규칙과 맞춰 확인해 드리겠습니다.

hello@posty.so

Posty의 브랜드를 한 페이지에

파일 95개 · 24.8 MB · design tokens v1.0 · 배포할 때마다 저장소에서 자동 생성