Letters
Aamuvastaanotto ulkoilmaklinikalla – steriili valkoinen pöytä pehmeän sinisen katon alla, täynnä kirurgisia sinisiä instrumentteja
Letters on lääketieteellisten kirjeiden kirjoitustyökalu, joka alkaa liukuvärjätyllä avoimen taivaan muotoisella otsikolla – pehmeällä, tunnelmallisella sinisellä raidalla, joka luo rauhallisen, kliinisen ilmapiirin – ennen siirtymistä puhtaaseen valkoiseen työtilaan. Järjestelmä on suunniteltu yksiväriseen tyyliin: puhdas valkoinen kangas, lähes musta teksti (#070709), tummat pillerinmuotoiset toimintakehotukset ja pyöristetyt kortit kelluvat hienovaraisimpien varjojen päällä. Yksi kirkkaan sininen (#2597d0) on varattu toiminnallisille välimerkeille – kuvakkeille, mikrografiikalle, aaltomuotojen soittimille – joita ei koskaan käytetä painikkeissa tai suurissa täytöissä. Typografiassa käytetään Open Rundea, geometrista humanistista sans-serif-typografiaa, jossa on aggressiivinen negatiivinen kirjainväli suuremmilla näyttökooilla (-0,04em 80 pikselin tarkkuudella), mikä pakkaa otsikot itsevarmoiksi lohkoiksi. Komponentit tuntuvat kevyiltä, kuin lääketieteellinen instrumentti: ohuet reunukset, reilu korttiväli, pillerinmuotoiset painikkeet ja huomaamaton korkeusero, jonka avulla taivaan muotoinen otsikko voi tehdä tunnetyön.
Taivaansininen liukuvärjätty kotisivu ulottuu koko sivun leveydelle, ja siinä on keskitetty otsikko ja alateksti sekä toimintakehotuspainike alapuolella. Se siirtyy sujuvasti valkoiseen sisältöalueeseen, jossa osioiden välillä on reilusti tilaa (80–120 pikseliä). Ominaisuudet-osioissa käytetään kaksisarakkeista ruudukkoa, joka koostuu suurista, pyöreistä korteista (säde 18–32 pikseliä) ja niiden suhteellinen koko on sama. Osioiden otsikot ovat aina keskitettyinä yhteen sarakkeeseen korttiruudukon yläpuolelle. Navigointi on kiinteä valkoinen yläpalkki, jossa on keskitetty linkkiryhmä ja oikealle tasatut kirjautumistoiminnot. Yleinen rytmi on yksi, tunnelmallinen pääraita, jota seuraavat vuorotellen valkoinen ja #f5f5f5-osiot, joissa on johdonmukainen pystysuora hengitystila. Sivupalkkia, megavalikkoa tai epäsymmetrisiä asetteluja ei ole – sivu tuntuu rauhalliselta, symmetreltä sarakkeelta.
Visuaalinen suunnittelu keskittyy lähes kokonaan tuotteen käyttöliittymään – ei lifestyle-kuvia tai abstrakteja 3D-renderöintejä. Visuaalinen kieli rakentuu tuotekorttien ympärille, jotka esittelevät sovelluksen natiivin käyttöliittymän: dokumenttien "Ennen" ja "Jälkeen" -vertailu, katkoviivalla varustettu latausalue ja aaltomuodon muodossa oleva äänisoitin. Ainoa tunnelmallinen visuaalinen elementti on pääkuvan taivaan kaltevuus. Kuvakkeet ovat tasaisia, yksivärisiä #2597d0-viivakuvakkeita (kirjekuori, mikrofoni, valintamerkki), joiden viivapaksuudet ovat yhdenmukaiset, ilman täytettyjä vaihteluita. Kuvitustyyli on hillitty: tuotemallit näytetään valkoisella taustalla, hieman käännettyinä syvyyden luomiseksi, eivätkä koskaan jyrkästi kallistettuina. Käsin kirjoitettu fontti (The Doctor) on ainoa orgaaninen/käsintehty elementti, jota käytetään yksinomaan "Ennen"-kortin kliinisen käsialan herättämiseen.
Paletti
Merkki
- Surgical Blue
#2597d0— Kuvakkeet, mikrofonikuvake, ääniaaltosoitin ja pienet toiminnalliset yksityiskohdat luovat yhden kromaattisen sävyn koko käyttöliittymään.
Neutraali
- Obsidian
#070709— Tekstiteksti, täytetyt toimintakehotuspainikkeet ja tummat käyttöliittymäelementit – lähes musta on valittu pelkän #000:n sijaan pehmentämään kontrastia valkoiseen taustaan nähden. - Paper White
#ffffff— Sivun tausta, korttien pinnat ja painikkeiden tekstit ovat pääelementin alapuolella olevien osioiden pääpohja. - Cloud Gray
#f5f5f5— Lisäkorttipinnat ja osioiden taustat erottavat toiminnalliset lohkot pääpiirteestä. - Sky Tint
#d7e6f5— Pahvikehyksen sävy ja pinnan tuskin havaittava sininen sävy luovat tunnelmaa pikemminkin kuin harmautta. - Charcoal
#60606c— Ensisijainen teksti, toissijainen teksti ja vaimennetut reunat – hallitseva neutraali väri muulle kuin otsikkosisällölle. - Slate
#8b8b8b— Vähäteksti ja passiiviset reunaviivat – käytetään osoittamaan sijainteja ja varmistamaan esteettömyys vammaisille henkilöille.
Typografia
12:sta 80 pikseliin · 8 askelta
- sans-serif — korvaava: Inter · ääriviivat 400, 700 · sans-serif - löytyy poimitusta datasta, mutta tekoäly ei ole kuvannut sitä.
- Open Runde — korvaava: Inter Tight · ääriviivat 400, 500, 600, 700, 900 · Otsikoiden ja navigoinnin ensisijainen fontti on geometrinen humanisti, jossa on tiheä kirjainväli suurissa kokoluokissa; -0.04em 80 pikselin koossa pakkaa otsikon yhdeksi selkeäksi lohkoksi. Käytä kaikissa otsikoissa, navigoinnissa ja suurissa teksteissä.
- Inter — korvaava: system-ui · ääriviivat 400, 500 · Toissijainen leipäteksti ja käyttöliittymäteksti – käytetään pienissä otsikoissa, navigointielementeissä ja sisäisissä linkeissä, joissa halutaan neutraalimpi lukurytmi. Yhdistää Open Runden kanssa hierarkkisen kontrastin luomiseksi.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 12-16px |
| Painikkeen säde | 100px |
| Kortin säde | 18px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 80-120px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Letters -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ä
- Integrated Biosciences — bioluminesenssilaboratorio keskiyöllä
- Mintlify — Pilvipuutarha lasipöydän yläpuolella. Käsin piirretty taivas ja dokumenttielokuva on rajattu yhteen – ainoa paikka, jossa väri ja käsite törmäävät ennen kuin sivu haalistuu luostarinvalkoiseksi.
- Gleap — Lämpimin kermanvärisin ja grafiittiaksentein koristeltu työtila – studio, jossa mattamustat mustepisteet näyttävät leijuvan pellavaisen arkkitehtuurin yllä.
- Render — Suunnittelu on tehty harjatusta alumiinista. Käyttöliittymä tuntuu puhtaalta, geometriseltä insinööridokumentilta – tyhjää tilaa, ohuita viivoja ja yksi violetti viiva, joka kiinnittää huomion toimintaan.
- Grafbase — kylmälle marmorille piirretty tekninen piirustus
- Slash — Keskiyön holvi kullatuilla tilikirjoilla
- Modal — Fosforoiva terminaali pimennetyssä palvelinhuoneessa - ainoa valonlähde on kirkkaanvihreä väri
- Whimsical — Rikas luumunvärinen muste laventelinvärisellä taustalla – luova studiomuistikirja, joka toimii myös teknisenä valkotauluna.
- AgentQL — Revontulet terminaalin yllä yöllä
- Alveos One — Viihtyisä, jokikivistä tehty turvapaikka – hiljainen, kermanvärisesti valaistu meditaatiohuone, jossa yksi grafiittiesine lepää pehmeässä meripihkan hehkussa
- GitHub — Avaruuskomentopaneeli bioluminesoivilla ohjauspisteillä – pimeä, tunnelmallinen työtila, jossa yksi vihreä hehku osoittaa tietä eteenpäin.
- Buddy — Ruutupaperille piirretty insinööripiirros. Valkoinen piirustuspinta on merkitty lähes mustalla musteella tehdyllä tuskin näkyvällä ruudukolla, jossa on fluoresoivia limenvihreitä merkintöjä ja hohtavia liukuvärjäysviivoja.