Superlist
Een nachtelijke werkplek met koraalkleurige gloed – een rustig auberginekleurig app-oppervlak waar een enkele warme oranje vonk elke actie aangeeft.
Superlist gebruikt een productiviteitstaal in middernachtpaarse tinten: diep auberginegroen en warm koraal als enige primaire kleur, gecombineerd met grote schreefloze koppen die de hele sfeer weergeven. De interface roept het gevoel op van geconcentreerd werken tot diep in de nacht – rustig, gelaagd en zelfverzekerd, waarbij kleur alleen wordt gebruikt als functionele interpunctie bij call-to-actions, actieve statussen en kernpunten. Oppervlakken zijn gelaagd in subtiele donkere tinten met een paarse ondertoon (#181824 → #26253b), waarbij puur zwart wordt vermeden om ervoor te zorgen dat de diepte warm aanvoelt in plaats van steriel. Componenten hebben royale, afgeronde vormen (kaarten van 20px, pill-knoppen), zachte schaduwen en ademen door comfortabele tussenruimtes van 10-16px in plaats van strakke rasters. De stem van de kop is allesbepalend: een letterdikte van 600 punten met een lettergrootte van 70-88px en een krappe spatiëring van -0,02em behandelt de tekst als typografie in plaats van UI – het ligt dichter bij redactionele tekst dan bij SaaS-tekst.
Donkere secties beslaan de volledige breedte van de pagina, met gecentreerde contentcontainers van maximale breedte. De hoofdsectie is verticaal gecentreerd en bevat een kop, subtekst en een call-to-action (CTA), gevolgd door een grote productscreenshot die de volgende sectie overlapt. De daaropvolgende secties wisselen af tussen gecentreerde tekstblokken en kaartrasters. De reviewsectie maakt gebruik van een raster met drie kolommen, reviewkaarten en 16 tussenruimtes. De navigatie bestaat uit een enkele bovenste balk met een logo aan de linkerkant, gecentreerde links en inlogopties aan de rechterkant – geen vaste zijbalk of megamenu. De tussenruimtes tussen de secties zijn ruim (16 tussenruimtes), waardoor een ruimtelijk, redactioneel ritme ontstaat in plaats van een dicht productraster.
De visuele ruimte wordt gedomineerd door productscreenshots: een groot kader met afgeronde hoeken, dat de daadwerkelijke app-interface toont, vult de hoofd- en secundaire secties. Foto's zijn minimaal en worden alleen gebruikt als gebruikersavatars of previews van media in de app (bijvoorbeeld de concertfoto in het rechterpaneel van de productmockup). Logo's op de vertrouwensbalk zijn platte, ingetogen witte tekstsymbolen. Er zijn geen decoratieve illustraties, geen abstracte afbeeldingen en geen 3D-renders. De visuele strategie is om het product op grote schaal te presenteren, de typografie het emotionele werk te laten doen en koraal als enige accentkleur te gebruiken.
Palet
Merk
- Coral Ember
#ff4a36— Oranje wordt gebruikt als secundair accent voor decoratieve details en om minder vaak voorkomende aanwijzingen te benadrukken. Het mag niet als primaire kleur worden gebruikt voor oproepen tot actie.
Neutrale
- Aubergine Canvas
#181824— De pagina-achtergrond, het hoofdcanvas, is een warme, donkere tint die puur zwart vervangt, waardoor de gebruikersinterface gelaagd oogt in plaats van plat. - Elevated Plum
#26253b— Kaartoppervlakken, invoervelden, navigatiecontainers: een stap eenvoudiger dan met canvas om diepte te creëren zonder zichtbare grens. - Pure White
#ffffff— Hoofdtitels, knoptekst en pictogramcontouren: maximaal contrast op een donkere achtergrond. - Fog Text
#696f81— De hoofdtekst, de subkopjes en de subtiele randen hebben allemaal een contrastverhouding van 7:1 voor prettig lezen tegen een auberginekleurige achtergrond. - Ash Text
#8e8da0— Een neutrale kleur wordt ondersteund voor secundaire UI-elementen, scheidingslijnen en gedempte labels. Deze kleur mag niet worden gebruikt als primaire kleur voor call-to-action-knoppen. - Mist Highlight
#a3a3a7— Subtiele randen, scheidingslijnen en inactieve navigatie-elementen creëren een ingetogen, neutrale toon die toch opvalt tegen de achtergrond.
Typografie
van 12 tot 88px · 9 stappen
- sans-serif — vervanging: Inter · overzichten 400 · sans-serif - gevonden in de geëxtraheerde gegevens, maar niet beschreven door de AI.
- Haffer XH SemiBold — vervanging: Inter Tight · overzichten 400, 600 · Het primaire lettertype voor weergave en koppen. Het wordt gebruikt in een grootte van 70-88px voor hero-koppen met een letterafstand van -0,02em en een gewicht van 600. De smalle letterafstand en grote letterhoogte geven de koppen een redactionele uitstraling, waardoor de donkere interface meer op een tijdschriftomslag lijkt dan op een dashboard. Vervang dit lettertype door Inter Tight of General Sans in een vetgedrukte variant.
- Jersey 10 — vervanging: Anybody · overzichten 400 · Een groot, decoratief lettertype voor accenten op cijfers en markeringen. Spaarzaam te gebruiken in zeer grote formaten om typografische accenten te creëren. Kan worden vervangen door Anybody of Cabinet Grotesk.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 10-16px |
| Knopradius | 100px |
| Kaartradius | 20px |
| Schaduwen | zachte schaduwen |
| Tussen secties | 80px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Superlist en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- DNA — Het Middernachtobservatorium gezien door een deeltjeslens
- Abetterlou — Sparks on Saddle Leather - een warm, crèmekleurig lettertype dat oplicht tegen een diep koffiezwarte achtergrond, met amberkleurige gouden knoppen die aanvoelen als heet metaal dat in het papier is gedrukt.
- Galileo-ft — Een commandodek voor de diepe ruimte met elektrisch blauwe signalen.
- Decide AI — Sterrenwacht om middernacht - muntsignaal
- Redis Agency — De redactiewerkplaats, die ook buiten kantooruren open is, is een pikdonkere ruimte waar al het brandingwerk wordt gedaan met schreeflettertypen en een enkele rode radijs.
- Spellbook — Een rechtszaal midden in de nacht, verlicht met koraalkleurige inkt – een donker, redactioneel oppervlak waar het enige geluid de warme oranje penstreek is.
- Linear — middernacht precisie-instrument
- Origin Financial — Een nachtelijke galerij van ingetogen weelde. Een stille, bijna donkere ruimte waar grote schreefletters en een paar verlichte, gekleurde panelen de indruk wekken dat de financiële wereld een zorgvuldig samengesteld kunstwerk is.
- Hyperstudio — Het ontwerp is in obsidiaan gekrast. Tekst en fijne lijnen omlijsten een wit vlak van puur zwart, met hier en daar gouden kompasmarkeringen die de weg aangeven.
- Air — sculptuur "Middernachtelijke hemel door glas"
- Raycast — Middernacht Commandocentrum, Koraal Neon
- dope.security — Middernachtterminal met paarse bakens