Ui
무광택 용지에 인쇄된 임상 계획서
shadcn/ui는 단색 디자인 시스템을 구축하기 위한 워크숍입니다. 깨끗한 흰색 캔버스, 부드럽고 따뜻한 회색 표면, 그리고 가장 미묘한 테두리에 배치된 큰 곡률의 카드들이 특징입니다. 인터페이스는 거의 완전히 무채색으로 구성되어 있습니다. 검은색 텍스트, 흰색 표면, 회색 보조 색조가 사용되었으며, 오류 상태에만 사용되는 강렬한 빨간색이 유일한 색상입니다. 타이포그래피는 Geist의 기하학적 중립성을 기반으로 하며, 화면에서 자간을 좁게 설정하여 차분하고 코드 같은 느낌을 자아냅니다. 이는 소비자 제품이라기보다는 개발자 인프라에 더 가깝습니다.
최소한의 이미지만 사용 - 시스템은 거의 전적으로 사용자 인터페이스로 구성됩니다. 주요 사진, 일러스트레이션 또는 장식용 그래픽은 없습니다. 제품 데모는 그리드에 배열된 구성 요소 목업(카드, 입력 필드, 버튼) 형태로 제공되어 문서이자 시각적 콘텐츠 역할을 합니다. 아이콘은 #0a0a0a 또는 #737373 색상의 1.5~2px 두께의 얇은 기하학적 선(아마도 Lucide에서 차용한 것)으로, 기능적 단서로 최소한으로 사용됩니다. 시각적 언어는 UI 구성 요소 자체입니다. 페이지는 모든 보이는 요소가 보이는 디자인 요소인 살아있는 스타일 가이드 역할을 합니다.
팔레트
중립적
- Canvas
#f5f5f5— 페이지 배경, 은은한 표면 채우기, 추가 버튼. - Paper
#ffffff— 카드 표면, 팝업 배경, 기본 버튼 채우기 - Surface Alt
#fafafa— 사이드바 배경, 눈에 거슬리지 않는 카드 옵션, 입력 필드의 유휴 상태. - Ink
#0a0a0a— 본문, 제목, 버튼 레이블, 아이콘 윤곽선. - Ink Soft
#171717— 버튼 배경 이미지에 채우기 기능이 있으며, 밝은 표면에 추가 텍스트가 표시됩니다. - Mid Gray
#737373— 본문, 자리표시 텍스트, 보조 레이블 및 아이콘의 기본 채우기 색상은 모두 흐릿합니다.
타이포그래피
12px에서 48px로 · 8단계
- Geist — 대사: Inter · 요점 400, 500, 600 · 모든 인터페이스 텍스트(본문 텍스트는 14px/400, 제목은 24~48px/600, 버튼은 13~14px/500)에 Geist 글꼴을 적용했습니다. Geist의 기하학적 글자 형태와 균일한 선 굵기는 개발자 도구에 중립적인 느낌을 줍니다. 600 선 굵기에 48px 자간, -0.05em 간격을 적용하면 편집된 티가 나지 않고, 의도적으로 작성된 듯한 명확하고 자신감 있는 제목을 만들 수 있습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8px |
| 버튼 반경 | 18px |
| 카드 반경 | 24px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 48-80px |
| 페이지 너비 | 1280px |
AI가 Ui 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Ventriloc — 따뜻한 종이 위에 펼쳐진 편집 데이터 관측소 - 흑백의 정밀함을 강조하는 하나의 주황색 불씨
- Geniestudio — 은은한 햇살이 비치는 노트, 여백이 넓고 펜으로 굵게 한 줄 써진 그런 노트
- xAI — 따뜻한 크림 랩과 블랙 필
- Cal — 단색의 실용성과 인간미. 엄격한 흑백 색상 팔레트를 통해 명확성과 기능성을 최우선으로 하되, 친근한 타이포그래피와 둥근 형태로 부드러움을 더한 시스템입니다.
- Scale — 고품질 박물관급 사진 현상소와 기술 프로젝트가 결합되었습니다.
- Contractbook — 짙은 남색 하늘 아래 크림색 종이로 된 계약서
- AutoSend — 보라색 조명 하나가 비추는 아늑한 돌로 된 스튜디오에는 세리프체로 쓰인 제목과 밝은 남색의 행동 촉구 문구가 조용하고 거의 하얀 공간에 공존합니다.
- Air — 조각 작품 "유리를 통해 본 한밤중의 하늘"
- SpatialChat — 흰 양피지 위에 보라색 맥박
- Squarespace — 시네마틱 모노크롬 갤러리
- Giga — 서리가 내린 흑요석 위로 펼쳐진 한밤중의 지평선
- Supabase — 한밤중의 코드 편집기, 석탄 먼지 바다 위에 빛나는 형광 녹색 점 하나 - 단 하나의 색채의 맥박