Modal

Paleta

Marka

• Lime Pulse #7fee64 — Głównymi elementami identyfikacji korporacyjnej są logo, główne wezwanie do działania (CTA), wypełnienie tagów, stany aktywne i podstawowy kolor ilustracji.

Neutralny

• Phosphor White #ddffdc — Główną czytelną powierzchnią są tekst główny, kolor tytułu, kontur ikony i wypełniony tekst przycisku.
• Void Black #000000 — Płótno strony, najgłębsza warstwa tła
• Ground Iron #181818 — Wypełnienie głównego przycisku, powierzchnie kart w ciemnych obszarach, powierzchnia podstawowa interfejsu użytkownika.
• Carbon Veil #212525 — Podwyższone powierzchnie, tło nawigacyjne, lekko jaśniejsze od podłoża.
• Circuit Border #485346 — Zarys/ramka akcji widmowej, główna interaktywna cienka linia, ma stonowany odcień szarozielony.
• Phosphor Blue-Black #1f2a33 — Drugorzędne cienkie linie znakujące, dzielące kreski między ciemnymi paskami.

Typografia

od 12 do 64 px · 8 kroków

• Goga — wymiana: Inter Tight or Space Grotesk · wytyczne 400, 500 · Czcionka nagłówków i podtytułów – używana do wszystkich nagłówków i kart H1–H4. Goga to niestandardowa geometryczna czcionka bezszeryfowa z wąskimi otworami i lekko kwadratowymi końcówkami. Średnia grubość (500) jest zarezerwowana do wyróżniania nagłówków na poziomie kart; standardowa grubość (400) jest używana do nagłówków głównych i sekcji. Aby uzyskać dostęp do alternatywnych kształtów glifów, które definiują tożsamość Modal, należy włączyć zestaw stylistyczny „ss01”. Ujemne odstępy między literami stopniowo zmniejszają się od -0,007 em przy 48 px do -0,017 em przy 21 px.
• Inter Variable — wymiana: Inter · wytyczne 400, 500 · Interfejs użytkownika i treść – nawigacja, przyciski, treść, etykiety, stopka. Domyślnie dla elementów interaktywnych i nawigacji używana jest średnia grubość (500); dla akapitów używana jest normalna grubość (400). Odstępy między literami są zauważalnie zmniejszone nawet przy małych rozmiarach (-0,026 em przy 14 px, -0,022 em przy 16 px), co nadaje interfejsowi skondensowaną, końcową gęstość. W przypadku alternatywnej interpunkcji należy uwzględnić wariant znaku „cv11”. Etykiety pisane wielkimi literami o szerokości 12 px używają odstępów między literami +0,05 em, aby zrównoważyć gęstość tekstu.

Interwały i forma

Podobne style

• Slash — Skarbiec północny ze złoconymi księgami
• AgentQL — Zorza polarna nad terminalem nocą
• GitHub — Kosmiczny panel dowodzenia z bioluminescencyjnymi punktami kontrolnymi — ciemna, nastrojowa przestrzeń robocza, w której pojedyncza zielona poświata wskazuje drogę naprzód.
• Doppler — Fioletowe oświetlenie krypty o północy. Prawie czarne płótno rozświetla się pojedynczym lawendowym sygnałem i zielonym światłem potwierdzającym, każda powierzchnia jest na tyle zakrzywiona, że można ją uchwycić.
• Basedash — Terminal danych o północy z matową czcionką. Ciemne obserwatorium, gdzie wskaźniki świecą na fioletowo i zielono, nagłówki szeryfowe unoszą się nad szumem, a białe przyciski w kształcie pigułek to jedyne jasne obiekty w pomieszczeniu o miękkich, czarnych powierzchniach.
• Superwhisper — Zorza polarna rozpływa się nad nocnym szkłem
• Better Stack — Konsola Midnight SRE
• Langbase — Konsola Midnight Northern Lights
• Astro — Centrum kontroli misji głębokiego kosmosu z pojedynczą fioletową poświatą mgławicy
• Wayfinder — Czarny ekran filmowy z ledwo słyszalnym tytułem unoszącym się nad ilustracją na żywo. Interfejs to suwak jasności, a nie panel sterowania.
• HashiCorp — Pomieszczenie kontrolne o północy, z fioletowym neonem, to ciemna techniczna powierzchnia, na której jedynym odniesieniem kolorystycznym jest świecący sześciokątny sześcian.
• Umbrel — Przytulne palenisko w serwerowni — ciemne pomieszczenie, w którym pojedyncza brzoskwiniowa poświata podkreśla to, co naprawdę ważne.