Letters
아침 일찍 야외 진료소에 간 환자. 은은한 파란색 천장 아래, 소독된 하얀색 탁자 위에는 파란색 수술 도구들이 흩어져 있다.
Letters는 의료 편지 작성 도구로, 부드럽고 차분한 분위기를 자아내는 푸른색 그라데이션 헤더로 시작하여 깔끔한 흰색 작업 공간으로 이어집니다. 시스템은 단색 스타일로 디자인되었습니다. 깨끗한 흰색 캔버스, 거의 검정색에 가까운 텍스트(#070709), 어두운 알약 모양의 클릭 유도 버튼, 그리고 은은한 그림자 위에 떠 있는 듯한 둥근 카드들이 특징입니다. 밝은 파란색(#2597d0)은 아이콘, 마이크로그래픽, 파형 플레이어와 같은 기능적인 요소에만 사용되며, 버튼이나 큰 영역에는 사용되지 않습니다. 서체는 기하학적 휴머니스트 산세리프체인 Open Runde를 사용하며, 큰 화면 크기에서는 과감한 음수 자간(-0.04em, 80px)을 적용하여 헤더를 자신감 있는 블록 형태로 압축합니다. 구성 요소들은 마치 의료 기기처럼 가볍게 느껴집니다. 얇은 베젤, 넉넉한 카드 간격, 알약 모양 버튼, 그리고 하늘 모양의 헤더가 감성적인 역할을 하도록 은은하게 적용된 입체감이 그 이유입니다.
하늘색 그라데이션 홈페이지가 페이지 전체 너비를 차지하며, 제목과 부제목은 중앙에 배치되고 그 아래에 클릭 유도 버튼이 있습니다. 홈페이지는 섹션 간 간격이 넉넉한(80~120px) 흰색 콘텐츠 영역으로 부드럽게 이어집니다. 주요 섹션은 동일한 비율의 크고 둥근 카드(반지름 18~32px)로 구성된 2단 그리드를 사용합니다. 섹션 제목은 카드 그리드 위에 한 단으로 중앙에 배치됩니다. 내비게이션은 중앙에 링크들이 모여 있고 로그인 버튼이 오른쪽에 정렬된 고정된 흰색 상단 바입니다. 전체적인 디자인은 분위기 있는 메인 스트라이프를 중심으로 흰색과 #f5f5f5 색상의 섹션이 일정한 세로 간격을 두고 번갈아 나타나는 리듬감을 보여줍니다. 사이드바나 메가 메뉴, 비대칭 레이아웃은 없으며, 페이지는 차분하고 대칭적인 컬럼처럼 느껴집니다.
시각 디자인은 거의 전적으로 제품의 사용자 인터페이스에 초점을 맞추고 있으며, 라이프스타일 사진이나 추상적인 3D 렌더링은 사용하지 않았습니다. 시각적 언어는 앱의 기본 인터페이스를 보여주는 제품 카드, 즉 문서의 "이전"과 "이후" 비교, 점선 테두리가 있는 로딩 영역, 파형 형태의 오디오 플레이어 등을 중심으로 구성되었습니다. 유일하게 분위기를 더하는 시각적 요소는 메인 이미지의 하늘 그라데이션입니다. 아이콘은 평면적인 단색 #2597d0 라인 아이콘(봉투, 마이크, 체크 표시)으로, 선 굵기가 균일하고 채워진 형태는 없습니다. 일러스트레이션 스타일은 절제되어 있으며, 제품 목업은 흰색 배경에 약간 회전시켜 깊이감을 표현하고, 급격하게 기울이지 않습니다. 손글씨체 폰트(The Doctor)는 "이전" 카드에 사용된 임상적인 필기체를 연상시키기 위한 유일한 수작업 요소입니다.
팔레트
상표
- Surgical Blue
#2597d0— 아이콘, 마이크 아이콘, 음파 재생기, 그리고 작은 기능적 요소들이 인터페이스 전체에 걸쳐 하나의 반음계를 만들어냅니다.
중립적
- Obsidian
#070709— 본문 텍스트, 채워진 콜투액션 버튼, 그리고 어두운 UI 요소들은 흰색 배경과의 대비를 부드럽게 하기 위해 순수한 #000 색상 대신 거의 검정색에 가까운 색상을 선택했습니다. - Paper White
#ffffff— 페이지 배경, 카드 표면 및 버튼 텍스트는 메인 요소 아래의 모든 섹션에 대한 주요 캔버스 역할을 합니다. - Cloud Gray
#f5f5f5— 추가 카드 표면과 섹션 배경은 기능 블록을 메인 캔버스에서 분리합니다. - Sky Tint
#d7e6f5— 판지 액자의 색조와 표면의 거의 눈에 띄지 않는 푸른빛은 칙칙함보다는 분위기를 자아낸다. - Charcoal
#60606c— 본문, 보조 텍스트 및 은은한 테두리 - 제목이 아닌 콘텐츠에는 중립적인 색상이 주로 사용됩니다. - Slate
#8b8b8b— 작은 텍스트와 비활성화된 경계선 - 위치를 표시하고 장애인이 접근성을 확보할 수 있도록 사용됩니다.
타이포그래피
12픽셀에서 80픽셀로 · 8단계
- sans-serif — 대사: Inter · 요점 400, 700 · 산세리프체 - 추출된 데이터에서 발견되었지만 AI가 설명하지 못했습니다.
- Open Runde — 대사: Inter Tight · 요점 400, 500, 600, 700, 900 · 제목과 탐색 메뉴에 사용되는 기본 글꼴은 기하학적 휴머니스트체이며, 큰 크기에서는 자간이 좁습니다. 80px에서 -0.04em을 적용하면 제목이 하나의 뚜렷한 블록으로 압축됩니다. 모든 제목, 탐색 메뉴 및 큰 텍스트에 사용하십시오.
- Inter — 대사: system-ui · 요점 400, 500 · 보조 본문 및 UI 텍스트 - 작은 제목, 탐색 요소 및 인라인 링크와 같이 보다 중립적인 읽기 리듬이 필요한 곳에 사용됩니다. Open Runde와 함께 사용하여 계층적 대비를 만듭니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 12-16px |
| 버튼 반경 | 100px |
| 카드 반경 | 18px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80-120px |
| 페이지 너비 | 1200px |
AI가 Letters 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Integrated Biosciences — 한밤중 생물발광 실험실
- Mintlify — 유리 테이블 위에 펼쳐진 구름 정원. 손으로 그린 하늘과 다큐멘터리 영상이 한데 어우러져, 색채와 개념이 충돌하는 유일한 순간이자, 페이지가 금욕적인 순백색으로 사라지는 곳이다.
- Gleap — 따뜻한 크림색 톤에 흑연색으로 포인트를 준 작업 공간. 무광 검정 잉크 점들이 린넨 소재의 구조물 위에 떠 있는 듯한 스튜디오.
- Render — 이 디자인은 브러시드 알루미늄 소재에 적용되었습니다. 인터페이스는 깔끔하고 기하학적인 엔지니어링 문서처럼 느껴집니다. 여백, 가는 선, 그리고 동작을 강조하는 단 하나의 보라색 선이 특징입니다.
- Grafbase — 차가운 대리석 위에 그려진 공학 도면
- Slash — 금박 장부가 있는 한밤중의 금고
- Modal — 어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
- Whimsical — 진한 자주색 잉크로 연보라색 바탕에 쓰인 이 노트는 창작 스튜디오에서 사용하는 노트북으로, 기술적인 화이트보드로도 활용할 수 있습니다.
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- Alveos One — 강돌로 만든 아늑한 안식처 – 은은한 조명이 비추는 조용한 명상실에는 흑연으로 만든 하나의 오브제가 부드러운 황금빛 속에 놓여 있다.
- GitHub — 생물 발광 제어 장치가 있는 우주 지휘 패널 - 어둡고 분위기 있는 작업 공간에서 하나의 녹색 빛이 앞길을 가리킨다.
- Buddy — 그래프 용지에 그려진 공학 도면. 흰색 도면 표면에는 거의 검은색 잉크로 희미하게 보이는 격자가 표시되어 있고, 형광 연두색 표시와 무지갯빛 그라데이션 선이 더해져 있다.