Modal
어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
모달은 마치 어두컴컴한 서버실의 형광 단말기처럼 작동합니다. 거의 검은색 바탕에 연한 녹색 글꼴, 그리고 LED 상태 표시등 역할을 하는 밝은 라임 그린 색상의 포인트가 조화를 이룹니다. 개발자 중심의 디자인으로, 신호등 점선이 있는 고정폭 글꼴의 코드 창, 시그니처 색상인 녹색의 입체형 아이콘, 그리고 충분한 여백을 통해 각 섹션에서 하나의 요소만 돋보이도록 했습니다. 서체는 제목에는 사용자 정의 글꼴(Goga)을, 모든 UI 요소에는 가변 글꼴(Inter)을 사용했으며, 두 글꼴 모두 좁은 네거티브 트래킹으로 설정했습니다. 색상은 고르게 분포되어 있으며, 대부분의 화면은 무채색이고 밝은 라임 그린 색상은 주요 동작, 로고, 3D 일러스트레이션, 그리고 강조하고 싶은 부분에만 나타납니다. 구성 요소는 평면적이고 프레임이 없으며, 그림자 대신 은은한 녹색 테두리와 배경 흐림 효과를 통해 깊이감을 표현했습니다.
모달 창은 콘텐츠를 수용하기 위해 최대 너비 1280px의 전체 너비 다크 레이아웃을 사용합니다. 히어로 창은 중앙에 배치되어 있으며, 제목(첫 문장은 라임 그린 색상), 부제목, 두 개의 클릭 유도 버튼(CTA), 그리고 시각적 앵커 역할을 하는 하나의 3D 오브젝트가 포함되어 있습니다. 레이아웃은 사이드바와 분리되지 않습니다. 콘텐츠 섹션은 일관된 흐름을 따릅니다. 눈썹 태그(대문자, Moss 70) → Goga 제목 → 차분한 본문 텍스트, 그리고 기능 설명(텍스트 + 코드/비주얼 카드)이 있는 2단 레이아웃 또는 카드 그리드 형태의 3단 레이아웃이 이어집니다. 섹션 사이의 간격은 80px로 넉넉합니다. 페이지는 짙은 빈 줄무늬(#000000)와 약간 더 밝은 배경색(#181818)이 번갈아 나타나며, 페이지 중앙에 밝은 색 영역(#def0dd)이 시각적 휴식 공간으로 배치되어 있습니다. 내비게이션은 흐릿한 배경의 고정된 상단 바 하나로 구성되어 있으며, 사이드바나 메가 메뉴는 없습니다. 푸터는 간결하고 어두운 색상이며, 링크 열은 은은한 녹색입니다. 텍스트 밀도는 편안하며, 각 섹션에는 충분한 공간이 제공되고 카드 그리드는 최대 3개의 열을 사용합니다.
Modal의 시각적 언어는 3D로 빛나는 제품 렌더링과 어두운 코드 창 목업, 이렇게 두 가지 모드로 나뉩니다. 중심 요소는 마케팅용 그라데이션(라임 그린에서 에메랄드까지)을 사용하여 렌더링된 단일 3D 큐브이며, 브랜드의 시그니처 시각적 스타일인 녹색 빛으로 빈 공간을 감싸는 방사형 그라데이션 후광 안에 배치되어 있습니다. 워크로드 카드에는 어두운 배경에 동일한 라임 그린 색상으로 렌더링된 등각 투영 3D 아이콘(와이어프레임 큐브, 솔리드 계단, 레이어)이 포함되어 있습니다. 코드 및 벤치마크 결과는 신호등 점, 형광색 팔레트의 고정폭 구문 강조 표시, 은은한 녹색 테두리가 있는 터미널 창 카드로 표시되며, 실제 명령줄 인터페이스의 스크린샷과 유사합니다. 클라이언트 로고는 채도가 낮은 녹회색 레이블로 저대비의 단일 행에 표시되어 시각적 경쟁 없이 신뢰감을 전달합니다. 전체적인 밀도는 낮습니다. 대부분의 페이지는 텍스트가 주를 이루며, 이미지는 사진 그리드가 아닌 개별 초점으로 제시됩니다. 사진은 전혀 사용되지 않았으며, 전체 시각 시스템은 기하학적이고 빛나는 렌더링으로 구성되어 있습니다.
팔레트
상표
- Lime Pulse
#7fee64— 기업 아이덴티티의 주요 요소는 로고, 핵심 행동 유도 버튼(CTA), 태그 채우기, 활성 상태 및 일러스트레이션의 기본 색상입니다.
중립적
- Phosphor White
#ddffdc— 본문, 제목 색상, 아이콘 윤곽선 및 채워진 버튼 텍스트는 주요 가독성 영역입니다. - Void Black
#000000— 페이지의 캔버스, 가장 깊은 배경 레이어 - Ground Iron
#181818— 메인 버튼 채우기, 카드 표면의 어두운 부분, 사용자 인터페이스의 기본 표면. - Carbon Veil
#212525— 지면보다 약간 밝은 높은 표면, 내비게이션 배경. - Circuit Border
#485346— 주요 상호 작용 선인 윤곽선/고스트 액션 프레임은 은은한 녹회색입니다. - Phosphor Blue-Black
#1f2a33— 어두운 줄무늬 사이를 나누는 얇은 보조 표시선.
타이포그래피
12픽셀에서 64픽셀로 · 8단계
- Goga — 대사: Inter Tight or Space Grotesk · 요점 400, 500 · 제목 및 부제목 글꼴 – H1~H4 제목과 카드에 사용됩니다. Goga는 좁은 자간과 약간 각진 끝부분을 가진 맞춤형 기하학적 산세리프 글꼴입니다. 중간 굵기(500)는 카드 수준 제목을 강조하는 데 사용되며, 일반 굵기(400)는 히어로 제목과 섹션 제목에 사용됩니다. Modal의 정체성을 정의하는 대체 글리프 모양을 사용하려면 'ss01' 스타일 세트를 활성화해야 합니다. 음수 자간은 48px에서 -0.007em에서 21px에서 -0.017em까지 점진적으로 감소합니다.
- Inter Variable — 대사: Inter · 요점 400, 500 · 사용자 인터페이스 및 본문 내용 - 탐색 메뉴, 버튼, 레이블, 바닥글. 기본적으로 인터랙티브 요소와 탐색 메뉴에는 중간 굵기(500)가 사용되고, 단락에는 보통 굵기(400)가 사용됩니다. 작은 크기에서도 자간이 눈에 띄게 줄어들어(-0.026em(14px), -0.022em(16px)) 인터페이스가 압축되고 끝부분이 밀집된 느낌을 줍니다. 대체 구두점을 사용하려면 'cv11' 문자를 포함해야 합니다. 12px 크기의 대문자 레이블은 본문 내용의 밀도를 상쇄하기 위해 자간이 +0.05em 증가합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 20px |
| 버튼 반경 | 12px |
| 카드 반경 | 8px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1280px |
AI가 Modal 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Slash — 금박 장부가 있는 한밤중의 금고
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- GitHub — 생물 발광 제어 장치가 있는 우주 지휘 패널 - 어둡고 분위기 있는 작업 공간에서 하나의 녹색 빛이 앞길을 가리킨다.
- Doppler — 한밤중 금고의 보랏빛 조명. 거의 검은색에 가까운 캔버스에는 연보라색 신호등과 녹색 확인등이 은은하게 빛나고, 모든 표면은 손으로 잡을 수 있을 만큼 곡선으로 되어 있다.
- Basedash — 무광택 글꼴이 사용된 한밤중의 데이터 단말기. 어두운 천문대처럼, 측정값들은 보라색과 초록색으로 빛나고, 세리프체로 쓰인 헤드라인은 소음 위로 떠다니며, 하얀 알약 모양 버튼만이 부드러운 검은색 표면으로 둘러싸인 방 안에서 유일하게 밝게 빛나는 물체다.
- Superwhisper — 북극광이 한밤중의 유리창 위로 사라져 간다.
- Better Stack — 미드나잇 SRE 콘솔
- Langbase — 미드나잇 노던 라이츠 콘솔
- Astro — 성운에서 나오는 보라색 빛 하나가 심우주 관제센터에 비치는 모습
- Wayfinder — 검은색 영화 화면에 거의 들리지 않는 제목이 생동감 넘치는 일러스트 위에 떠 있습니다. 인터페이스는 제어판이 아닌 밝기 조절 슬라이더입니다.
- HashiCorp — 한밤중 보라색 네온 불빛이 비추는 제어실은 어둡고 기술적인 공간이며, 빛나는 육각형 정육면체가 유일한 색상 기준점 역할을 한다.
- Umbrel — 야간 서버실에 있는 아늑한 모닥불—어두운 방 안에서 은은한 복숭아빛 불빛 하나가 진정으로 중요한 것을 부각시킨다.