Ciridae
타오르는 불씨의 맥동만이 느껴지는 텅 빈 방 - 마치 칠흑 같은 성당처럼, 유일하게 따뜻한 소리는 가느다란 녹 소리뿐이고, 모든 표면은 그림자가 아닌 섬세한 선으로 윤곽이 드러난다.
시리다에는 마치 공허함 속에서 작동하는 듯합니다. #0b0b0b 색상의 캔버스, 윤곽선이 거의 보이지 않는 알약 모양의 컨트롤, 그리고 400포인트 굵기의 Pragmatica Cond 대문자로만 구성된 타이포그래피가 특징입니다. 굵은 글씨체, 대소문자 혼합, 장식적인 요소는 일절 없습니다. 유일하게 사용된 색상은 #cc6437로, 따뜻하고 은은한 녹슨 색조이며 가장 가는 획과 작은 악센트 부호에만 사용되고 채우기에는 전혀 사용되지 않습니다. 지도는 #272a2a 색상 바탕에 10px 반경으로 떠 있는 듯하며 그림자는 없습니다. 입체감을 표현하지 않고 명암 대비와 1px의 가는 테두리로 표면을 정의합니다. 사진은 액체 대리석, 연기, 불꽃 등 분위기를 강조하기 위해 전체 화면 모드에서 텍스트 뒤에 배치되어 시각적 이미지가 단순한 삽화라기보다는 분위기를 자아냅니다.
페이지 레이아웃은 전체 너비이며, 콘텐츠는 최대 너비 약 1400px 내에서 중앙에 배치됩니다. 히어로 영역은 어두운 색상의 전체 너비 레이아웃으로, 중앙에 별자리 로고가 있고 좌우에 마이크로 레이블이 배치되어 있습니다. 섹션은 어두운 히어로 영역 → 밝은 스트라이프(본 색상) → 어두운 변형 텍스트 → 어두운 시스템 카드 그리드 → 어두운 푸터 순으로 번갈아 나타납니다. 하나의 밝은 섹션은 선명한 톤 전환을 만들어냅니다. 카드 그리드는 4개의 열을 사용하며, 첫 번째 카드는 나머지 세 카드보다 약 두 배 넓어 콘텐츠를 강조하는 비대칭 레이아웃을 구현합니다. 섹션 사이의 세로 간격은 넉넉합니다(80px 이상). 내비게이션은 최소화되어 있으며, 상단 뉴스 바와 왼쪽 정렬된 "지금 시작" 버튼, 오른쪽 정렬된 "메뉴" 버튼이 있습니다. 사이드바나 메가 메뉴는 없습니다.
전체 페이지를 차지하는 분위기 있는 사진들이 홈 화면과 카드 화면을 지배합니다. 이미지는 배경 흐림 효과(배경 흐림 값 50px 및 40px 감지)가 강하고 대비가 높으며, 푸른색과 붉은색 소용돌이가 있는 액체 대리석, 연기, 어두운 풍경의 실루엣, 불꽃/불씨 질감 등을 묘사합니다. 사진들은 생동감 넘치기보다는 분위기 있고 어둡습니다. 배경과 대비를 이루기보다는 동일한 톤 범위를 공유합니다. 제품 사진, 인물 사진, UI 스크린샷은 없습니다. 이미지는 단순한 제품 설명 콘텐츠가 아니라 분위기를 조성하는 역할을 합니다. 카드 그리드는 각 시스템을 서로 다른 분위기의 장면과 연결하여 사진이 제품을 있는 그대로 보여주는 이미지라기보다는 추상적인 시각적 식별자 역할을 하도록 합니다.
팔레트
상표
- Ember Rust
#cc6437— 강조선, 아이콘 선, 작은 텍스트 강조 표시는 흑백 시스템에서 유일하게 색상이 있는 부분이며, 채우기보다는 거의 눈에 띄지 않는 미세한 점처럼 나타납니다.
중립적
- Void Black
#0b0b0b— 메인 페이지와 각 섹션의 배경 이미지; 전체 시스템의 기반이 됩니다. - Charcoal Surface
#272a2a— 어두운 부분에는 캔버스보다 한 톤 밝은 판지와 패널로 만든 배경 이미지를 사용하여 그림자 없이 표면을 구분합니다. - Bone
#edebe7— 배경과 표면의 밝은 부분은 크림색이며, 시스템은 어두운 부분에서 밝은 부분으로 전환됩니다. - Bone Darker
#dfddd9— 따뜻하고 거의 흰색에 가까운 섬세한 색조인 "본(Bone)"은 여러 겹으로 이루어진 밝은 표면과 요소에 적합합니다. - Pure White
#ffffff— 본문 및 제목, 고스트 버튼 테두리, 탐색 요소는 모두 기본 색상으로 되어 있으며, 배경은 검정색(Void black)이고 대비율은 19.7:1입니다. - Abyss
#050505— 뉴스 기사(상단 뉴스 기사)의 배경을 도드라지게 표현하기 위해 메인 캔버스보다 한 단계 어두운 색조를 사용했습니다.
타이포그래피
11픽셀에서 32픽셀로 · 5단계
- Pragmatica Cond — 대사: Oswald · 요점 400 · 기본 표시 및 사용자 인터페이스 글꼴은 본문 텍스트의 경우 14px 대문자, 섹션 제목의 경우 20px, 본문 텍스트의 경우 32px의 폭을 가진 좁고 압축된 글꼴입니다. 매우 좁은 글꼴과 본문 텍스트의 14px 대문자 설정은 이 시스템의 특징을 가장 잘 나타내는 방식입니다. 본문 텍스트는 일반적인 산문보다는 건축용 서체의 속삭임처럼 읽힙니다. Pragmatica Condensed를 사용할 수 없는 경우 Oswald 또는 Barlow Condensed로 대체하십시오.
- Pragmatica — 대사: Inter · 요점 400 · 긴 문단에 사용되는 보조 기본 글꼴입니다(예: "AI 운영 체제" 카드 설명은 24px, 단락 본문은 15px). 긴 문단에서 읽기 쉽도록 Pragmatica Cond보다 약간 넓지만, 두께는 400으로 유지되며 굵게 표시되지 않습니다. Inter 또는 Söhne 글꼴로 대체할 수 있습니다.
- Roboto Mono — 대사: Roboto Mono (free · 요점 400 · 뉴스 스크롤에 사용된 고정폭 마이크로폰트("뉴스 • 2026년 6월 15일 • 크루서블 얼리 액세스 시작"). 고정폭 폰트는 여기에만 사용되어 명확한 기능적 구분을 만듭니다. 즉, 이것은 시스템 데이터이지 브랜딩이 아닙니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 16-20px |
| 버튼 반경 | 1440px |
| 카드 반경 | 10px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1400px |
AI가 Ciridae 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Dala — 검은 벨벳 위에 떠 있는 별자리
- Linear — 한밤중 정밀 기기
- Resend — 보라색 네온 컬러가 들어간 검은색 벨벳
- Dovetail — 검은 달 아래 놓인 설계도 - 거의 보이지 않는 그래프 선, 하얀 글씨, 그리고 보라색 반짝임 하나
- Neon — 어둠이 내린 서버실. 칠흑 같은 어둠 속에서 데이터와 사용자 상호작용에서만 빛이 새어 나온다.
- Discord — 게임 세계는 팝업 채팅창 뒤에 숨겨져 있으며, 각 구역은 고유한 조명과 캐릭터 세트를 갖춘 독립적인 환경입니다.
- Aaru — 자정의 입자장 관측소
- Atlas Card — 한 줄기 사파이어 빛줄기가 뻗어 있는 미드나잇 볼트는 칠흑 같은 어둠 속에서 오직 깊고 강렬한 파란색만이 중요한 의미를 지닌 공간입니다.
- Midjourney — 심해 속 생물 발광 단말기. 지능이 ASCII 스트림으로 시각적으로 생성되고, 제어 버튼이 희미하게 빛나는 패턴으로 나타나는 심해 세계.
- Checkly — 심궤도 임무 관제 센터
- Krea — 한밤중의 갤러리 느와르
- Wope — Wope는 보라색 지평선 인터페이스입니다. 어두운 천문대 테이블에서 유리 아래에서 보라색 빛이 뿜어져 나오는 모습을 상상해 보세요.