Ciridae
Isang silid na walang laman na may pintig ng nagbabagang baga - isang halos itim na katedral kung saan ang tanging mainit na tunog ay isang manipis na linya ng kalawang, at ang bawat ibabaw ay nailalarawan ng mga pinong linya sa halip na anino.
Gumagana ang Ciridae sa isang kawalan: isang #0b0b0b canvas, mga kontrol na hugis-pill na may halos hindi mapapansing mga balangkas, at tipograpiyang naka-lock sa uppercase ng Pragmatica Cond sa bigat na 400—walang bold, walang halo-halong case, walang mga elementong pandekorasyon. Ang tanging chromatic note ay #cc6437, isang mainit at umuusok na kalawang na kulay na ginagamit bilang pinakamanipis na mga stroke at maliliit na accent bantas, hindi kailanman bilang fill. Lumulutang ang mga mapa sa #272a2a na may 10px radius at walang mga anino; iniiwasan ng sistema ang elevation, na tumutukoy sa mga ibabaw sa pamamagitan ng tonal contrast at pinakamagagandang 1px na mga border. Ang mga litrato ay lubhang malabo at atmospheric—likidong marmol, usok, apoy—na inilalagay sa likod ng teksto sa full-screen mode, kaya ang visual na imahe ay mas atmospheric kaysa sa ilustratibo.
Ang layout ng pahina ay full-width, na ang nilalaman ay nakasentro sa loob ng maximum na lapad na ~1400px. Ang hero ay isang madilim at full-width na komposisyon na may nakasentrong logo ng konstelasyon na nasa gilid ng mga micro-label sa kaliwa at kanang gilid. Salit-salit ang mga seksyon: dark hero → light stripe na may mga underlay (Bone) → dark transform text → dark grid ng mga system card → dark footer. Ang nag-iisang light section ay lumilikha ng iisang matalas na tonal transition. Ang card grid ay gumagamit ng 4 na column, kung saan ang unang card ay humigit-kumulang doble ang lapad kaysa sa iba pang tatlo, na lumilikha ng asymmetrical na layout na may diin sa nilalaman. Maluwag ang patayong espasyo sa pagitan ng mga seksyon (80px+). Minimal lang ang navigation: isang top news bar + isang naka-align sa kaliwa na "Start Now" at isang naka-align sa kanan na "Menu" sa top bar. Walang sidebar, walang mega-menu.
Mga litratong pang-atmospera, na sumasakop sa buong ibabaw ng pahina, ang nangingibabaw sa home screen at mga card. Ang mga imahe ay lubhang malabo (natukoy ang mga halaga ng blur sa background na 50px at 40px) at mataas ang contrast, na naglalarawan ng likidong marmol na may mga asul-pulang pag-ikot, usok, madilim na mga silweta ng mga tanawin, at mga tekstura ng apoy/baga. Ang mga litrato ay malungkot at madilim, hindi matingkad—nagbabahagi sila ng parehong hanay ng tono tulad ng blangkong canvas sa halip na maging kapansin-pansin laban dito. Walang mga larawan ng produkto, walang mga tao, walang mga screenshot ng UI. Lumilikha ang mga imahe ng kapaligiran sa halip na magsilbing naglalarawang nilalaman. Inima-map ng card grid ang bawat sistema sa isang iba't ibang tanawin sa kapaligiran, na nagpapahintulot sa mga litrato na gumana bilang abstract visual identifier sa halip na literal na mga larawan ng produkto.
Paleta
Tatak
- Ember Rust
#cc6437— Ang mga accent stroke, icon lines, at maliliit na highlight ng teksto ang tanging kulay kromatiko sa isang monochrome system, na mas lumilitaw bilang isang bahagyang napapansing kumikibot na batik kaysa sa isang fill.
Neutral
- Void Black
#0b0b0b— Mga larawan sa background para sa pangunahing pahina at mga seksyon; ang batayan ng buong sistema. - Charcoal Surface
#272a2a— Ang mga larawan sa background na gawa sa karton at mga panel sa madilim na bahagi ay isang tono na mas magaan kaysa sa canvas upang lumikha ng paghihiwalay ng mga ibabaw nang walang mga anino. - Bone
#edebe7— Ang mga mapuputing bahagi ng background at ibabaw ay kulay krema, kung saan ang sistema ay lumilipat mula madilim patungo sa maliwanag. - Bone Darker
#dfddd9— Isang pinong lilim na tinatawag na "Bone" para sa mga multi-layered light surface at mga elemento ng mainit, halos puting kulay. - Pure White
#ffffff— Ang lahat ng pangunahing teksto at mga heading, mga hangganan ng ghost button, at mga elemento ng nabigasyon ay nasa pangunahing kulay na may 19.7:1 contrast ratio sa isang Void black background. - Abyss
#050505— Nakataas na background para sa news strip (itaas na news strip) - mas madilim nang isang shade kaysa sa pangunahing canvas upang mapansin ang strip.
Tipograpiya
mula 11 hanggang 32px · 5 hakbang
- Pragmatica Cond — kapalit: Oswald · mga balangkas 400 · Ang pangunahing font sa display at user interface ay isang makitid at pinaikling font na may 14px all-caps para sa body text, 20px para sa section heading, at 32px para sa main text. Ang isang napakakitid na font at 14px all-caps para sa body text ang pinakakatangian na solusyon para sa system: ang body text ay nagbabasa na parang bulong ng isang architectural typeface sa halip na parang ordinaryong prosa. Palitan ng Oswald o Barlow Condensed kung hindi available ang Pragmatica Condensed.
- Pragmatica — kapalit: Inter · mga balangkas 400 · Isang pangalawa at pangunahing font na ginagamit para sa mas mahahabang sipi ng prosa (hal., ang deskripsyon ng card na "AI Operating System" ay 24px, ang teksto ng talata ay 15px). Bahagyang mas malapad kaysa sa Pragmatica Cond para sa madaling pagbabasa sa mas malalaking bloke, ngunit nasa 400 pa rin ang bigat—hindi kailanman naka-bold. Palitan ng Inter o Söhne.
- Roboto Mono — kapalit: Roboto Mono (free · mga balangkas 400 · Isang monospaced microfont para sa isang news ticker ("BALITA • HUNYO 15, 2026 • BUKAS NA ANG CRUCIBLE EARLY ACCESS"). Ginagamit lamang dito ang monospaced font, na lumilikha ng malinaw na pagkakaiba sa paggana: ito ay datos ng sistema, hindi branding.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 16-20px |
| Radius ng buton | 1440px |
| Radius ng card | 10px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80px |
| Lapad ng pahina | 1400px |
Gagawa ang AI ng website mo sa estilong Ciridae at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Dala — isang konstelasyon na nakalutang sa itim na pelus
- Linear — instrumentong may katumpakan sa hatinggabi
- Resend — itim na pelus na may lilang kulay neon
- Dovetail — Isang blueprint sa ilalim ng itim na buwan—halos hindi nakikitang mga linya ng graph, puting font, isang lilang kislap
- Neon — Isang silid ng server pagkagabi. Purong kadiliman, kung saan ang tanging liwanag ay nagmumula sa data at mga interaksyon ng user.
- Discord — Ang mundo ng laro ay nakatago sa likod ng isang pop-up chat window - ang bawat seksyon ay isang self-contained na kapaligiran na may sarili nitong ilaw at hanay ng mga karakter.
- Aaru — Obserbatoryo ng Particle Field sa Hatinggabi
- Atlas Card — Ang Midnight Vault, kasama ang nag-iisang sinag ng sapiro, ay isang madilim na kalawakan kung saan ang tanging mahalaga ay ang malalim na electric blue.
- Midjourney — Isang bioluminescent terminal sa malalim na karagatan. Isang mundo sa malalim na dagat kung saan ang katalinuhan ay biswal na bumubuo ng sarili nito sa mga ASCII stream, at ang mga kontrol ay lumilitaw bilang mahinang kumikinang na mga pattern.
- Checkly — Sentro ng Pagkontrol ng Misyon sa Malalim na Orbita
- Krea — gallery noir sa hatinggabi
- Wope — Ang Wope ay isang lilang interface ng horizon. Isipin ang isang madilim na mesa ng obserbatoryo na may lilang liwanag na sumisikat mula sa ilalim ng salamin.