Seline Analytics
Hiljainen analyyttinen pöytä lämpimällä paperilla
Seline-teksti sijoittuu lämpimän kivitaustan (#fafaf9) päälle, jossa on yksi eloisa sininen aksentti – kaikki muut värit ovat neutraaleja ja peräisin Tailwind-kivipaletista. Otsikot on piirretty mittatilaustyönä suunnitellulla geometrisella sans-serif-fontilla (roobert), jonka paksuus on 400 ja kirjainväli kapea negatiivinen. Tämä antaa tekstille leppoisan, lähes kuiskauksen kaltaisen itsevarmuuden, joka on vastakohtana tyypillisen äänekkäälle SaaS-tyylille. Käyttöliittymäpinnat ovat litteitä valkoisia kortteja, jotka leijuvat lämpimän taustan yläpuolella yhdellä pehmeällä 16 pikselin sumennuksella. Reunat on luotu ohuilla, 1 pikselin kivisävyisillä viivoilla, joita käytetään runsaasti ensisijaisena rakenneosana raskaiden jakajien tai paneelien sijaan. Asettelu hengittää: täysleveä sisältö keskittyy runsaaseen pystysuoraan rytmiin, pillerinmuotoisiin interaktiivisiin säätimiin, maskottikuvaan persoonallisuuden kuvaamiseksi ja kojelaudan kuvakaappauksiin tuotteen todisteena. Kokonaisvaikutelma on toimituksellisesti analyyttinen: rauhallinen, yksivärinen, itsevarma, ja sininen toimintakehotus on sivun silmiinpistävin elementti kaiken muun tarkoituksellisen hillinnän ansiosta.
Sivu on maksimileveä, keskitetty noin 1200 pikseliin ja siinä on runsaasti pystysuoraa tilaa. Pääteksti on kaksirivinen, vasemmalle tasattu tekstilohko, jossa on yksi sinisellä korostettu lause ("yksinkertainen ja tehokas"), jota seuraa rivi, jolla on kaksi toimintakehotusta (sininen pilleri + haamupilleri), sitten rivi harmaasävyisillä kumppaneiden logoilla, sitten rivi luotettavuusluokituksilla ja lopuksi täysleveä kelluva kojelaudan esikatselu, joka menee hieman päällekkäin seuraavan osion kanssa. Taitoksen alapuolella on vuorottelevia rivejä suosituksia yksisarakkeisessa ruudukossa, jota seuraavat täysleveydet osiot, joissa on ominaisuuskuvauksia, vasemmalle tasattu teksti ja keskitettyjä tuotekuvia. Navigointi on minimalistinen yläpalkki – logo vasemmalla, keskitetyt navigointilinkit, kirjautuminen + sininen toimintakehotus oikealla – ja navigoinnin keskellä kelluva avatarirykelmä toimii henkilöllisyyden varmentamisena. Osioiden väliset tilat ovat leveitä (96 pikseliä), jotta luodaan toimituksellinen rytmi tiheän tietosekaisuuden sijaan.
Visuaalista kieltä hallitsevat tuotteen käyttöliittymän kuvakaappaukset – kojelaudan esikatselu on valokuva, joka on renderöity harmaasävyisellä (1) (0,94) kontrastisuodattimella, joka vaimentaa datan värit yksivärisiksi. Ainoa ihmishahmo on lineaarinen maskottitarra (huppupäinen hahmo), joka on piirretty SVG-tyyliin vain ääriviivoin. Tarra on sijoitettu kerran osiota kohden leikkisäksi vastapisteeksi analyyttiselle sisällölle, ja siinä on pehmeä varjo, joka luo tarramaisen syvyysefektin. Tuotemerkin logo ja symbolit ovat pieniä mustia kipinöitä/liekkejä. Valokuvia ei ole – ei lifestyle-kuvia, ei tiimikuvia, ei ympäristökuvia. Esine (kojelauta) on päähenkilö. Kaikki koristeelliset kuvakkeet ovat 1px:n ääriviivatyyliä joko #0c0a09 tai #3ba6f1, eikä niitä ole koskaan täytetty.
Paletti
Merkki
- Cyan Signal
#3ba6f1— Sivun ainoat väriaksentit ovat pääasiallinen toimintakehotus, aktiiviset linkit ja brändikuvakkeiden ääriviivat, joita käytetään säästeliäästi kiinnittämään huomiota toimintaan. - Cyan Edge
#3398e1— Sinistä käytetään korostamaan toimintojen ääriviivoja, linkkien otsikoita ja interaktiivisia elementtejä. Sitä ei tule käyttää ensisijaisena värinä toimintakehotuksissa.
Neutraali
- Ink Black
#0c0a09— Pääotsikot, korostettu leipäteksti ja ilmeikkäät kuvakkeet ovat lämpimän, lähes mustan värisiä. - Stone Canvas
#fafaf9— Sivun tausta on lämmin, kermanvärinen, joka tuntuu paperilta pikemminkin kuin valkoiselta kuin ruudulta. - Pure White
#ffffff— Karttapinnat, ulkonevat paneelit ja syöttökenttien täytöt ovat oletusarvoisesti tasaisia ja varjottomia. - Stone Border
#e8e6e5— Korttien, navigoinnin ja syöttökenttien ohuet reunat ovat ensisijainen rakenneosa, eivät erottimet. - Stone Muted
#d6d3d1— Lisäkehyksiä, hienovaraisia taustasävyjä, koristeellisia jakajia. - Ash Gray
#a8a29e— Ohjeteksti, kuvakkeiden ääriviivat, käytöstä poistetut tilat – luettavissa, mutta eivät aktiivisia.
Typografia
10:stä 52 pikseliin · 5 vaihetta
- Roobert — korvaava: Inter Tight or Satoshi · ääriviivat 400, 500 · Otsikoiden ja tekstin asettelun fontti on ainutlaatuinen geometrinen sans-serif, jossa on minimaalinen negatiivinen kirjainväli (-0,025 em 32 pikselin koossa, -0,021 em 52 pikselin koossa). Fontin tunnusmerkki on 400 x 52 pikselin paksuus: epätavanomainen, hienovarainen, mutta arvovaltainen ja hillitty. Otsikot ovat paikkansa olematta kuitenkaan liian ylivoimaisia.
- Inter — korvaava: Inter · ääriviivat 400, 500, 600 · Leipätekstin, navigoinnin, käyttöliittymän ja otsikoiden ensisijainen fontti on neutraali, universaali fontti kaikelle näytön ulkopuoliselle tekstille. 14 pikseliä, paino 400 ja riviväli 1,64 on leipätekstin vallitseva koko (esiintymistiheys 1174). Positiivinen kirjainväli (0,004 em) pienissä kokoluokissa varmistaa tiheän käyttöliittymän luettavuuden.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tilava |
| Perusvaihe | 8px |
| Painikkeen säde | 9999px |
| Kortin säde | 10px |
| Varjot | pehmeät varjot |
| Osioiden välillä | 96px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Seline Analytics -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Mollie — Kashmir-tiski, tumma kirjanpito. Jätä mustan tekstin ympärille runsaasti tyhjää tilaa toimitukselliselle suunnittelulle ja vahvista sitten tuotteisiin liittyviä seikkoja lämpimillä kermavaahdoilla, espressonruskeilla sävyillä ja taktiilisilla kuvilla oikeista maksutavoista.
- Kagi — Erillinen lukusali. Luo avoin valkoinen tila rohkean grafiittitekstin ympärille käyttämällä hienovaraisia violetteja aksentteja ja lämpimiä pastellivärisiä pintoja rikkomaan rauhaa.
- Milanote — Milanote on luova studio. Luo toimituksellisia galleriatyylisiä sivuja käyttämällä kelluvia visuaalisia tauluja: tummia kehystettyjä seiniä, valkoista näyttötilaa ja kuvakaappauksia, jotka näyttävät oikeilta esineiltä pehmeällä syvyydellä.
- Co2 — Ilmastoatlas talvivalossa. Luo sivuja ilmakuvamaisen dokumenttimaiseman kaltaisesti, jossa serif-otsikot, kategoriakoodatut tiedot ja jäiset kuvat korostavat leveitä valkoisia reunoja.
- GitButler — Turkoosi tekstin lopussa. Yhdistelmä voimakaskontrastisia serif-otsikoita hienovaraisilla teknisillä ruudukoilla, lämpimillä grafiittipinnoilla ja hillityllä turkoosilla aksentilla.
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Dub — Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
- Notion — Lämmin paperinen muistikirja keskipäivän auringossa
- Anthropic — Tieteellinen kenttälehti lämpimällä pergamentilla – rauhallisilla norsunluunvärisillä pinnoilla, serifioiduilla otsikoilla ja yhdellä savesta tehdyllä aksentilla, joka ilmestyy vain silloin, kun toimintaa tarvitaan.
- Calendly — Tummansininen muste kylmällä marmorilla