Superlist
Usa ka workspace sa kagabhion nga adunay mga baga nga korales—usa ka hilom nga nawong sa talong diin ang usa ka mainit nga orange nga kislap nagsenyas sa matag aksyon
Ang Superlist migamit og pinulongan sa produktibidad sa mga tono sa purpura sa tungang gabii: lawom nga talong, mainit nga korales isip bugtong pangunang kolor, ug dagkong sans-serif nga mga ulohan nga nakakuha sa tibuok atmospera. Ang interface nagpahinumdom sa pagbati sa trabaho nga naka-focus sa ulahing gabii—hilom, layered, ug masaligon, nga ang kolor gigamit lamang isip functional punctuation sa mga call to action, active states, ug key points. Ang mga nawong gi-layer sa malumo nga ngitngit nga mga tono nga adunay purpura nga undertone (#181824 → #26253b), nga naglikay sa puro nga itom aron masiguro nga ang giladmon mobati nga mainiton imbes nga sterile. Ang mga component adunay daghang lingin nga mga porma (20px cards, pill buttons), humok nga mga anino, ug "ginhawa" pinaagi sa komportable nga 10-16px nga mga gintang imbes nga hugot nga grids. Ang tingog sa ulohan mao ang tanan: ang 600-point nga gibug-aton sa 70-88px nga adunay hugot nga letter spacing nga -0.02em nagtratar sa teksto isip typographic imbes nga UI—mas duol kini sa editorial copy kaysa SaaS.
Ang mga itom nga seksyon naglangkob sa tibuok gilapdon sa panid, nga adunay nakasentro, maximum-width nga mga sudlanan sa sulud. Ang pangunang seksyon patindog nga nakasentro ug adunay sulud nga headline, subtext, ug call to action (CTA), gisundan sa usa ka dako nga screenshot sa produkto nga nagsapaw sa sunod nga seksyon. Ang sunod nga mga seksyon nagpuli-puli tali sa nakasentro nga mga bloke sa teksto ug mga grid sa kard. Ang seksyon sa mga review naggamit usa ka grid nga tulo ka kolum nga adunay mga kard sa pagsusi ug 16 ka gutter. Ang nabigasyon usa ka single top bar nga adunay logo sa wala, nakasentro nga mga link, ug mga aksyon sa pag-login sa tuo—walay pirmi nga sidebar o mega-menu. Ang mga gutter taliwala sa mga seksyon lapad (16 ka gutter), nga nagmugna og usa ka lapad, editoryal nga ritmo imbes nga usa ka dasok nga grid sa produkto.
Ang biswal nga espasyo gidominar sa mga screenshot sa produkto—usa ka dako nga frame nga adunay lingin nga mga kanto, nga nagpakita sa aktwal nga interface sa app, ang nagpuno sa panguna ug ikaduhang mga seksyon. Gamay ra ang mga litrato, gigamit lamang isip mga avatar sa tiggamit o mga preview sa in-app media (pananglitan, ang imahe sa konsyerto sa tuo nga panel sa mockup sa produkto). Ang mga logo sa trust bar kay patag, gihilom nga puti nga mga simbolo sa teksto. Walay mga pangdekorasyon nga ilustrasyon, walay abstract graphics, walay 3D renders. Ang biswal nga estratehiya mao ang pagpakita sa produkto sa sukod, tugoti ang tipograpiya nga mohimo sa emosyonal nga trabaho, ug gamiton ang coral isip bugtong kolor sa accent.
Paleta
Brand
- Coral Ember
#ff4a36— Ang kolor nga kahel gigamit isip ikaduhang kolor para sa mga detalye sa dekorasyon ug aron ipasiugda ang dili kanunay nga mga timaan. Dili kini angay gamiton isip pangunang kolor para sa mga panawagan sa aksyon.
Neutral
- Aubergine Canvas
#181824— Ang background sa panid, ang pangunang canvas, usa ka mainiton, ngitngit nga landong nga mipuli sa purong itom, nga naghimo sa user interface nga morag layered imbes nga patag. - Elevated Plum
#26253b— Mga nawong sa kard, mga input field, mga navigation container—usa ka lakang nga mas sayon kay sa canvas aron makahimo og giladmon nga walay makita nga utlanan. - Pure White
#ffffff— Mga pangunang ulohan, teksto sa buton, ug mga outline sa icon—pinakataas nga contrast sa usa ka itom nga canvas. - Fog Text
#696f81— Ang pangunang teksto, ikaduhang mga ulohan, ug mga muted border—usa ka 7:1 contrast ratio para sa komportableng pagbasa batok sa kolor talong nga background. - Ash Text
#8e8da0— Gisuportahan ang neyutral nga kolor para sa mga secondary UI elements, dividers, ug muted labels. Dili kini angay gamiton isip primary color para sa mga call to action. - Mist Highlight
#a3a3a7— Ang mga pino nga utlanan, mga divider, ug mga dili aktibo nga elemento sa nabigasyon nagmugna og usa ka pino nga neyutral nga tono nga nagpabilin nga talagsaon batok sa canvas.
Tipograpiya
gikan sa 12 ngadto sa 88px · 9 ka lakang
- sans-serif — kapuli: Inter · mga balangkas 400 · sans-serif - makita sa nakuha nga datos apan wala gihulagway sa AI.
- Haffer XH SemiBold — kapuli: Inter Tight · mga balangkas 400, 600 · Ang pangunang font para sa display ug mga heading. Gigamit kini sa gidak-on nga 70–88px para sa mga hero heading nga adunay letter spacing nga -0.02em ug weight nga 600. Ang pig-ot nga letter spacing ug taas nga letter height naghatag sa mga heading og editorial weight, nga naghimo sa ngitngit nga interface nga mas morag hapin sa magasin kaysa dashboard. Ilisi og Inter Tight o General Sans nga bold weight.
- Jersey 10 — kapuli: Anybody · mga balangkas 400 · Usa ka dako ug pangdekorasyon nga font para sa mga numero ug highlight. Gigamit nga panagsa ra sa dagkong mga gidak-on aron makahimo og mga typographic accents. Mahimong pulihan og Anybody o Cabinet Grotesk.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 10-16px |
| Radius sa butones | 100px |
| Radius sa kard | 20px |
| Mga anino | humok nga mga anino |
| Taliwala sa mga seksyon | 80px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Superlist ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- DNA — Obserbatoryo sa Tungang Gabii nga makita pinaagi sa lente sa partikulo
- Abetterlou — Mga Kislap sa Panit sa Saddle - Usa ka mainiton ug krema nga font nga nagdan-ag batok sa lawom nga itom nga background, nga adunay mga butones nga amber-gold nga mobati nga sama sa init nga metal nga gipugos sa panid.
- Galileo-ft — Usa ka deep-space command deck nga adunay electric blue signals
- Decide AI — Obserbatoryo sa tungang gabii - mint signal
- Redis Agency — Ang editorial workshop, nga abli human sa oras sa opisina, usa ka ngitngit nga lugar diin ang tanang trabaho sa branding gihimo gamit ang serif fonts ug usa ka pula nga radish.
- Spellbook — Usa ka korte sa tungang gabii nga gisiga sa tinta nga korales—usa ka ngitngit nga nawong sa editoryal diin ang bugtong tunog mao ang mainit nga orange nga hampak sa bolpen
- Linear — instrumento sa katukma sa tungang gabii
- Origin Financial — Usa ka galeriya sa tungang gabii sa hilom nga kaharuhay. Usa ka hilom, halos ngitngit nga lawak diin ang dagkong serif nga mga font ug pipila ka gisidlakan nga mga panel nga kolor nagmugna sa pagbati nga ang pinansya usa ka maampingong giorganisar nga obra maestra.
- Hyperstudio — Ang disenyo gikulit sa obsidian. Ang teksto ug pino nga mga linya nag-frame sa usa ka puti nga wanang sa purong itom, nga adunay panagsa nga bulawan nga marka sa kompas nga nagpakita sa dalan.
- Air — eskultura nga "Kalangitan sa Tungang Gabii Pinaagi sa Bildo"
- Raycast — Sentro sa Komandante sa Tungang Gabii, Coral Neon
- dope.security — Terminal sa tungang gabii nga adunay mga purpura nga suga