
Subframe
Een grafische tekening op warm perkament. Designpapier, waarop elke streep met grafiet of gum is gezet, nooit met verf – diepte wordt bereikt door lijndikte en spaarzame schreefletters.
Subframe is een monochrome ontwerpomgeving: een warm, crèmekleurig canvas, grafietzwarte inkt en een complete afwezigheid van kleuraccenten. De hele interface wordt ervaren als één enkel materiaal – papier, potlood en schaduw – met één gedurfde typografische touch: een verfijnde schreefletter (Instrument Serif) tegenover een systematische schreefloze letter (Inter), wat de koppen een redactionele uitstraling geeft. De oppervlakken zijn vlak en omlijst in plaats van verhoogd; diepte wordt bereikt door dunne scheidingslijnen in #e5e7eb en ingezette highlights op donkere elementen in plaats van schaduwen. De dichtheid is ruim: een breed verticaal ritme (48-64px tussenruimte tussen secties), gecentreerde lay-outs over de volledige breedte en ruime witruimte rond de tekst. De enige kleur is het contrast tussen bijna wit en bijna zwart, waardoor de donkere knop het meest opvallende element op elke pagina is en de strook met partnerlogo's in grijstinten het enige decoratieve visuele element.
Gecentreerde lay-outs over de volledige breedte (1200px) met een ruim verticaal ritme. Het hoofdelement is een enkel, gecentreerd blok: een donker, gesegmenteerd bedieningselement bovenaan, een grote kop "Inter", een subkop van één regel en twee naast elkaar geplaatste knoppen (gevuld + doorschijnend) – geen afbeelding aan de zijkant, geen onderbrekingen in de lay-out. Onder het hoofdelement bevindt zich een gecentreerde, grijze logostrook. Elk volgend onderdeel volgt hetzelfde patroon: een links uitgelijnd titel- en subkopblok, gevolgd door een productpresentatie over de volledige breedte met 48-64px tussenruimte tussen de onderdelen. De navigatie is minimaal: een bovenste balk met gecentreerde links en rechts uitgelijnde acties, geen zijbalk, geen megamenu. De pagina leest van boven naar beneden als een reeks gecentreerde statements, elk met voldoende ruimte – de lay-out voelt meer aan als een redactioneel portfolio dan als een drukke productpagina.
Het visuele ontwerp is minimalistisch en functioneel. Het systeem maakt gebruik van twee visuele modi: (1) ingekaderde productscreenshots en UI-mockups in frames met een straal van 24px – deze tonen daadwerkelijke interfacecomponenten (tabellen, knoppen, formulieren) weergegeven in hetzelfde monochrome kleurenpalet, waardoor de screenshots naadloos in de pagina geïntegreerd lijken; (2) een enkele strook met grijze partnerlogo's dient als sociaal bewijs, plat weergegeven, zonder kleur of kaders. Er zijn geen lifestylefoto's, abstracte kleurverlopen of 3D-renders. Het enige illustratieve element is een donkere producttegel, gecentreerd op een warmgrijze achtergrond met een merkicoon – dit wordt gezien als een productdemonstratie, niet als decoratie. Alle afbeeldingen bevinden zich in een tekstgebaseerde lay-out, waarbij de tekst het visuele gewicht draagt.
Palet
Neutrale
- Page Canvas
#fafafa— De pagina-achtergrond, de ansichtkaart op canvas, de lichte tekst op donkere oppervlakken – een warmwitte kleur die ten grondslag ligt aan het gehele monochrome systeem. - Hairline Border
#e5e7eb— Scheidingslijnen, kaartranden, afbeeldingskaders, pictogramcontouren - het meest gebruikte type contour in het systeem, definieert de ruimtelijke structuur. - Card Surface
#ededed— Een verhoogde achtergrond voor kaarten, een extra oppervlak, bevindt zich een trede boven het canvas, waardoor een groepering zonder schaduwen ontstaat. - Divider Mid
#dadada— Middentoonscheidingen en overgangen tussen secties - Graphite
#242424— Neutrale opvulling met hoog contrast voor primaire knoppen op lichte oppervlakken. - Ink Black
#171717— Tekst, koppen, contouren van pictogrammen - iets koeler dan Graphite, gebruikt voor typografie in plaats van oppervlakken.
Typografie
van 12 tot 128px · 7 stappen
- Inter — vervanging: Inter (Google Fonts) · overzichten 500, 600, 700 · Een systeeminterface in schreefloos lettertype voor navigatie, hoofdtekst, knoppen, subkoppen en sectiekoppen. Lettergewicht: 500 voor hoofdtekst en bedieningselementen, 600 voor subkoppen en navigatieaccenten, en 700 voor sectiekoppen. Sterke negatieve spatiëring comprimeert geometrische vormen van elke grootte, waardoor de interface een compacte, technische uitstraling krijgt.
- Instrument Serif — vervanging: Playfair Display · overzichten 400 · Een schreeflettertype, exclusief ontworpen voor koppen en redactionele content. De letterdikte van 400 en de spatiëring van -0,025em zorgen voor een elegante, cursieve uitstraling die contrasteert met de industriële geometrie van Inter – een kenmerkende techniek: een enkel woord of een enkele zin met schreefletters op een pagina zonder schreefletters, die dient als visuele interpunctie in plaats van als kopstijl.
- Fragment Mono — vervanging: JetBrains Mono · overzichten 400 · Gebruik het accentteken mono voor inline code-achtige elementen, taglabels en technische toelichtingen. Het wordt spaarzaam gebruikt, bijvoorbeeld in functielijsten en inline annotaties waar de ontwerptool wil aangeven "dit is machine-uitvoer".
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 8px |
| Knopradius | 16px |
| Kaartradius | 24px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Subframe en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- monopo saigon — Een vloeibare, iriserende gloed achter de redactionele stilte – een monochrome redactionele galerij zwevend op gesmolten licht.
- Hyer Aviation — Schemering in de cockpit boven perkament. De bleke ochtendhemel raakt het schreefloze logo, dat de hele romp bedekt, en een enkel warm kleikleurig accent doorbreekt de monochrome ingetogenheid.
- OFF+BRAND. — Iriserende bol op warm perkament
- Seed — een levend organisme onder laboratoriumglas
- Eindhoven Design District — Editorial brutalism on white paper is een gemeentelijk ontwerpmanifest, uitgevoerd in grote letters, met minimale fotografie en absolute terughoudendheid.
- Miranda — Klassieke, breedletterige typografie op een lichtcrème achtergrond – een krantenredactioneel artikel voor het digitale tijdperk.
- Monocle — Een hoogwaardige krant in breed formaat op crèmekleurig papier. Een zorgvuldig samengestelde redactie, waarin elke column een eigen plek verdient en slechts één betekenisvolle kleur op de pagina voorkomt.
- Agencja brandingowa — Een fotogalerij in witte tinten met typografie in zwarte inkt.
- Websmith Studio — Ochtendlicht op crèmekleurig papier
- Aspelin Reitan — Architectuurarchief bij kaarslicht - De pagina oogt als een portfolio van gebouwde ruimtes, vastgepind aan een warme crèmekleurige muur, met een enkele regel witte tekst die boven elke afbeelding over de volledige breedte van de pagina zweeft.
- Public — Een zwart-wit fotoserie op koud marmer – bijna een monochroom canvas, met een schreeflettertype van 300 punten en een enkel paars accent dat al het kleurwerk doet.
- Motto — Een typografische monoliet op papier – een enkele, zelfverzekerde stem die zich uitspreekt op sneeuwwit papier.