[{"data":1,"prerenderedAt":81},["ShallowReactive",2],{"case-study-how-we-built-this-site":3},{"slug":4,"title":5,"pageTitle":6,"metaDescription":7,"kicker":8,"heading":9,"lead":10,"meta":11,"heroImage":30,"problem":33,"approach":38,"outcome":45,"gallery":60,"pullQuote":76,"next":79},"how-we-built-this-site","This very site","How we built this site — case study · Maarifa","The studio site is the first project here. Two colours, motion over decoration, four free tools, self-hosted fonts — how we built it, and why.","Case 01 · Studio · Built in the open · 2026","This very site —\u003Cbr\u002F>built in the \u003Cem>open.\u003C\u002Fem>","The first project in this list is the one you are standing in. We are our own most demanding client, so we built the studio site the way we build for everyone else — \u003Cspan class=\"hl\">small, honest, and made to last.\u003C\u002Fspan>",[12,15,18,21,24,27],{"label":13,"value":14},"Client","Ourselves",{"label":16,"value":17},"Discipline","Brand · Website · Four tools",{"label":19,"value":20},"Engagement","Designed & built in-house",{"label":22,"value":23},"Stack","Nuxt 4 · Vue · TypeScript",{"label":25,"value":26},"Timeline","Built between client work · 2026",{"label":28,"value":29},"Live","You're reading it",{"url":31,"alt":32},"\u002Fcase\u002Fhome-hero.webp","The Maarifa homepage — the studio site",{"heading":34,"body":35},"The hardest brief we have had is our own.",[36,37],"A studio that builds websites has an awkward first problem: its own website. It is the one project where you are the client, the deadline, and the person who has to live with every compromise.","Most studio sites talk about craft. We wanted one where the craft is the thing you are standing in — where \"how we work\" is not a page you read, it is the experience of being here. \u003Cspan class=\"hl\">If the site could not prove it, we would not claim it.\u003C\u002Fspan>",{"heading":39,"body":40},"Two colours, and let the work do the talking.",[41,42,43,44],"The whole site is two colours — ink and a single amber. No gradients, no second accent, no colour smuggled in to rescue a weak layout. When everything is one colour, the writing and the spacing have to carry the page, so that is where the attention went.","Instead of colour, the design language is movement. Words arrive one at a time, images wipe in like a curtain, the marquee reacts to the way you scroll. It all lives in one place in the code, and it turns itself off completely for anyone whose device asks for less motion.","The fonts are our own copies, served from here — nothing phones home to a font company as you read. Every page is rendered to plain HTML ahead of time, so it arrives fast and arrives whole, before a single line of JavaScript has run.","Then, instead of buying ads, we built four small tools and gave them away: a website check-up that tells you the truth, a name checker, a cost calculator, and a way to keep an eye on a site over time. They are the clearest sample of how we think, because you can use them right now — free, and without leaving an email.",{"heading":46,"stats":47},"What it adds up to",[48,51,54,57],{"figure":49,"caption":50},"2","Colours in the whole palette",{"figure":52,"caption":53},"4","Free tools, no sign-up to use",{"figure":55,"caption":56},"0","Trackers on any page",{"figure":58,"caption":59},"~0.2s","To first paint, prerendered",[61,65,69,73],{"url":62,"alt":63,"span":64},"\u002Fcase\u002Fcase-services.webp","The services page — one calm composition, repeated four times","g4",{"url":66,"alt":67,"span":68},"\u002Fcase\u002Fcase-cookie.webp","The cookie note: no tracking, full stop","g2",{"url":70,"alt":71,"span":72},"\u002Fcase\u002Fcase-worthit.webp","The worth-it calculator — one of four free tools on the site","g3",{"url":74,"alt":75,"span":72},"\u002Fcase\u002Fcase-healthcheck.webp","The free website check-up — a plain-English report, no email required",{"text":77,"by":78},"If the site can't be honest, nothing we build on it \u003Cem>can be.\u003C\u002Fem>","— Maarifa",{"slug":80,"title":80},"",1783467735594]