Slash
Hatinggabing vault na may ginintuang mga ledger
Gumagana ang Slash sa isang midnight gallery mode: isang halos itim na canvas, puting tipo, at isang mainit na tansong accent na nagsisilbing bantas. Ang mga headline ay ipinapakita sa Ivy Presto, isang high-contrast na didone serif na ginagamit sa matinding laki (hanggang 88px)—ang pagbangga ng serif at sans-serif na mga typeface ang siyang lagda ng system, na nagbibigay dito ng bigat sa pananalapi nang walang bigat ng brokerage ng tradisyonal na pagbabangko. Ang natitirang bahagi ng user interface ay sadyang minamaliit: manipis na mga border, mga kontrol na hugis-pill, compact na 16px na body text, at isang banayad na upsweep upang makahinga ang tipo. Ang isang gintong gradient (linya ng tsart, mga microaccent) ay nagdaragdag ng init sa monochrome system, na nagpapaalala sa mainit na liwanag ng isang Bloomberg terminal na ginawa para sa isang design audience.
Ang nilalaman ay 1216px ang lapad, nakasentro, na may 160px na patayong gutter. Ang home screen ay isang madilim, full-width na canvas na may hating komposisyon: isang serif header na nakahanay sa kaliwa (64–88px ang lapad) na may field ng email address sa ibaba, at isang malaking product UI card (isang screenshot ng dashboard) sa kanan na may 50% na lapad. Ang mga kasunod na seksyon ay gumagamit ng isang column, nakasentro na header (serif, 44–64px ang lapad) na may subheading sa Inter, na sinusundan ng tatlong column na grid ng mga card para sa mga deskripsyon/testimonial/blog ng feature. Ang nabigasyon ay isang nakapirming bar sa itaas: logo sa kaliwa, gitnang menu (Kumpanya, Mga Produkto, Mga Solusyon, Mga Kliyente, Pagpepresyo, FAQ), nakahanay sa kanan na login (hindi kapansin-pansin), at pagsisimula (puting elemento). Nagtatampok ang footer ng isang siksik na limang column na grid ng mga link na may impormasyon ng kumpanya at mga legal na abiso. Ang pahina ay nagpapalitan sa pagitan ng mga seksyon ng grid na mayaman sa nilalaman at mga istatistika sa full-screen—ang ritmo ay itinatatag ng malawak na puting espasyo sa pagitan ng mga column sa halip na sa pamamagitan ng pagpapalit-palit ng mga kulay ng background (ang buong pahina ay ipinapakita bilang isang solong, pinag-isang canvas).
Ang potograpiya ay editoryal at naturalistiko: maiinit na mga larawan ng mga tagapagtatag at mga miyembro ng koponan sa kanilang mga totoong kapaligiran sa trabaho (mga opisina, sala, mga lugar ng konstruksyon). Pinupuno ng mga imahe ang mga frame ng card nang gilid-gilid, nang walang padding. Isang madilim na gradient ang ginagamit sa ilalim ng mga testimonial card upang mapahusay ang pagbabasa ng teksto. Ang estetika—"Nagtagpo ang LinkedIn at ang editorial magazine"—ay kaswal, makatao, at bahagyang muted, hindi kailanman pinakintab ng stock photography. Pinagsasama ng mga thumbnail ng artikulo ang mga litrato na may mga konseptong may larawan (isang taong nakatayo sa isang maze, isang fireplace na may mga supot ng pera). Ang UI ng produkto ay ipinapakita sa dark mode na may ganap na opacity, na nakapatong sa itaas ng pahina sa mga banayad na madilim na ibabaw—isang sentral na elemento. Ang mga icon ay monochrome na may 1px stroke sa #2e3038 o #777a88, hindi kailanman pinupuno ng kulay ng brand.
Paleta
Neutral
- Bone
#e2e3e9— Malaking laki ng font para sa pangunahing teksto, detalyadong mga label ng data, at karaniwang tono ng teksto sa karamihan ng mga elemento ng UI. - Obsidian
#08080a— Ang canvas ng pahina, ang background ng footer, ang pinakamadilim na ibabaw ay halos itim na may banayad na asul na kulay. - Onyx
#040406— Ang ibabaw ng card, ang karagdagang background, ay isang hakbang na mas malalim kaysa sa pahina para sa visual effect. - Carbon
#121317— Nakataas na mga panel, hindi nakakaabala na UI fill - ang unang kapansin-pansing mas magaan na hakbang sa ebolusyon ng Surface Stack - Graphite
#1c1d22— Mga border, divider, icon container, control slider—ang pinakabanayad na kulay na tumutukoy sa istruktura. - Slate
#2e3038— Karagdagang mga border, mga naka-mute na linya ng icon, mga banayad na divider sa pagitan ng mga content block.
Tipograpiya
mula 13 hanggang 88px · 9 na hakbang
- Ivy Presto — kapalit: Playfair Display · mga balangkas 400, 500 · Isang serif font para sa mga heading at subheading—ginagamit lamang para sa mga heading at pamagat ng seksyon na may sukat na 28px pataas. Ang mga high-contrast na stroke na may manipis na serif ay lumilikha ng pakiramdam ng karangyaan sa editoryal; ang maliit na espasyo sa positibong letra na 0.01em ay hindi pangkaraniwan at nagbibigay sa font ng naka-print at mala-accounting na anyo. Ang serif font na ito ang pangunahing katangian ng brand—itinatangi nito ang Slash mula sa lahat ng iba pang mga kumpanya ng SaaS fintech na gumagamit ng geometric sans-serif fonts.
- Inter — kapalit: Inter (self-hosted via Google Fonts) · mga balangkas 300, 400, 500, 600, 700 · UI Sans—pangunahing teksto, nabigasyon, mga buton, mga label, mga link, mga field ng form, at mga subheading. Ang pangunahing teksto ay gumagamit ng 300 na font para sa hindi nakakasagabal na pangalawang teksto; 500 ang ginagamit para sa katamtamang diin na teksto at mga label ng buton; 600 ang nakalaan para sa mga label ng kategorya na nakasulat sa maliliit na malalaking titik. Ang negatibong espasyo ng mga letra ay bumababa mula 2 (-3) at bumababa habang lumiliit ang laki, na tipikal sa optical scaling ng Inter font.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | maluwang |
| Pangunahing hakbang | 8px |
| Radius ng buton | 9999px |
| Radius ng card | 10px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 160px |
| Lapad ng pahina | 1216px |
Gagawa ang AI ng website mo sa estilong Slash 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
- Modal — Isang phosphorescent terminal sa isang madilim na silid ng server - ang tanging pinagmumulan ng liwanag ay isang matingkad na berdeng kulay
- AgentQL — Mga Northern Lights sa ibabaw ng terminal sa gabi
- GitHub — Isang space command panel na may mga bioluminescent control point—isang madilim at maaliwalas na workspace kung saan ang isang berdeng liwanag ay nagtuturo sa daan pasulong.
- Doppler — Ang lilang ilaw ng vault sa hatinggabi. Ang halos itim na canvas ay kumikinang na may iisang lavender signal at berdeng confirmation light, bawat ibabaw ay kurbadong sapat para mahawakan.
- Basedash — Isang midnight data terminal na may matte font. Isang madilim na obserbatoryo kung saan ang mga metric ay kumikinang na kulay lila at berde, ang mga serif headline ay lumulutang sa ibabaw ng ingay, at ang mga puting hugis-pill na butones ang tanging maliwanag na bagay sa isang silid na may malambot na itim na ibabaw.
- Superwhisper — Ang mga ilaw sa hilaga ay natutunaw sa ibabaw ng salamin sa hatinggabi
- Better Stack — Hatinggabi SRE Console
- Langbase — Console ng Northern Lights sa Hatinggabi
- Astro — Kontrol ng Misyon sa Kalawakan na may iisang lilang liwanag mula sa isang nebula
- Wayfinder — Isang itim na screen ng pelikula na may halos hindi marinig na pamagat na nakapatong sa isang live na ilustrasyon. Ang interface ay isang brightness slider sa halip na isang control panel.
- HashiCorp — Ang control room sa hatinggabi na may lilang neon ay isang madilim na teknikal na ibabaw kung saan ang isang kumikinang na hexagonal cube ay nagsisilbing tanging sanggunian ng kulay.
- Umbrel — Isang maginhawang fire pit sa night server room—isang madilim na silid kung saan ang isang matingkad na liwanag ay nagbibigay-diin sa kung ano ang tunay na mahalaga.