큐레이션 · 오픈 · 무료

Ideogram

세련된 에디토리얼 미학을 갖춘 프리미엄 AI 이미지 생성 플랫폼.

01

디자인 DNA

하이엔드 디자인 스튜디오와 현대 기술 스타트업의 결합.

02

컬러

따뜻한 오프화이트를 기반으로 대화형 요소에 활기찬 라벤더 악센트를 사용한 고대비 에디토리얼 팔레트.

03

타이포그래피

didone-serif · humanist-sans · monospace

• display74px · 400
• h148px · 400
• body16px · 400
• caption11px · 500

디스플레이 타입은 좁은 자간의 고대비 세리프입니다. · 본문 텍스트는 깔끔한 휴머니스트산스입니다. · 작은 텍스트는 레이블과 내비게이션에 대문자 트래킹을 사용합니다.

04

여백

수직 리듬은 일반적으로 주요 섹션 블록에 80px의 넉넉한 패딩으로 확립됩니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid #232425

rgba(35, 36, 37, 0.08) 0px 1px 2px 0px

06

레이아웃

단일 컬럼 에디토리얼 레이아웃에서 기능 쇼케이스를 위해 다중 컬럼 그리드로 확장됩니다.

07

모션과 인터랙션

콘텐츠 전환을 위한 페이드와 슬라이드. · 대화형 요소의 hover 시 색상과 배경 변화.

미묘한 색상 변화와 불투명도 변경. · 복잡한 애니메이션 없이 즉각적인 시각적 피드백.

08

컴포넌트

• button 고대비 채우기(검정/흰색/라벤더)와 넉넉한 패딩을 사용한 알약 모양 버튼입니다.
• card 깔끔한 타이포그래피와 함께 때로는 큰 이미지가 동반되는 기능 카드입니다.
• chip 분류용 소문자 대문자 텍스트 레이블입니다.
• input 깔끔한 테두리가 있는 입력 필드입니다.
• hero 전체 너비 이미지 또는 캐러셀과 짝을 이루는 거대한 세리프 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며 디자인 중심적.
• 헤드라인 큰 세리프 글꼴을 사용한 간결하고 임팩트 있는 문장.
• CTA 직접적이고 행동 지향적이며, 종종 알약 모양 버튼을 사용.

• 기본 배경에 밝은 흰색(#FFFFFF)을 사용하지 마세요. 스크린샷에서는 따뜻한 오프화이트(#FFF9F4)를 보여줍니다.
• 헤드라인에 일반적인 산스세리프를 사용하지 마세요. 스크린샷에서는 고대비 세리프 글꼴을 보여줍니다.
• 악센트에 표준 파란색을 사용하지 마세요. 스크린샷에서는 대화형 요소에 독특한 라벤더(#BD9FFF)를 보여줍니다.
• 버튼에 날카롭고 각진 모서리를 사용하지 마세요. 스크린샷에서는 완전히 둥근 알약 모양 버튼을 보여줍니다.
• 무겁고 뭉툭한 그림자를 사용하지 마세요. 스크린샷에서는 거의 보이지 않는 매우 미묘한 box-shadow를 보여줍니다.
• 밀집되고 비좁은 레이아웃을 사용하지 마세요. 스크린샷에서는 콘텐츠 블록 주변의 넉넉한 여백과 패딩을 보여줍니다.
• 피하기: 전문 용어가 가득한 기술 설명
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어
• 피하기: 복잡한 레이아웃

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko