Skip to content

Brand & identity + bespoke cinematic site + hand-coded technical SEO

alasservice.com

alas

Role
Brand & Identity · Web Developer · Technical SEO
Stack
Static siteVanilla JSVercel FunctionsView TransitionsJSON-LD
Timeline
2 weeks
Status
Live
alas — Brand & identity + bespoke cinematic site + hand-coded technical SEO

01

The Problem

alas is an advisory firm for artists, producers and labels — legal, management, booking, fiscal, rights and career development — entering a sector where trust and perception are everything and where competitors present themselves as generic and corporate. There was nothing to start from: no brand, no name resolved visually, no identity, no site. The brief was, at heart, twofold: build from scratch a brand and a site worthy of the service — premium, distinctive, fast, and findable on Google — that would convert artists and labels into calls, without leaning on a CMS, a template or a page builder that would cheapen the perception.

02

The Approach

Brand first, then the site. I defined the full identity — the name as a visual asset (the lowercase, the 'a' isotype, the ® suffix), a warm ink/paper/gold palette, Geist typography and a distinctive voice — and condensed it into a deliverable brand kit. On that foundation I built a 100% bespoke static site, no framework, no build, no page builder, on a hand-made design token system. The home is a scroll-driven cinematic narrative, and everything is wired as progressive enhancement: content is always visible and accessible even when the browser doesn't support the animations. Leads ship through a custom serverless function — no third-party form services, credentials only on the server — and technical SEO and structured data are hand-written.

03

What I Built

  1. 01Brand identity from scratch: visual naming (the lowercase as a resource, the 'a' isotype, the ® mark), color system (ink #1a1410, paper #efe9dc, gold accent #d4c089), Geist/Geist Mono typography and editorial art direction; delivered as a full brand kit (PDF style guide, SVG and PNG logos, favicon and iconography, and the fonts)
  2. 02Bespoke static site on a design-token-based system, no framework, no build, no page builder; vanilla HTML/CSS/JS deployed on Vercel with clean URLs
  3. 03Scroll-driven cinematic home with native CSS animations (animation-timeline, scroll-driven) and a custom magnetic cursor (mix-blend-mode), always as progressive enhancement and respecting prefers-reduced-motion
  4. 04Awwwards-grade services page: 12 services as interactive rows, page transitions with the View Transitions API, hero depth via a giant isotype and parallax, and micro-interactions, with graceful degradation where the browser doesn't support it
  5. 05First-party lead capture, no third parties: 'book a call' form in a card-style modal, delivered by a serverless function (Vercel Functions + SMTP via Nodemailer), with honeypot anti-spam and credentials only in server environment variables — never on the client
  6. 06Hand-coded technical SEO with zero plugins: dynamic titles & meta, canonical, robots.txt, sitemap.xml, Open Graph/Twitter Cards and full JSON-LD (LegalService, OfferCatalog) for indexing and rich results; set up and verified in Google Search Console
  7. 07Performance and Core Web Vitals: compressed background video, conditional asset loading, fonts with preload, light grain texture and zero third-party dependencies
  8. 08Brand infrastructure: domain and corporate email (info@alasservice.com), isotype-based favicon, live CET clock as a brand detail and full coherence of header, footer and typography between home and services

04

The Outcome

An advisory firm that launches with its own brand and a site to match: distinctive, fast and fully indexable, with a premium aesthetic that sets it apart from the sector's corporate competition. Leads land directly in the firm's inbox — no middlemen, no third-party platforms — and the site stands on its own, no CMS, no plugins, no templates locking it in. An end-to-end project shipped — from identity to JSON-LD, from isotype to lead — handcrafted, not configured.