Linear
Präzisiounsinstrument fir Mëtternuecht
De Linear Design System ass eng nuets Kommandozentral, déi op bal schwaarzen Uewerflächen (#08090a) mat klorem wäisser Schrëft an engem eenzege limettgréngen Akzent (#e4f222) gebaut ass, déi als funktionell Täscheluucht funktionéiert - kleng, mat héijem Kontrast a spuersam benotzt fir Aktiounen unzeweisen. D'Interface behandelt Däischtert als Grondlag anstatt als Thema: den Text ass klorem Wäiss mat engem knappen Ofstand tëscht de Buschtawen (-0,022em), d'Schrëftgewiicht läit am niddrege Beräich vun 400–510 anstatt fettgedréckt, an d'Ränner sinn ultradënn (0,5px), fir datt d'Geometrie d'Aarbecht maache kann, déi typescherweis vu Schied gemaach gëtt. D'Komponente fille sech präzis gemaach un - Radien vun 6px an 12px, kompakt Margen vun 8–12px an e bal komplette Manktem u dekorativen Elementer - sou datt d'Produkt-UI (Aufgabenkaarten, Kanban-Boards, KI-Agenten-Paneele) déi eenzeg visuell Textur an engem soss rouege System ass.
D'Layout huet eng maximal Breet vu ronn 1200px, zentréiert, mat engem donkelen Hannergrond, deen bis un d'Kante vum Viewport erstreckt. Den Haaptelement ass eng grouss Iwwerschrëft, lénks ausgeriicht (64–72px), gepaart mat engem riets ausgeriichtenen Handlungsruff (CTA), gefollegt vun engem grousse Produktscreenshot, deen e bësse méi wäit wéi déi maximal Breet geet. De Rhythmus vun de Sektiounen wiesselt tëscht zwou-Kolonnen-Kompositioune mat Text lénks an engem Bild riets, a Produktdisplaysträifen a voller Breet, getrennt duerch 96px vertikal Schinnen. De Sträif mam Logo vum Client ass eng eenzeg horizontal Zeil. D'Säit benotzt ni dräi-Kolonnen-Kaartegitter oder gefliest Strukturen - d'Informatiounsdicht bleift niddreg, woubäi déi meescht Sektiounen vill wäisst Raum an een eenzegt fokusséiert Element um Bildschierm benotzen. D'Navigatioun ass eng fix iewescht Leescht mat engem lénks ausgeriichte Logo a riets ausgeriichte Linken, ouni Sidebar oder Mega-Menü.
D'visuell Sprooch vu Linear baséiert op Produkt-Screenshots: d'Illustratiounen um Ufank an an de Sektiounen sinn echt Biller vun der Benotzeroberfläche vun der Linear App, déi a maximalem Detail festgehale ginn - Aufgabenkaarten, Kanban-Boards, KI-Agenten-Dashboards, Kommandopaletten - a schmuel gerahmte Kader placéiert. Keng Stockfotoen, keng Lifestyle-Biller, keng abstrakt Illustratiounen. Logoen ginn als neutral gro Sträif (#8a8f98) vun gläicher Gréisst fir d'Clienten ugewisen. Ikonen sinn minimalistesch linear SVG-Biller an enger monochromatescher Grostuf. De Screenshot uewen op der Säit schwëmmt op engem subtile lineare Gradient (vun donkel op hell), wat eng atmosphäresch Déift erstellt, ouni richteg Landschaften ze benotzen. All visuellt Element ass e funktionellt Element vum Produkt selwer.
Palette
Mark
- Acid Lime
#e4f222— Déi wichtegst Kontrollknäppercher an aktiv Navigatiounsindikatoren sinn en hellen Akzent, deen dat monochromt Faarfschema brécht.
Neutral
- Mist
#d0d6e0— Nieweniwwerschrëften, Knäppchentext op donkelen Uewerflächen - Void
#08090a— Säitenleinwand, Hannergrondbild a voller Breet - standardméisseg ginn all Elementer op dësem Hannergrond placéiert. - Carbon
#0f1011— Kaarteflächen, Navigatiounsbaren, sinn e Schrëtt iwwer der Leinwand fir Inhalt a Kaarten ze placéieren. - Obsidian
#161718— Erhuewen Uewerflächen, méi déif Kartongsplacken - Graphite
#23252a— Subtil Ränner, Trenner, subtil Knäppchekonturen – texturéiert Ränner mat nidderegem Kontrast - Smoke
#383b3f— Dënn Bordüren hunn e méi héije Kontrast wéi Graphit - Sektiounstrenner.
Typographie
vun 13 bis 72px · 8 Schrëtt
- Inter Variable — Ersatz: Inter (variable) · Konturen 300, 400, 510, 590 · Primär UI a Header Schrëft - Gëtt an der Navigatioun, am Kierpertext, den Iwwerschrëften, de Knäppercher an de Kaarten benotzt.
- Berkeley Mono — Ersatz: JetBrains Mono · Konturen 400 · Code-ugegrenzten UI-Text - Verëffentlechungsidentifikatoren (ENG-2703), Tastaturkierzungen, Monospace-Schrëftmetadaten
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | geräumig |
| Basis Schrëtt | 8px |
| Knäppchenradius | 6px |
| Kaarteradius | 12px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 96px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Linear op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- Aaru — Partikelfeldobservatoire um Mëtternuecht
- Atlas Card — De Mëtternuechtsgewalt, mat sengem eenzege Saphirstraal, ass eng pechschwaarz Fläch, wou dat eenzegt wat zielt dat déift elektrescht Blo ass.
- Checkly — Kontrollzentrum fir déif Orbit-Missioun
- Savee — Schwaarz Leinwand fir visuell Kuratoren
- Inngest — En däischtert, rouegt Observatoire, ekipéiert fir d'Aarbecht mat Instrumenter, beliicht vun enger eenzeger amberfaarweger Kontrollluucht
- Dala — e Stärebild, dat op schwaarzem Samt schweeft
- Origin Financial — Eng Mëtternuechtsgalerie vu roueger Opulenz. E rouegen, bal däischteren Zëmmer, wou grouss Schrëften mat Serifen an e puer beliichte faarweg Paneele d'Gefill kreéieren, datt Finanzen e suergfälteg kuréiert Konschtwierk sinn.
- Hyperstudio — Den Design ass an Obsidian gekratzt. Text a fein Linnen encadréieren e wäisse Raum aus purem Schwaarz, mat heiansdo gëllene Kompassmarken, déi de Wee weisen.
- Air — Skulptur "Mëtternuechtshimmel duerch Glas"
- Resend — schwaarze Samt mat purpurroude Neonfaarf
- Raycast — Mëtternuechtskommandozentrum, Coral Neon
- Dimension — eng Aarbechtsplaz mat mattéierte Glaspanneauen, déi bei Dämmerung beliicht sinn