Superlist
Yöllinen työtila koralliriutoilla – hiljainen munakoisomainen sovelluspinta, jossa yksi lämmin oranssi kipinä viestii jokaisesta toiminnasta
Superlist käyttää keskiyön violetin sävyissä tuottavuuskieltä: tumma munakoiso, lämmin koralli ainoana päävärinä ja suuret sans-serif-otsikot, jotka vangitsevat koko tunnelman. Käyttöliittymä luo tunteen myöhäisillan keskittyneestä työskentelystä – hiljainen, kerrostettu ja itsevarma, ja värejä käytetään vain toiminnallisina välimerkkeinä toimintakehotuksissa, aktiivisissa tiloissa ja keskeisissä kohdissa. Pinnat on kerrostettu hienovaraisilla tummilla sävyillä, joissa on violetti pohjasävy (#181824 → #26253b), välttäen puhdasta mustaa, jotta syvyys tuntuu lämpimältä eikä steriililtä. Komponenteissa on runsaat pyöreät muodot (20 pikselin kortit, pilleripainikkeet), pehmeät varjot ja ne "hengittävät" mukavien 10–16 pikselin rakojen läpi tiukkojen ruudukoiden sijaan. Otsikon ääni on kaikki kaikessa: 600 pisteen painotus 70–88 pikselin välillä ja tiukka kirjainväli -0,02em käsittelee tekstiä typografisena eikä käyttöliittymänä – se on lähempänä toimituksellista tekstiä kuin SaaS-palvelua.
Tummat osiot kattavat koko sivun leveyden, ja sisältösäilöissä on keskitettyjä, maksimileveyden omaavia kohtia. Pääosio on keskitetty pystysuunnassa ja sisältää otsikon, alatekstin ja toimintakehotuksen (CTA), jota seuraa suuri tuotekuvakaappaus, joka on päällekkäin seuraavan osion kanssa. Seuraavat osiot vuorottelevat keskitettyjen tekstilohkojen ja korttiruudukoiden välillä. Arvosteluosiossa käytetään kolmipalkkeista ruudukkoa, jossa on arvostelukortit ja 16 sisämarginaalia. Navigointi on yksi yläpalkki, jonka vasemmalla puolella on logo, keskitetyt linkit ja oikealla puolella kirjautumistoiminnot – ei kiinteää sivupalkkia tai megavalikkoa. Osioiden väliset sisämarginaalit ovat reilut (16 sisämarginaalia), mikä luo tilavan, toimituksellisen rytmin tiheän tuoteruudukon sijaan.
Visuaalista tilaa hallitsevat tuotekuvakaappaukset – pää- ja sivuosiot täyttävät suuret, pyöristetyt kulmat omaavat kehykset, jotka esittelevät varsinaista sovelluksen käyttöliittymää. Valokuvat ovat minimaalisia, niitä käytetään vain käyttäjien avatareina tai sovelluksen sisäisen median esikatseluina (esimerkiksi konserttikuva tuotekuvan oikeassa paneelissa). Luotettavuuspalkin logot ovat mattapintaisia, hillittyjä valkoisia tekstisymboleita. Koristeellisia kuvituksia, abstrakteja grafiikoita tai 3D-renderöintejä ei ole. Visuaalisena strategiana on esitellä tuotetta skaalautuvasti, antaa typografian tehdä tunnetyö ja käyttää korallia ainoana korostusvärinä.
Paletti
Merkki
- Coral Ember
#ff4a36— Oranssia käytetään toissijaisena aksenttina koristeellisissa yksityiskohdissa ja korostamaan harvinaisia vihjeitä. Sitä ei tule käyttää ensisijaisena värinä toimintakehotuksissa.
Neutraali
- Aubergine Canvas
#181824— Sivun tausta, pääkangas, on lämmin, tumma sävy, joka korvaa puhtaan mustan, jolloin käyttöliittymä näyttää kerrokselliselta eikä tasaiselta. - Elevated Plum
#26253b— Korttipinnat, syöttökentät, navigointisäiliöt – syvyyden luominen ilman näkyvää rajaa askeleen helpompaa kuin piirtoalueella. - Pure White
#ffffff— Pääotsikot, painikkeiden tekstit ja kuvakkeiden ääriviivat – maksimaalinen kontrasti tummalla pohjalla. - Fog Text
#696f81— Päätekstin, toissijaisten otsikoiden ja vaimennettujen reunojen kontrastisuhde on 7:1, mikä tekee lukemisesta mukavaa munakoisonväristä taustaa vasten. - Ash Text
#8e8da0— Neutraalia väriä tuetaan käyttöliittymän toissijaisissa elementeissä, jakajissa ja vaimennettuissa otsikoissa. Sitä ei tule käyttää toimintakehotuksen ensisijaisena värinä. - Mist Highlight
#a3a3a7— Hienovaraiset reunat, jakajat ja passiiviset navigointielementit luovat hienovaraisen neutraalin sävyn, joka silti erottuu pohjasta.
Typografia
12:sta 88 pikseliin · 9 askelta
- sans-serif — korvaava: Inter · ääriviivat 400 · sans-serif - löytyy poimitusta datasta, mutta tekoäly ei ole kuvannut sitä.
- Haffer XH SemiBold — korvaava: Inter Tight · ääriviivat 400, 600 · Ensisijainen fontti näytölle ja otsikoille. Sitä käytetään 70–88 pikselin koossa pääotsikoissa, kirjainvälillä -0,02em ja painolla 600. Kapea kirjainväli ja suuri kirjainkorkeus antavat otsikoille toimituksellisen painon, jolloin tumma käyttöliittymä näyttää enemmän lehden kannelta kuin kojelaudalta. Korvaa se lihavoituna Inter Tight- tai General Sans -fontilla.
- Jersey 10 — korvaava: Anybody · ääriviivat 400 · Suurikokoinen, koristeellinen fontti numeroille ja korostuksille. Käytetään säästeliäästi erittäin suurissa kokoluokissa typografisten yksityiskohtien luomiseen. Voidaan korvata Anyone- tai Cabinet Grotesk -fontilla.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 10-16px |
| Painikkeen säde | 100px |
| Kortin säde | 20px |
| Varjot | pehmeät varjot |
| Osioiden välillä | 80px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Superlist -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ä
- DNA — Keskiyön observatorio hiukkaslinssin läpi nähtynä
- Abetterlou — Sparks on Saddle Leather - Lämmin kermainen fontti, joka hehkuu syvän kahvinmustalla taustalla, ja meripihkanväriset napit tuntuvat kuin kuumaa metallia painettuna sivuun.
- Galileo-ft — Syvän avaruuden komentokansi sähkönsinisillä signaaleilla
- Decide AI — Observatorio keskiyöllä - ilmainen signaali
- Redis Agency — Toimituksen työpaja, joka on avoinna aukioloaikojen ulkopuolella, on pikimusta paikka, jossa kaikki brändäystyö tehdään serif-fonteilla ja yhdellä punaisella retiisillä.
- Spellbook — Keskiyön oikeussali, joka on valaistu korallimusteella – tumma toimituksellinen pinta, jolta kuuluu vain lämmin oranssi kynänjälki
- Linear — keskiyön tarkkuusinstrumentti
- Origin Financial — Keskiyön galleria hiljaista loistoa. Hiljainen, lähes pimeä huone, jossa suuret serif-fontit ja muutamat valaistut väripaneelit luovat vaikutelman, että rahoitusala on huolellisesti kuratoitu taideteos.
- Hyperstudio — Kuvio on raaputettu obsidiaanikiveen. Teksti ja ohuet viivat reunustavat puhtaan mustan valkoisen tilan, jossa on satunnaisia kultaisia kompassinjälkiä osoittamassa tietä.
- Air — veistos "Keskiyön taivas lasin läpi"
- Raycast — Keskiyön komentokeskus, Coral Neon
- dope.security — Keskiyön terminaali violeteilla majakoilla