Auros
Abyssale terminal met bioluminescente databallen
Auros functioneert als een fintech-terminal die zich in de afgrond bevindt: een bijna zwart turkooizen canvas met bioluminescente databollen en lichtgradiënten van turkoois naar roze, wat een gevoel van diepte, vloeiendheid en flow creëert. De interface is minimalistisch en filmisch, met een enkel gebruikersscherm (Matter) van gemiddelde dikte en agressieve negatieve tracking om schaal te creëren zonder overdreven opzichtig te zijn. Kleuren zijn gelijkmatig verdeeld – achromatische witten en zilvertinten worden gebruikt voor bijna alle content, terwijl het chromatische palet is gereserveerd voor atmosferische gradiënten, het onderscheiden van kaartoppervlakken en een enkele kenmerkende pilvormige knop die van kleur verandert van turkooisblauw naar lavendelroze. Kaarten zweven op subtiele turkooizen ribbels (radius 16px, geen schaduwen) in plaats van op hoogte, waardoor hiërarchie wordt ervaren als de diepte van water in plaats van een schaduw op papier. De componenten zien er doordacht en instrumenteel uit: hoofdletters als trackingmarkeringen, dunne geometrische pijlpictogrammen en grote numerieke waarden in lichtroze.
Een donker, volledig breed canvas met content tot een maximale breedte van 1440px. Het hoofdelement is een gecentreerd tekstblok (brow → kop → subtekst → call-to-action) dat de volledige hoogte van het scherm beslaat, met een deeltje als achtergrond. Secties zijn stroken over de volledige breedte, gescheiden door grote verticale ruimtes van 68px of meer, afwisselend canvas en licht verzonken oppervlakken. De sectie "Ontdek" gebruikt een asymmetrische lay-out met twee kolommen: de linker kolom bevat gestapelde functiekaarten, terwijl de rechter kolom een geometrische moleculaire illustratie toont. De content is gecentreerd in smalle kolommen (maximaal ~600px) voor een goede leesbaarheid, in plaats van zich van rand tot rand uit te strekken. De footer is een verzonken kuiltje (#011d1c) met een verticale marge van 120px, wat het effect van een diepe poel creëert. De navigatie is een dun, transparant paneel met elementen die 16-24px van elkaar verwijderd zijn. Het algehele ritme is filmisch en ruimtelijk – elk gedeelte ademt, en het diepe, waterachtige kleurenschema wekt het gevoel op dat je met elke passage dieper wegzakt.
De visuele stijl is minimalistisch en sfeervol. De homepage toont een driedimensionale deeltjesbol – duizenden kleine turquoiseblauwe en witte stippen die een roterende bol vormen die het canvas weerspiegelt, met lavendelroze accenten langs de randen die een bioluminescent effect creëren dat doet denken aan een informatieobject. Platte geometrische moleculaire diagrammen (witte cirkels en dunne verbindingslijnen op een donker canvas) dienen als decoratieve elementen in de rechterkolom. Geen foto's, geen lifestyle-afbeeldingen, geen mensen – de visuele taal is gebaseerd op strakke datagrafieken en abstracte vormen. De deeltjesbol is het bepalende visuele element van de merkidentiteit; deze moet minstens één keer op elke belangrijke pagina verschijnen om de diepzeemetafoor te versterken.
Palet
Merk
- Liquid Abyss
#012624— De belangrijkste achtergrond bestaat uit de basis van de pagina, de header, het hoofdelement en een dominant donker turkooizen vlak. Dit creëert een diepzeesfeer. - Liquid Deep
#011d1c— Het verzonken oppervlak vormt de achtergrond van de voettekst en de diepere kartonnen panelen. Het wordt waargenomen als een halftoon donkerder dan het canvas, waardoor een subtiel diepteverloop naar beneden ontstaat. - Liquid Kelp
#003734— Verhoogd kaartoppervlak en knopvulling: een verhoogd oppervlak dat één trede boven de afgrond is geplaatst. Gebruikt voor featurekaarten, contentpanelen en het beginpunt van een gradientknop.
Neutrale
- Liquid Mist
#edfffe— Een koele wittint accentueert de hoofdtekst, de sectietitels en de warme, lichte typografie. Een subtiele blauwe tint verbindt de hoofdtekst met het turquoise kleurenschema. - Platinum
#ffffff— Zuiver wit wordt gebruikt voor koppen, navigatie-elementen, pictogramcontouren en tekst met hoog contrast. Het is de primaire tekstkleur op alle kopniveaus en in de primaire navigatie. - Silver Mist
#bbc7c6— Secundaire tekst, gedempte beschrijvingen en linkkleur in hun oorspronkelijke staat. Ze hebben een lichte groenachtige tint, die goed past bij de turquoise achtergrond. - Ash
#f2f2f2— Extra tekst voor citaten en recensies. Een neutrale, koele grijstint voor als de turquoise ondertoon van Silver Mist te fel aanvoelt. - Slate Deep
#707777— Een subtiele oppervlaktetint voor inactieve of slecht zichtbare achtergronden. Deze wordt tussen het canvas en het karton aangebracht en zorgt voor een zeer subtiel hoogteverschil. - Lavender Phosphor
#fde9ff— Achtergrondverlichting in kleur voor grote statistieken, tellers en belangrijke meetwaarden. De roze tint in het kenmerkende kleurverloop wordt spaarzaam gebruikt als een lichtgevend accent op donkere oppervlakken.
Typografie
van 10 tot 96px · 6 stappen
- Matter — vervanging: Inter · overzichten 400, 500 · Het primaire lettertype voor koppen en de hoofdtekst heeft een dikte van 500 voor alle koppen (H1–H3) en grote, dynamische tekst (86–295px). Voor de hoofdtekst en de UI-tekst wordt een dikte van 400 gebruikt. Het lettertype kenmerkt zich door een agressieve negatieve letterafstand bij grote formaten (-0,04em bij 61px, -0,046em bij 86px) en een ruime positieve letterafstand in hoofdletters (0,08em bij 20px, 0,12em bij 12px, 0,15em bij 10px). De strategie om alleen een gemiddelde dikte voor koppen te gebruiken is een opvallend kenmerk – geen vetgedrukt of licht lettertype – wat het lettertype een uniforme, mechanische uitstraling geeft.
- Arial — vervanging: system-ui · overzichten 400 · Een secundaire fallback voor interactieve UI-elementen (navigatie, knoppen, microtekst in de header, footer). Verschijnt alleen bij 14px – gebruikt als een veilige, universele fallback wanneer Matter niet geladen is, en omvat formulierlabels, knoptekst en kleine helptekst.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 20px |
| Knopradius | 6px |
| Kaartradius | 16px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 68px |
| Paginabreedte | 1440px |
AI bouwt je website in de stijl Auros 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
- Design Full-Time — een studiobioscoop met één warme spot.
- Air — sculptuur "Middernachtelijke hemel door glas"
- Slash — Nachtkluis met vergulde grootboeken
- Raycast — Middernacht Commandocentrum, Koraal Neon
- Dimension — een bij schemering verlichte werkplek met panelen van matglas
- Modal — Een fosforescerende terminal in een verduisterde serverruimte - de enige lichtbron is een felgroene lamp.
- Giga — Middernachtelijke horizon boven bevroren obsidiaan
- Reflect Notes — De paarse sterrenhemel is een donker observatorium waar noten als sterrenbeelden zweven tegen een achtergrond van bijna zwarte indigo leegte.
- Ameba — De controlekamer om middernacht – een elektrisch blauwe puls in de matglazen panelen.
- AgentQL — Het noorderlicht boven de terminal 's nachts
- Frame — Een bioscoop voor filmvoorstellingen tot laat in de avond. Een donkere ruimte waar een enkele blauwe spot al het werk doet en de gebruikersinterface naar de achtergrond verdwijnt, zodat creatieve content volledig tot zijn recht komt.
- Harness — Mission Control om middernacht met fosforescerende groene accenten.