Telegram, WhatsApp  +380637610482
Walery Danyuk
Walery DanyukwywoływaczTworzymy narzędzia AI dla firm. Wysoka jakość. Przystępna cena.Napisz na Telegram
Linear — podgląd witryny w tym stylu

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

ZamiarOznaczający
Gęstośćprzestronny
Podstawowy krok8px
Promień przycisku6px
Promień karty12px
Cienienie - granice zamiast cieni
Między sekcjami96px
Szerokość strony1200px

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