Seline Analytics
Een rustige, analytische tabel op warm papier.
Seline is geplaatst tegen een warme steenkleurige achtergrond (#fafaf9) met een enkel levendig blauw accent – alle andere kleuren zijn neutraal en afkomstig uit het Tailwind-kleurenpalet. De koppen zijn weergegeven in een speciaal ontworpen geometrisch schreefloos lettertype (roobert) met een gewicht van 400 en een smalle negatieve spatiëring, wat de tekst een kalme, bijna fluisterende zelfverzekerdheid geeft die contrasteert met de doorgaans luide SaaS-stijl. UI-oppervlakken zijn platte witte kaarten die boven de warme achtergrond zweven met een enkele, zachte vervaging van 16px; randen zijn gemaakt met dunne, 1px steenkleurige lijnen, die royaal worden gebruikt als primair structureel element in plaats van zware scheidingslijnen of panelen. De lay-out ademt: content over de volledige breedte gecentreerd op een ruim verticaal ritme, met pilvormige interactieve bedieningselementen, een mascotte-illustratie voor persoonlijkheid en dashboard-screenshots als productbewijs. De algehele indruk is redactioneel analytisch: rustig, monochroom, zelfverzekerd, waarbij de blauwe call-to-action het meest opvallende element op de pagina is dankzij de bewuste ingetogenheid van de rest.
De pagina heeft de maximale breedte, is gecentreerd op ongeveer 1200px en biedt voldoende verticale ruimte. De hero is een tekstblok van twee regels, links uitgelijnd, met één gemarkeerde zin ("eenvoudig en effectief") in blauw, gevolgd door een rij met twee call-to-actions (blauwe pil + spookpil), vervolgens een rij met partnerlogo's in grijstinten, daarna een rij met betrouwbaarheidsbeoordelingen en tot slot een zwevende dashboardpreview over de volledige breedte, die de volgende sectie licht overlapt. Onder de vouwlijn staan afwisselend rijen met testimonials in een raster met één kolom, gevolgd door secties over de volledige breedte met functiebeschrijvingen, links uitgelijnde tekst en gecentreerde productafbeeldingen. De navigatie is een minimalistische bovenste balk – logo links, gecentreerde navigatielinks, login + blauwe call-to-action rechts – met een zwevende groep avatars in het midden van de navigatie als identiteitsverificatie. De spaties tussen de secties zijn breed (96px) om een redactioneel ritme te creëren in plaats van een dichte warboel aan informatie.
De visuele taal wordt gedomineerd door screenshots van de gebruikersinterface van het product. De dashboardpreview is een foto die is weergegeven met een grijstintfilter (1) (0,94), waardoor de kleuren van de data worden gedempt tot een monochrome tint. De enige menselijke figuur is een lineaire mascotte-sticker (een personage met een capuchon), getekend in SVG-stijl met alleen contouren, die één keer per sectie is geplaatst als speels contrast met de analytische inhoud, met een zachte schaduw om een stickerachtig diepte-effect te creëren. Het merklogo en de symbolen zijn kleine zwarte vonken/vlammen. Er zijn geen foto's – geen lifestylefoto's, geen teamfoto's, geen omgevingsfoto's. Het object (het dashboard) is de protagonist. Alle decoratieve pictogrammen hebben een contour van 1px in de kleuren #0c0a09 of #3ba6f1 en zijn nooit gevuld.
Palet
Merk
- Cyan Signal
#3ba6f1— De belangrijkste call-to-action, actieve links en de contouren van merkpictogrammen zijn de enige kleuraccenten op de pagina, die spaarzaam worden gebruikt om de aandacht op de actie te vestigen. - Cyan Edge
#3398e1— Blauw wordt gebruikt om actiecontouren, linklabels en interactieve elementen te benadrukken. Het mag niet als primaire kleur voor call-to-actions worden gebruikt.
Neutrale
- Ink Black
#0c0a09— Hoofdtitels, gemarkeerde tekst en expressieve pictogrammen zijn uitgevoerd in een warme, bijna zwarte kleur. - Stone Canvas
#fafaf9— De achtergrond van de pagina heeft een warme, crèmekleurige tint die meer aanvoelt als papier dan als het wit van een scherm. - Pure White
#ffffff— Kaartoppervlakken, uitstekende panelen en vullingen van invoervelden zijn standaard vlak en schaduwloos. - Stone Border
#e8e6e5— Dunne randen op kaarten, navigatie-elementen en invoervelden vormen het primaire structurele element, niet de scheidingslijnen. - Stone Muted
#d6d3d1— Extra kaders, subtiele achtergrondtinten, decoratieve scheidingslijnen. - Ash Gray
#a8a29e— Helptekst, pictogramcontouren, uitgeschakelde statussen - leesbaar maar inactief.
Typografie
van 10 tot 52px · 5 stappen
- Roobert — vervanging: Inter Tight or Satoshi · overzichten 400, 500 · Het lettertype voor koppen en tekstopmaak is een uniek geometrisch schreefloos lettertype met minimale negatieve letterafstand (-0,025em bij 32px, -0,021em bij 52px). De letterdikte van 400 x 52px is kenmerkend voor dit lettertype: onconventioneel, subtiel, maar toch gezaghebbend en ingetogen. Koppen komen goed tot hun recht zonder opdringerig te zijn.
- Inter — vervanging: Inter · overzichten 400, 500, 600 · Het primaire lettertype voor hoofdtekst, navigatie, gebruikersinterface en koppen is een neutraal, universeel lettertype voor alle tekst buiten het scherm. 14px met een gewicht van 400 en een regelafstand van 1,64 is de meest voorkomende grootte voor hoofdtekst (frequentie 1174). Positieve letterafstand (0,004em) bij kleine lettergroottes zorgt voor een goede leesbaarheid van de compacte gebruikersinterface.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | ruim |
| Basisstap | 8px |
| Knopradius | 9999px |
| Kaartradius | 10px |
| Schaduwen | zachte schaduwen |
| Tussen secties | 96px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Seline Analytics 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
- ElevenLabs — Een fotoreportage in warme crèmekleuren met subtiele titels. Een notitieboek in Bauhaus-stijl – gebroken wit papier, zwarte inkt en een enkel paars en oranje accent voor productpresentatie.
- Awesomic — Redactioneel zinkgaas met oranje accenten die aan confetti doen denken
- Monad — redactioneel technisch tijdschrift op warm perkament
- Dub — Link's matte rijstpapier bedieningspaneel
- Notion — Een warm papieren notitieboekje in de middagzon.
- Anthropic — Een wetenschappelijk veldnotitieboek op warm perkamentpapier – rustige ivoorkleurige oppervlakken, redactionele koppen in schreeflettertype en een enkel klei-accent dat alleen verschijnt wanneer actie vereist is.
- Calendly — Donkerblauwe inkt op koud marmer
- Augen Pro — De witte presentatie van Apple kenmerkt zich door een klinisch, gewichtloos, elektrisch blauw als enig accent in een monochrome omgeving.
- Antimetal — Een redactioneel verslag op crèmekleurig papier – een rustige ochtend bij een wetenschappelijk tijdschrift, waar ingetogenheid vertrouwen uitstraalt en schreefletters het zware werk doen.
- Perk — Elektrisch kalk op warm perkamentpapier
- Ditto — Een zonovergoten atelier waar wilde bloemen worden geschilderd. Warme crèmekleurige oppervlakken, een levendige gele basiskleur, diep donkerblauwe inkt, organische kleurvormen die achter het werk tot bloei komen.
- Officevibe — Een redactioneel tijdschrift op warm crèmekleurig papier. Stel je een doordacht essay over HR-management voor, gepresenteerd als een product – een sierlijk schreeflettertype dat zachtjes door een moderne blauwe interface fluistert.