Modal
En fosforescerande terminal i ett mörklagt serverrum - den enda ljuskällan är en ljusgrön färg
Modal fungerar som en fosforescerande terminal i ett mörklagt serverrum: en nästan svart duk, ljusgrön text och en enda ljus limegrön accent som fungerar som en LED-statusindikator. Designspråket är utvecklarfokuserat – kodfönster med monospaced och trafikljuspunkter, isometriska 3D-ikoner i den signaturgröna färgen och gott om vitt utrymme, vilket gör att ett element i varje sektion kan lysa. Typografin är uppdelad mellan ett anpassat typsnitt (Goga) för rubriker och ett variabelt typsnitt (Inter) för alla UI-element, båda inställda med smal negativ spårning. Färgerna är jämnt fördelade: de flesta skärmar är akromatiska, och den ljusa limegröna färgen visas bara vid viktiga åtgärder, logotypen, 3D-illustrationer och betoningsmoment. Komponenterna är platta och ramlösa, med djup skapat genom subtila gröna kanter och bakgrundsoskärpa snarare än skuggor.
Modalfönstret använder en mörk layout i full bredd med en maximal bredd på 1280 pixlar för att rymma innehållet. Huvudfönstret är centrerat: titeln (den första meningen i limegrönt), en underrubrik, två uppmaningar till handling och ett enda 3D-objekt som ett visuellt ankare – utan att separera layouten från sidofältet. Innehållsavsnitten följer en enhetlig rytm: ögonbrynstagg (versaler, Moss 70) → Goga-titel → dämpad brödtext, sedan antingen en layout med två kolumner med en funktionsbeskrivning (text + kod/visuellt kort) eller ett rutnät med tre kolumner av kort. Mellanrummen mellan avsnitten är generösa – 80 pixlar. Sidan växlar mellan djupa tomma (#000000) och något ljusare bakgrundsränder (#181818), med en ljus sektion (#def0dd) som visas mitt på sidan som en visuell paus. Navigeringen består av en enda, fast övre bar med en suddig bakgrund – ingen sidofält eller megameny. Sidfoten är kompakt och mörk, med dämpade gröna länkkolumner. Textdensiteten är bekväm: varje avsnitt ges gott om utrymme och kortrutnät använder högst tre kolumner.
Modals visuella språk är uppdelat i två lägen: 3D-glödande produktrenderingar och mörka kodfönstermodeller. Fokuspunkten är en enda 3D-kub renderad med en marknadsföringsgradient (från limegrönt till smaragdgrönt), placerad inom en radiell gradienthalo som badar det tomma utrymmet i grönt ljus – varumärkets signaturvisuella stil. Arbetsbelastningskort innehåller isometriska 3D-ikoner (en wireframe-kub, en solid trappa, lager) renderade i samma limegröna mot en mörk bakgrund. Kod- och benchmarkresultat presenteras som terminalfönsterkort med trafikljuspunkter, monospaced syntaxmarkering i en fosforescerande palett och en dämpad grön kant – de liknar skärmdumpar av ett riktigt kommandoradsgränssnitt. Klientlogotyper visas som desaturerade gröngrå etiketter i en enda rad med låg kontrast, vilket signalerar förtroende utan visuell konkurrens. Den totala densiteten är låg – de flesta sidor innehåller huvudsakligen text, och bilder presenteras som individuella fokuspunkter snarare än rutnät av fotografier. Det finns inga fotografier; hela det visuella systemet renderas, geometriskt och strålande.
Palett
Stämpla
- Lime Pulse
#7fee64— Huvudelementen i företagsidentiteten är logotypen, den huvudsakliga uppmaningen till handling (CTA), taggfyllning, aktiva tillstånd och illustrationens grundfärg.
Neutral
- Phosphor White
#ddffdc— Huvudtexten, titelfärgen, ikonkonturen och den fyllda knapptexten är den huvudsakliga läsbara ytan. - Void Black
#000000— Sidduk, det djupaste bakgrundslagret - Ground Iron
#181818— Huvudknappsfyllning, kortytor i mörka områden, användargränssnittets basyta. - Carbon Veil
#212525— Upphöjda ytor, navigationsbakgrund, något ljusare än marken. - Circuit Border
#485346— Kontur-/spökbilden, den huvudsakliga interaktiva tunna linjen, har en dämpad gröngrå nyans. - Phosphor Blue-Black
#1f2a33— Sekundära tunna markeringslinjer som delar upp streck mellan mörka ränder.
Typografi
från 12 till 64px · 8 steg
- Goga — ersättning: Inter Tight or Space Grotesk · konturer 400, 500 · Rubrik- och underrubrikstypsnitt – Används för alla H1–H4-rubriker och kort. Goga är ett anpassat geometriskt sans-serif-typsnitt med smala bländare och något fyrkantiga terminaler. Medelvikten (500) är reserverad för att markera rubriker på kortnivå; normalvikten (400) används för huvud- och avsnittsrubriker. För att komma åt de alternativa teckenformerna som definierar Modals identitet måste dess stilistiska uppsättning 'ss01' vara aktiverad. Negativt bokstavsavstånd minskar gradvis från -0,007 em vid 48px till -0,017 em vid 21px.
- Inter Variable — ersättning: Inter · konturer 400, 500 · Användargränssnitt och brödtext – navigering, knappar, brödtext, etiketter, sidfot. Medelvikt (500) används som standard för interaktiva element och navigering; normalvikt (400) används för stycken. Bokstavsavståndet minskas märkbart även vid små storlekar (-0,026 em vid 14px, -0,022 em vid 16px), vilket ger gränssnittet en komprimerad, terminal densitet. För alternativ interpunktion bör teckenvarianten 'cv11' inkluderas. Etiketter med bara versaler vid 12px använder +0,05 em bokstavsavstånd för att motverka brödtextens densitet.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 20px |
| Knappradie | 12px |
| Kortradie | 8px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 80px |
| Sidbredd | 1280px |
AI kommer att bygga din webbplats i Modal -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Slash — Midnattsvalv med förgyllda böcker
- AgentQL — Norrsken över terminalen på natten
- GitHub — En rymdkommandopanel med bioluminescerande kontrollpunkter – en mörk, atmosfärisk arbetsyta där ett enda grönt sken pekar vägen framåt.
- Doppler — Valvets lila ljus vid midnatt. Den nästan svarta duken lyser med en enda lavendelfärgad signal och ett grönt bekräftelseljus, varje yta tillräckligt böjd för att gripas.
- Basedash — En dataterminal vid midnatt med matt typsnitt. Ett mörkt observatorium där mätvärden lyser lila och grönt, rubriker med serifliknande former svävar över bruset och vita pillerformade knappar är de enda ljusa objekten i ett rum med mjuka svarta ytor.
- Superwhisper — Norrskenet upplöses över midnattsglaset
- Better Stack — Midnatts-SRE-konsol
- Langbase — Midnatts norrskenskonsol
- Astro — Rymdkontroll med ett enda lila sken från en nebulosa
- Wayfinder — En svart filmduk med en knappt hörbar titel som svävar ovanför en liveillustration. Gränssnittet är en ljusstyrkereglage snarare än en kontrollpanel.
- HashiCorp — Kontrollrummet vid midnatt med lila neon är en mörk teknisk yta där en glödande hexagonal kub fungerar som enda färgreferens.
- Umbrel — En mysig eldstad i nattrummet – ett mörkt rum där en enda persikofärgad glöd framhäver det som verkligt är viktigt.