Auros
Abyssal-terminaali bioluminesoivilla datapalloilla
Auros toimii kuin syvänteen kätkemä finanssiteknologiaterminaali: lähes musta turkoosi kangas, jossa on bioluminesoivia datapalloja ja turkoosista pinkkiin sävyjä, jotka luovat syvyyden, sulavuuden ja virtauksen vaikutelman. Käyttöliittymä on minimalistinen ja elokuvamainen, ja se perustuu yhden käyttäjän keskipaksuiseen näyttöön (Matter) aggressiivisella negatiivisella seurannalla, joka luo skaalan olematta liian räikeä. Värit jakautuvat tasaisesti – akromaattisia valkoisia ja hopeisia käytetään lähes kaikessa sisällössä, kun taas kromaattinen paletti on varattu tunnelmallisille liukuväreille, jotka erottavat korttien pinnat, ja yhdelle tunnusomaiselle pillerinmuotoiselle painikkeelle, joka vaihtaa väriä turkoosinsinisestä laventelinpinkkiin. Kortit kelluvat hienovaraisilla turkoosilla pintaharjanteilla (16 pikselin säde, ei varjoja) korkeuden sijaan, joten hierarkia havaitaan veden syvyytenä eikä varjona paperilla. Komponentit näyttävät harkituilta ja instrumenttimaisilta: isot seurantamerkit, ohuet geometriset nuolikuvakkeet, suuret vaaleanpunaiset numeeriset lukemat.
Tumma, täysleveä kanvas, jonka sisällön enimmäisleveys on 1440 pikseliä. Pääelementti on keskitetty tekstilohko (kulmakarva → otsikko → alateksti → toimintakehotus), joka ulottuu koko näkymän korkeudelle, ja taustaelementtinä on hiukkanen. Osiot ovat täysleveitä nauhoja, jotka on erotettu toisistaan yli 68 pikselin pystysuorilla väleillä, vuorotellen kankaan ja hieman upotettujen pintojen välillä. "Tutki"-osiossa käytetään epäsymmetristä kaksipalstaista asettelua: vasemmassa sarakkeessa on pinottuja ominaisuuskortteja, kun taas oikeassa sarakkeessa on geometrinen molekyylikuva. Sisältö on keskitetty kapeisiin sarakkeisiin (enintään ~600 pikseliä) helpon lukemisen takaamiseksi sen sijaan, että se venyisi reunasta reunaan. Alatunniste on upotettu kuoppa (#011d1c), jossa on 120 pikselin pystysuora marginaali, mikä luo syvän altaan vaikutelman. Navigointi on ohut, läpinäkyvä paneeli, jonka elementit ovat 16–24 pikselin päässä toisistaan. Yleinen rytmi on elokuvamainen ja avara – jokainen osio hengittää, ja syvä, vedenkaltainen värimaailma luo tunteen siitä, että vajoat syvemmälle jokaisen kohdan myötä.
Visuaalinen tyyli on minimalistinen ja tunnelmallinen. Etusivulla on kolmiulotteinen hiukkaspallo – tuhannet pienet turkoosinsiniset ja valkoiset pisteet muodostavat pyörivän pallon, joka heijastelee kankaan ja reunojen laventelinvaaleanpunaisten yksityiskohtien muotoa luoden bioluminesoivan vaikutelman, joka muistuttaa informaatio-objektia. Litteät geometriset molekyylikaaviot (valkoiset ympyrät ja ohuet yhdistävät viivat tummalla kankaalla) toimivat koriste-elementteinä oikeassa sarakkeessa. Ei valokuvia, ei lifestyle-kuvia, ei ihmisiä – visuaalinen kieli perustuu puhtaaseen datagrafiikkaan ja abstrakteihin muotoihin. Hiukkaspallo on brändi-identiteetin määrittelevä visuaalinen elementti; sen on esiinnyttävä ainakin kerran jokaisella tärkeällä sivulla syvänmeren metaforan vahvistamiseksi.
Paletti
Merkki
- Liquid Abyss
#012624— Päätausta on sivun pohja, otsikko, pääelementti ja hallitseva tumman turkoosi kenttä. Se luo syvänmeren tunnelman. - Liquid Deep
#011d1c— Syvennetty pintataso on alatunnisteen tausta ja syvemmät pahvipaneelit. Se koetaan puolisävyisenä kanvasta tummempana, mikä luo hienovaraisen alaspäin suuntautuvan syvyysgradientin. - Liquid Kelp
#003734— Kohotettu korttipinta ja painikkeen täyttö – kohotettu pinta, joka on yhden askelman kuilun yläpuolella. Käytetään ominaisuuskorteissa, sisältöpaneeleissa ja liukuväripainikkeen lähtöpisteessä.
Neutraali
- Liquid Mist
#edfffe— Viileä valkoinen sävy korostaa leipätekstiä, osioiden otsikoita ja lämmintä, vaaleaa typografiaa. Hienovarainen sininen sävy yhdistää leipätekstin turkoosiin värimaailmaan. - Platinum
#ffffff— Puhtaanvalkoista käytetään otsikoissa, navigointielementeissä, kuvakkeiden ääriviivoissa ja suurikontrastisessa tekstissä. Se on ensisijainen tekstiväri kaikilla otsikkotasoilla ja ensisijaisessa navigoinnissa. - Silver Mist
#bbc7c6— Toissijainen teksti, vaimennetut kuvaukset ja linkkien väri alkuperäisessä tilassaan. Niissä on hieman vihertävä sävy, joka täydentää turkoosia taustaa. - Ash
#f2f2f2— Lisäteksti lainauksia ja arvosteluja varten. Neutraali, viileä harmaa sävy, kun Silver Mistin turkoosi pohjasävy tuntuu liian kirkkaalta. - Slate Deep
#707777— Hienovarainen pintasävy passiivisille tai heikosti näkyville taustoille. Se asettuu kankaan ja pahvin väliin ja luo erittäin hienovaraisen korkeuseron. - Lavender Phosphor
#fde9ff— Taustavalon väri suurille tilastoille, laskureille ja tärkeille mittareille. Vaaleanpunaista sävyä käytetään tyypillisessä liukuvärissä säästeliäästi valaistuna korostuksena tummilla pinnoilla.
Typografia
10:stä 96 pikseliin · 6 vaihetta
- Matter — korvaava: Inter · ääriviivat 400, 500 · Otsikoissa ja leipätekstissä käytetään ensisijaista fonttia, jonka paino on 500 kaikille otsikoille (H1–H3) ja suurille kineettisille teksteille (86–295 pikseliä). Leipätekstissä ja käyttöliittymätekstissä käytetään painoa 400. Siinä on aggressiivinen negatiivinen kirjainväli suurissa kokoluokissa (-0,04em 61 pikselin koossa, -0,046em 86 pikselin koossa) ja leveä positiivinen kirjainväli otsikoiden isoissa kirjaimissa (0,08em 20 pikselin koossa, 0,12em 12 pikselin koossa, 0,15em 10 pikselin koossa). Otsikoissa käytetään vain keskipaksua fonttia – ei lihavointia tai vaaleaa fonttia – mikä antaa fontille yhtenäisen, mekaanisen varmuuden.
- Arial — korvaava: system-ui · ääriviivat 400 · Toissijainen varatoiminto interaktiivisille käyttöliittymäelementeille (navigointi, painikkeet, otsikon mikrokopio, alatunniste). Näkyy vain 14 pikselin koossa – käytetään turvallisena, yleisenä varatoimintona, kun Matter-tiedostoa ei ole ladattu, ja se kattaa lomaketunnisteet, painiketekstit ja pienet aputekstit.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 20px |
| Painikkeen säde | 6px |
| Kortin säde | 16px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 68px |
| Sivun leveys | 1440px |
Tekoäly rakentaa verkkosivustosi Auros -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ä
- Design Full-Time — studioelokuvateatteri, jossa on yksi lämmin valonheitin
- Air — veistos "Keskiyön taivas lasin läpi"
- Slash — Keskiyön holvi kullatuilla tilikirjoilla
- Raycast — Keskiyön komentokeskus, Coral Neon
- Dimension — hämärässä valaistu työasema, jossa on himmeät lasipaneelit
- Modal — Fosforoiva terminaali pimennetyssä palvelinhuoneessa - ainoa valonlähde on kirkkaanvihreä väri
- Giga — Keskiyön horisontti himmeän obsidianin yllä
- Reflect Notes — Tähtikirkas violetti avaruus on synkkä observatorio, jossa nuotit leijuvat kuin tähtikuviot lähes mustan indigonsinisen tyhjyyden taustalla.
- Ameba — Valvomohuone keskiyöllä – sähkönsininen syke himmeiden lasipaneelien sisällä
- AgentQL — Revontulet terminaalin yllä yöllä
- Frame — Elokuvateatteri myöhäisillan elokuvanäytöksiin. Pimeä huone, jossa yksi sininen kohdevalo tekee kaiken työn ja käyttöliittymä häipyy taustalle, jolloin luova sisältö voi heijastua eteenpäin.
- Harness — Mission Control keskiyöllä fosforoivilla vihreillä yksityiskohdilla