큐레이션 · 오픈 · 무료

Directus

비기술 팀이 콘텐츠를 관리하고 개발자가 구축할 수 있게 해주는 오픈소스 헤드리스 CMS 및 백엔드-as-a-서비스입니다.

01

디자인 DNA

데이터베이스 인프라 전체를 위한 만능 리모컨.

02

컬러

약간 밝은 그레이를 통한 미묘한 명암 효과가 있는 고대비 모노크롬.

03

타이포그래피

transitional-serif · humanist-sans · geometric-mono

• display56px · 400
• h148px · 400
• body16px · 400

주요 헤드라인에는 에디토리얼 무게감을 더하기 위해 세리프를 사용합니다. · 모든 UI 요소 및 본문에는 산세리프를 사용합니다. · 코드 스니펫 및 기술적 UI 요소에는 모노스페이스를 예약합니다.

04

여백

8px 기본 격자를 사용하여 큰 섹션 전반에 걸쳐 일관된 수직 리듬을 만듭니다.

05

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

1px solid rgba(255, 255, 255, 0.08)

0 4px 12px rgba(0, 0, 0, 0.3) · 0 8px 24px rgba(0, 0, 0, 0.4)

06

레이아웃

전체 너비의 어두운 캔버스, 고정 헤더 및 중앙 정렬된 콘텐츠 컬럼으로 구성됩니다.

07

모션과 인터랙션

대화형 요소의 미묘한 색상 전환. · 콘텐츠 표시를 위한 부드러운 불투명도 페이드.

버튼과 링크가 미묘하게 불투명도 또는 배경 밝기를 변경합니다. · 미묘한 스케일링 또는 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 버튼은 검정 텍스트와 큰 필 둥근 모서리를 가진 화이트이며, 보조 버튼은 투명 배경에 화이트 텍스트를 사용합니다.
• card 미묘한 1px 테두리와 12-20px 둥근 모서리를 가진 어두운 회색 카드로, 기능 설명을 그룹화하는 데 사용됩니다.
• chip 투명 배경과 얇은 테두리를 가진 필 모양의 네비게이션 요소로, 활성 상태를 강조합니다.
• input 어두운 회색 입력 필드로, 얇은 테두리와 코드 입력을 위한 모노스페이스 타이포그래피를 특징으로 합니다.
• hero 큰 세리프 헤드라인, 산세리프 부제목, 코드 스니펫 및 이중 CTA를 갖춘 전형적인 좌측 정렬 히어로입니다.

09

보이스와 금지 목록

• 톤 자신감 있고, 전문적이며, 개발자 친화적이지만 지나치게 캐주얼하지 않습니다.
• 헤드라인 직접적이고, 간결하며, 이점에 초점을 맞추는 스타일로, 종종 권위를 위해 세리프 서체를 사용합니다.
• CTA '무료로 시작하기' 또는 '스튜디오 보기'와 같이 명확하고 행동 지향적인 스타일.

• 밝은 네온 강조색을 사용하지 마세요 — 스크린샷은 엄격한 모노크롬 팔레트를 보여줍니다.
• 둥근 사각형 카드를 사용하지 마세요 — 스크린샷은 1px에서 필 둥근 모서리를 가진 요소를 보여줍니다.
• 무거운 산세리프 헤드라인을 사용하지 마세요 — 스크린샷은 디스플레이용 전환형 세리프를 보여줍니다.
• 빽빽하고 작은 텍스트 레이아웃을 사용하지 마세요 — 스크린샷은 충분한 간격과 크고 읽기 쉬운 타이포그래피를 보여줍니다.
• 바쁘고 지저분한 배경이나 텍스처를 사용하지 마세요 — 스크린샷은 단색, 근 blacks #090909 배경을 보여줍니다.
• 장난스럽고 통통한 아이콘을 사용하지 마세요 — 스크린샷은 깔끔하고 미니멀한 UI 요소와 기술적 아이콘을 보여줍니다.
• 피하기: 지나치게 마케팅에 치우치거나 유행어가 가득한 카피를 피합니다.
• 피하기: 장난기 많거나 허황된 일러스트레이션을 피합니다.
• 피하기: 지나치게 복잡하거나 지저분한 레이아웃을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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