Letters
Poranna wizyta w klinice na świeżym powietrzu – sterylny biały stół pod delikatnym, niebieskim sufitem, zasłany niebieskimi narzędziami chirurgicznymi
Letters to narzędzie do pisania listów medycznych, które rozpoczyna się od gradientowego nagłówka w stylu „otwartego nieba” – miękkiego, nastrojowego niebieskiego paska tworzącego spokojną, kliniczną atmosferę – a następnie przechodzi w czystą, białą przestrzeń roboczą. System został zaprojektowany w stylu monochromatycznym: czyste białe płótno, niemal czarny tekst (#070709), ciemne, przypominające pigułki wezwania do działania i zaokrąglone karty unoszące się na najsubtelniejszych cieniach. Pojedynczy, jasnoniebieski kolor (#2597d0) jest zarezerwowany dla interpunkcji funkcjonalnej – ikon, mikrografiki, odtwarzaczy fal – nigdy nie jest używany do przycisków ani dużych wypełnień. Typografia wykorzystuje Open Runde, geometryczną, humanistyczną czcionkę bezszeryfową z agresywnymi, ujemnymi odstępami między literami na większych ekranach (-0,04 em przy 80 px), która kompresuje nagłówki do zdecydowanych bloków. Komponenty sprawiają wrażenie lekkich, niczym instrument medyczny: cienkie ramki, duże odstępy między kartami, przyciski w kształcie pigułki i dyskretne wykorzystanie podniesienia, które pozwala, aby nagłówek w kształcie nieba pełnił funkcję emocjonalną.
Strona główna w odcieniu błękitnego nieba rozciąga się na całą szerokość strony, z wyśrodkowanym tytułem i podtekstem oraz przyciskiem wezwania do działania poniżej. Płynnie przechodzi w biały obszar treści z dużymi odstępami między sekcjami (80-120 px). Sekcje tematyczne wykorzystują dwukolumnową siatkę dużych, zaokrąglonych kart (o promieniu 18-32 px) o równych proporcjach. Nagłówki sekcji są zawsze wyśrodkowane, w jednej kolumnie, nad siatką kart. Nawigacja to stały biały pasek górny z wyśrodkowanym skupiskiem linków i wyrównanymi do prawej przyciskami logowania. Ogólny rytm to pojedynczy, nastrojowy pasek główny, a następnie naprzemiennie białe sekcje i sekcje #f5f5f5 z równomierną pionową przestrzenią. Nie ma paska bocznego, megamenu ani asymetrycznych układów — strona sprawia wrażenie spokojnej, symetrycznej kolumny.
Projekt wizualny skupia się niemal wyłącznie na interfejsie użytkownika produktu – bez zdjęć lifestylowych ani abstrakcyjnych renderów 3D. Język wizualny opiera się na kartach produktów prezentujących natywny interfejs aplikacji: porównanie dokumentów „przed” i „po”, obszar ładowania z przerywaną ramką oraz odtwarzacz audio w formie fali. Jedynym nastrojowym elementem wizualnym jest gradient nieba na głównym obrazie. Ikony to płaskie, jednokolorowe ikony liniowe #2597d0 (koperta, mikrofon, znacznik wyboru) o jednolitej grubości linii, bez wypełnionych wariantów. Styl ilustracji jest stonowany: makiety produktów są wyświetlane na białym tle, lekko obrócone dla nadania głębi, nigdy nie pochylone ostro. Odręczna czcionka (The Doctor) to jedyny element organiczny/ręcznie wykonany, użyty wyłącznie w celu przywołania klinicznego charakteru pisma na karcie „Przed”.
Paleta
Marka
- Surgical Blue
#2597d0— Ikony, ikona mikrofonu, odtwarzacz fal dźwiękowych i małe akcenty funkcyjne tworzą pojedynczą nutę chromatyczną w całym interfejsie.
Neutralny
- Obsidian
#070709— Treść, wypełnione przyciski wezwania do działania i ciemne elementy interfejsu użytkownika — zamiast czystego koloru #000 wybrano kolor prawie czarny, aby złagodzić kontrast z białym tłem. - Paper White
#ffffff— Tło strony, powierzchnie kart i tekst przycisków stanowią główne płótno dla wszystkich sekcji znajdujących się poniżej głównego elementu. - Cloud Gray
#f5f5f5— Dodatkowe powierzchnie kart i tła sekcji oddzielają bloki funkcjonalne od głównego płótna. - Sky Tint
#d7e6f5— Odcień tekturowej ramy i ledwo zauważalny błękitny odcień powierzchni tworzą wrażenie atmosfery, a nie szarości. - Charcoal
#60606c— Tekst główny, tekst drugorzędny i stonowane obramowania — dominujący neutralny kolor dla treści innych niż nagłówki. - Slate
#8b8b8b— Tekst drugorzędny i nieaktywne stany graniczne - służą do wskazania lokalizacji i zapewnienia dostępności dla osób niepełnosprawnych.
Typografia
od 12 do 80px · 8 kroków
- sans-serif — wymiana: Inter · wytyczne 400, 700 · bezszeryfowe - znalezione w wyodrębnionych danych, ale nieopisane przez sztuczną inteligencję.
- Open Runde — wymiana: Inter Tight · wytyczne 400, 500, 600, 700, 900 · Podstawowym krojem nagłówków i nawigacji jest czcionka „Geometryczny humanista”, z małymi odstępami między literami przy dużych rozmiarach; -0,04 em przy 80 px kompresuje nagłówek do jednego, wyrazistego bloku. Używaj go do wszystkich nagłówków, nawigacji i dużych tekstów.
- Inter — wymiana: system-ui · wytyczne 400, 500 · Tekst drugorzędny i tekst interfejsu użytkownika – używany w przypadku małych nagłówków, elementów nawigacyjnych i linków w tekście, gdzie pożądany jest bardziej neutralny rytm czytania. Łączy się z Open Runde, tworząc kontrast hierarchiczny.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 12-16px |
| Promień przycisku | 100px |
| Promień karty | 18px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 80-120px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Letters 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
- Integrated Biosciences — laboratorium bioluminescencji o północy
- Mintlify — Ogród chmur nad szklanym stołem. Ręcznie rysowane niebo i dokument są ze sobą połączone – to jedyne miejsce, gdzie kolor i koncepcja spotykają się, zanim strona rozpłynie się w mnisiej bieli.
- Gleap — Przestrzeń robocza utrzymana w ciepłych kremowych odcieniach z grafitowymi akcentami — studio, w którym matowe, czarne kropki atramentu zdają się unosić nad lnianą architekturą.
- Render — Projekt wykonano ze szczotkowanego aluminium. Interfejs sprawia wrażenie czystego, geometrycznego dokumentu inżynierskiego – biała przestrzeń, cienkie linie i pojedyncza fioletowa linia, która skupia uwagę na akcji.
- Grafbase — rysunek techniczny na zimnym marmurze
- Slash — Skarbiec północny ze złoconymi księgami
- Modal — Terminal fosforyzujący w zaciemnionej serwerowni – jedynym źródłem światła jest jasnozielony kolor
- Whimsical — Intensywny śliwkowy atrament na lawendowym tle — kreatywny notatnik studyjny, który może służyć również jako tablica techniczna.
- AgentQL — Zorza polarna nad terminalem nocą
- Alveos One — Przytulne schronienie z kamieni rzecznych – cichy, oświetlony kremowym światłem pokój do medytacji, w którym pojedynczy grafitowy obiekt spoczywa w delikatnym bursztynowym blasku
- GitHub — Kosmiczny panel dowodzenia z bioluminescencyjnymi punktami kontrolnymi — ciemna, nastrojowa przestrzeń robocza, w której pojedyncza zielona poświata wskazuje drogę naprzód.
- Buddy — Rysunek techniczny na papierze milimetrowym. Biała powierzchnia rysunku jest oznaczona ledwo widoczną siatką, naniesioną niemal czarnym tuszem, z fluorescencyjnymi, limonkowo-zielonymi oznaczeniami i opalizującymi, gradientowymi pociągnięciami.