Subframe
En grafisk teckning på varmt pergament. Designpapper, där varje penseldrag antingen är grafit eller suddgummi, aldrig målat – djup uppnås genom linjetjocklek och glesa seriffer.
Subframe är en monokrom designers arbetsyta: en varm, krämig duk, grafitsvart bläck och en fullständig avsaknad av kromatiska accenter. Hela gränssnittet uppfattas som ett enda material – papper, penna och skugga – med en djärv typografisk touch: en raffinerad serif (Instrument Serif) mot en systematisk sans-serif (Inter), vilket ger rubrikerna redaktionell tyngd. Ytorna är plana och inramade snarare än upphöjda; djup uppnås genom tunna avdelare i #e5e7eb och infällda markeringar på mörka kontroller snarare än skuggor. Tätheten är generös: en bred vertikal rytm (48–64px mellanrum mellan sektioner), centrerade layouter i full bredd och generöst vitt utrymme runt text. Den enda färgen är kontrasten mellan nästan vitt och nästan svart, vilket gör den mörka knappen till det mest slående elementet på varje sida, och remsan av partnermärkeslogotyper i gråtoner till det enda dekorativa visuella elementet.
Centrerade layouter i full bredd (1200px) med en generös vertikal rytm. Huvudelementet är ett enda, centrerat block: en mörk, segmenterad kontroll högst upp, en stor "Inter"-rubrik, en underrubrik med en rad och två intilliggande knappar (fyllda + genomskinliga) – ingen sidobild, ingen layoutuppdelning. Under huvudelementet finns en centrerad gråskalig logotypremsa. Varje efterföljande avsnitt följer samma mönster: ett vänsterjusterat titel- och underrubrikblock, sedan en produktpresentationsram i full bredd med 48–64px mellanrum mellan avsnitten. Navigeringen är minimal: en övre bar med centrerade länkar och högerjusterade åtgärder, ingen sidofält, ingen megameny. Sidan läses uppifrån och ner som en serie centrerade uttalanden, vart och ett med gott om utrymme – layouten känns mer som en redaktionell portfölj än en fullspäckad produktsida.
Den visuella designen är minimalistisk och funktionell. Systemet använder två visuella lägen: (1) inramade produktskärmdumpar och UI-mockups inneslutna i ramar med 24px radie – de visar faktiska gränssnittskomponenter (tabeller, knappar, formulär) renderade i samma monokroma palett, vilket gör att skärmdumparna ser sömlöst integrerade ut på sidan; (2) en enda remsa av partnerlogotyper i gråskala fungerar som socialt bevis, renderade platt, utan färg eller behållare. Det finns inga livsstilsfoton, abstrakta gradienter eller 3D-renderingar. Det enda illustrativa elementet är en mörk produkt"kakel", centrerad på en varm grå bakgrund med en varumärkesikon – den uppfattas som en produktdemonstration, inte dekoration. Alla bilder har en textbaserad layout, där den visuella tyngden bärs av texten.
Palett
Neutral
- Page Canvas
#fafafa— Sidans bakgrund, vykortet på duk, den ljusa texten på mörka ytor – en varmvit färg som ligger till grund för hela det monokroma systemet. - Hairline Border
#e5e7eb— Avdelare, kortramar, bildramar, ikonkonturer – den vanligaste typen av kontur i systemet, definierar den rumsliga strukturen. - Card Surface
#ededed— Upphöjd bakgrund för kort, en extra yta - placerad ett steg ovanför duken, vilket skapar en gruppering utan skuggor. - Divider Mid
#dadada— Mellantonsavdelare och övergångar mellan sektioner - Graphite
#242424— Neutral fyllning med hög kontrast för primära knappar på ljusa ytor. - Ink Black
#171717— Brödtext, rubriker, ikonkonturer – lite kallare än Graphite, används för typografi snarare än ytor.
Typografi
från 12 till 128px · 7 steg
- Inter — ersättning: Inter (Google Fonts) · konturer 500, 600, 700 · Ett sans-serif-gränssnitt – navigering, brödtext, knappar, underrubriker och avsnittsrubriker. Vikt: 500 för brödtext och kontroller, 600 för underrubriker och navigeringsaccenter och 700 för avsnittsrubriker. Starkt negativt bokstavsavstånd komprimerar geometriska former i alla storlekar, vilket ger gränssnittet ett kondenserat, tekniskt utseende.
- Instrument Serif — ersättning: Playfair Display · konturer 400 · Ett serif-typsnitt utformat exklusivt för rubriker och redaktionellt innehåll. Dess vikt på 400 och -0,025 em bokstavsavstånd skapar ett elegant, kursiverat utseende som står i kontrast till Inters industriella geometri – en signaturteknik: ett enda serif-ord eller en fras på en sans-serif-sida, som fungerar som visuell interpunktion snarare än en rubrikstil.
- Fragment Mono — ersättning: JetBrains Mono · konturer 400 · Accentfärgad mono för inline-kodliknande element, taggetiketter och tekniska anteckningar. Används sparsamt och förekommer i funktionslistor och inline-anteckningar där designverktyget vill indikera "detta är maskinutdata".
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 8px |
| Knappradie | 16px |
| Kortradie | 24px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 64px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Subframe -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- monopo saigon — En flytande, skimrande glöd bakom den redaktionella tystnaden – ett monokromt redaktionellt galleri som svävar på smält ljus
- Hyer Aviation — Skymning i cockpiten över pergament. Den bleka gryningshimlen möter den flygkroppsstora serif-logotypen, och en enda varm leraaccent bryter den monokroma återhållsamheten.
- OFF+BRAND. — Skimrande sfär på varmt pergament
- Seed — en levande organism under laboratorieglas
- Eindhoven Design District — Redaktionell brutalism på vitt papper är ett kommunalt designmanifest, utfört i stor stil, med minimal fotografi och absolut återhållsamhet.
- Miranda — Klassisk storformatstypografi mot ljus krämfärgad bakgrund – en tidningsledare för den digitala tidsåldern
- Monocle — En högkvalitativ tidning i stort format på krämfärgat papper. En noggrant utvald ledare, där varje kolumn förtjänar sin plats och endast en betydelsefull färg visas på sidan.
- Agencja brandingowa — Ett redaktionellt galleri i vita toner med typografi gjord i svart bläck
- Websmith Studio — Morgonljus på krämpapper
- Aspelin Reitan — Arkitektoniskt arkiv i ljuset av levande ljus – Sidan ser ut som en portfölj av bebyggda utrymmen, fästa på en varm krämfärgad vägg, med en enda rad vit text som svävar ovanför varje bild över hela sidans bredd.
- Public — En monokrom redaktionell artikel på kall marmor – nästan en monokrom duk, med ett 300-punkters serif-teckensnitt och en enda lila accent som gör allt färgarbete.
- Motto — En typografisk monolit på papper – en enda, självsäker röst som deklarerar sig på snövitt papper