Caldera
Smideseld på varm kalksten. Duken är av rå, varm gips, och varje orange element ser ut som pyrande glödande kol som tryckts in i ytan.
Caldera arbetar på en varm kalkstensduk, badad i smält orange. Gränssnittet är platt och skugglöst, vilket gör att den ultradjärva, kondenserade typen i en nästan arkitektonisk skala (upp till 189px) kan bära hela den strukturella belastningen. En enda vibrerande orange (#fc5000) fungerar som den enda, aggressiva kromatisk accenten mot en bakgrund av monokroma, varma gråtoner, plasmalila är reserverad för huvudhalvtonsbilden och svavelgul för taggar. Det visuella språket är vulkaniskt: kondenserade, tunga bokstäver, halvtonsmönster, 40px radier på kort och knappar och 800px pillerformade kontroller – värme inkapslad i en mjuk, pappersliknande yta.
Den visuella paletten är minimalistisk och genomtänkt. Huvudfönstret använder ett abstrakt rastermönster (orange prickar på en lila-till-orange gradient) istället för ett fotografi – det fungerar inte som dekoration, utan som ett konstnärligt uttryck för varumärket. Kort med produktinformation och meddelanden använder antingen solida Ember-block eller en rasterfärgad plasmaviolett som bildfyllningar, vilket ger ett enhetligt grafiskt system. Partner-/integrationslogotyper visas som monokroma ikoner på en ljus bakgrund. Det finns inga fotografier, 3D-renderingar eller livsstilsbilder. Ikonerna är små, monokroma och minimalistiska – Discord, X och Telegram finns i navigeringen som enkla tecken. Det visuella språket är grafiskt och redaktionellt, inte fotografiskt: det liknar affischdesign snarare än stockbilder.
Palett
Stämpla
- Ember
#fc5000— Primära åtgärdsknappar, statistikkort och viktiga visuella accenter är de enda aggressiva färgaccenterna; dess fyllighet mot de varma gråtonerna skapar en känsla av brådska utan behov av ytterligare dekorativa element. - Plasma Violet
#524ae9— Huvudsaklig rastergradientbas, en ytterligare kortyta - Används nästan uteslutande i huvudpunktmönstret och på ett dedikerat kort; används aldrig för kontroller.
Neutral
- Sulfur
#f5f28e— Bakgrunden för tagg- och kategoriikonerna, små markeringar, är en mjuk gul färg som används för att indikera blogginläggskategorier och programmeddelanden. - Limestone
#f7f6f2— Kortytor, bakgrunder för innehållsblock och ytterligare knappfyllningar har en ljusare, varmare vit nyans som gör att elementen sticker ut mot sidans arbetsyta. - Pumice
#e2e2df— Sidans huvudbakgrund är en varm mellangrå färg som fungerar som grund för varje sektion; den är något mörkare än kartongens yta, vilket möjliggör en subtil separation av figur och bakgrund utan skuggor. - Obsidian
#070607— Huvudtexten, rubrikerna, länktexten och knappramarna är nästan svarta med en knappt märkbar varm nyans som matchar arbetsytans varma färger. - Chalk
#ffffff— Text i mörka områden, inmatningstext på mörka bakgrunder, överlägg med hög kontrast – Rent vitt används endast där maximal kontrast med mörka ytor krävs.
Typografi
från 12 till 189px · 10 steg
- PP Neue Corp Compact — ersättning: Bebas Neue · konturer 400 (Ultrabold cut) · Alla rubriker och visningstext. Ett specialdesignat, kompakt och ultrafet typsnitt ger rubrikerna en industriell, skyltliknande tyngd. Storleken på 189 pixlar i huvudblocket återspeglar varumärkets signaturstil: kompakt, nästan strukturell snarare än typografisk. Inställningarna "ss06" och "ss10" aktiverar alternativa bokstavsformer och avstånd för en mer aggressiv, kompakt rytm. Positivt bokstavsavstånd (+0,02 em) är ovanligt för visningsstorlekar och förhindrar en känsla av trång text vid 80–189 pixlar.
- DM Sans — ersättning: Inter · konturer 500 (Medium only — never Regular or Bold) · Huvudtexten, navigeringslänkarna, knappetiketterna och sekundära rubriker är upp till 30 pixlar. Den medelstora teckenstorleken valdes medvetet – Regular skulle se för tunn ut mot det extra fetstilta rubriktypsnittet, och Bold skulle konkurrera med det. DM Sans skapar en humanistisk, något geometrisk motvikt till det industriella rubriktypsnittet.
- System sans-serif — ersättning: Inter · konturer 400 · Bildtexter, metatext, datum, mikrotaggar. Används endast i 12px, där vikt och varumärkesigenkänning är mindre viktiga än att spara på storlek.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 16px |
| Knappradie | 40px |
| Kortradie | 40px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 80px |
| Sidbredd | 1280px |
AI kommer att bygga din webbplats i Caldera -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
- teenage engineering — Industriell katalog inom studiobelysning - produkten är det enda viktiga objektet på sidan, och allt annat diskuteras runt den.
- basement — En tom tryckpress klockan tre på natten – enorma, komprimerade typsnitt som utbreder sig över det kolsvarta, en enda glimt av orange ljus i navigeringsfältet, allt annat vitt eller spöklikt grått.
- amra — En skimrande sfär mot en vit bakgrund – lavendelfärgen är den enda färgpulsen på en nästan perfekt akromatisk sida, och den enkla gradientsfären gör det arbete som huvudillustrationen vanligtvis gör.
- Stink Studios — En filmstudio vid midnatt - projektorn surrar, rummet är mörkt, bara filmen är upplyst
- Andrei Rybin — En monokrom skissbok är en designeranteckningsbok där telefonskärmar är fästa på en vit vägg som kontaktark.
- Uniswap Cup — Sändningen av e-sporttävlingen äger rum på en mockup-sajt - en rosa markör skisserar ett rutnät av vita rutor och tunna linjer
- Freytag Anderson — Biografridån går upp på ett enda ord. En enorm rörlig bild tar upp hela skärmen, varumärket sitter i hörnet som en titel, och inget annat distraherar.
- Integrated Biosciences — bioluminescenslab vid midnatt
- Vercel — Terminal tryckt på vitt papper
- Mintlify — En molnträdgård ovanför ett glasbord. Den handritade himlen och dokumentären är inramade tillsammans – den enda platsen där färg och koncept möts innan sidan bleknar i klostervitt.
- Gleap — En arbetsplats inredd i varma krämfärgade toner med grafitfärgade accenter – en studio där mattsvarta bläckprickar tycks sväva ovanför linnearkitekturen.
- ClickUp — En kraftfull instrumentpanel på vit marmor. Sidan är en produktbroschyr för ett produktivitetsverktyg, så det visuella språket är lånat från själva produkten: täta listor, statusindikatorer, grupper av avatarer och djärva typografiska uttalanden som ser ut som en produktspecifikation på display.