
Linear
instrument o precyzji północy
System projektowania liniowego to nocne centrum dowodzenia zbudowane na niemal czarnych powierzchniach (#08090a) z wyraźnym białym tekstem i pojedynczym limonkowo-zielonym akcentem (#e4f222), który działa jak funkcjonalna latarka – mała, o wysokim kontraście i używana oszczędnie do wskazywania akcji. Interfejs traktuje ciemność jako fundament, a nie motyw przewodni: tekst jest wyraźny i biały, z małymi odstępami między literami (-0,022 em), czcionki mają grubość od 400 do 510, a nie są pogrubione, a obramowania są ultracienkie (0,5 px), aby geometria mogła wykonywać pracę typowo wykonywaną przez cienie. Komponenty sprawiają wrażenie precyzyjnie wykonanych – promienie 6 px i 12 px, kompaktowe marginesy 8–12 px i niemal całkowity brak elementów dekoracyjnych – dzięki czemu interfejs użytkownika produktu (karty zadań, tablice Kanban, panele agentów AI) jest jedyną wizualną teksturą w tym skądinąd spokojnym systemie.
Maksymalna szerokość układu wynosi około 1200 px, strona jest wyśrodkowana, a ciemne tło rozciąga się do krawędzi obszaru wyświetlania. Głównym elementem jest duży nagłówek, wyrównany do lewej (64–72 px), połączony z wezwaniem do działania (CTA) wyrównanym do prawej, a następnie duży zrzut ekranu produktu, który nieznacznie wykracza poza maksymalną szerokość. Rytm sekcji zmienia się między kompozycjami dwukolumnowymi z tekstem po lewej stronie i obrazem po prawej stronie, a paskami produktu o pełnej szerokości, oddzielonymi pionowymi odstępami o szerokości 96 px. Pasek z logo klienta jest pojedynczym poziomym rzędem. Strona nigdy nie wykorzystuje trzykolumnowych siatek kart ani struktur kafelkowych — gęstość informacji pozostaje niska, a większość sekcji wykorzystuje dużą białą przestrzeń i pojedynczy element centralny na ekranie. Nawigacja to stały górny pasek z logo wyrównanym do lewej i linkami wyrównanymi do prawej, bez paska bocznego ani mega-menu.
Język wizualny Linear opiera się na zrzutach ekranu produktów: ilustracje na początku i w sekcjach to rzeczywiste obrazy interfejsu użytkownika aplikacji Linear, uchwycone z maksymalną szczegółowością – karty zadań, tablice Kanban, pulpity agentów AI, palety poleceń – umieszczone w cienkich ramkach. Brak zdjęć stockowych, obrazów lifestylowych i abstrakcyjnych ilustracji. Loga są wyświetlane jako neutralny szary pasek (#8a8f98) o jednolitym rozmiarze dla klientów. Ikony to minimalistyczne, liniowe obrazy SVG w monochromatycznej skali szarości. Zrzut ekranu u góry strony unosi się na subtelnym liniowym gradiencie (od ciemnego do jasnego), tworząc nastrojową głębię bez użycia rzeczywistych krajobrazów. Każdy element wizualny jest funkcjonalnym elementem samego produktu.
Paleta
Marka
- Acid Lime
#e4f222— Główne przyciski sterujące i wskaźniki aktywnej nawigacji stanowią jaskrawy akcent, który przełamuje monochromatyczną kolorystykę.
Neutralny
- Mist
#d0d6e0— Nagłówki drugorzędne, tekst przycisków na ciemnych powierzchniach - Void
#08090a— Płótno strony, obraz tła o pełnej szerokości — domyślnie wszystkie elementy są umieszczane na tym tle. - Carbon
#0f1011— Powierzchnie kart i paski nawigacyjne stanowią szczebel wyżej w hierarchii, umożliwiający umieszczanie treści wewnątrz kart. - Obsidian
#161718— Podniesione powierzchnie, głębsze panele tekturowe - Graphite
#23252a— Subtelne obramowania, separatory, subtelne kontury przycisków – krawędzie o niskim kontraście i fakturze - Smoke
#383b3f— Cienkie obramowania mają większy kontrast niż grafitowe separatory sekcji.
Typografia
od 13 do 72px · 8 kroków
- Inter Variable — wymiana: Inter (variable) · wytyczne 300, 400, 510, 590 · Podstawowa czcionka interfejsu użytkownika i nagłówka – używana w nawigacji, tekście głównym, nagłówkach, przyciskach i kartach.
- Berkeley Mono — wymiana: JetBrains Mono · wytyczne 400 · Tekst interfejsu użytkownika sąsiadujący z kodem – identyfikatory wersji (ENG-2703), skróty klawiaturowe, metadane czcionek o stałej szerokości
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 8px |
| Promień przycisku | 6px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 96px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Linear i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Aaru — Obserwatorium Pola Cząstek o północy
- Atlas Card — Krypta Północy, z pojedynczym promieniem szafiru, to czarna jak smoła przestrzeń, w której liczy się tylko głęboki, elektryczny błękit.
- Checkly — Centrum Kontroli Misji Głębokiej Orbity
- Savee — Czarne płótno dla kuratorów wizualnych
- Inngest — Ciemne, ciche obserwatorium, wyposażone w urządzenia do pracy z instrumentami, oświetlone pojedynczym bursztynowym światłem pilotażowym
- Dala — konstelacja unosząca się na czarnym aksamicie
- Origin Financial — Północnoniebieska galeria cichego przepychu. Ciche, niemal ciemne pomieszczenie, w którym duże czcionki szeryfowe i kilka podświetlonych, kolorowych paneli stwarza wrażenie, że finanse to starannie wyselekcjonowane dzieło sztuki.
- Hyperstudio — Wzór wyryto w obsydianie. Tekst i cienkie linie otaczają białą, czystą czerń, z okazjonalnymi złotymi znakami kompasu wskazującymi drogę.
- Air — rzeźba „Północne niebo przez szkło”
- Resend — czarny aksamit z fioletowym neonowym kolorem
- Raycast — Centrum dowodzenia Midnight, Coral Neon
- Dimension — stanowisko pracy oświetlone światłem dziennym, z panelami ze szkła matowego