Connect
Skip the project rail

Alaa Abbod · selected work

Ten builds, ten directions

Ten self-initiated concept websites, built to see whether a change of premise really changes the design — or only the logo. Each one is a complete, running page with a live preview and a write-up of how it went.

Jump to the index How they are made

  • 10 complete builds
  • 10 of 10 self-initiated concepts
  • 10 of 10 with a live preview
  • 10 of 10 honour reduced motion

self-initiated concepts · scroll the rail

01 of 10

  1. The Ember and Oak home page, from the masthead down to the reservation form Ember & Oak Restaurant · Portland, Oregon A wood-fired restaurant set like a print magazine: a masthead, ruled columns, dot-leader menus and the smallest JavaScript in the set. CSS Grid 5.8 KB JS
  2. The Aurelia House home page, from the hero down to the enquiry form Aurelia House Boutique hotel · Mayfair, London Forty-one rooms behind a walled garden, set in gold on charcoal. The most symmetrical page in the set, and the slowest on purpose. Focus trap 1.1s reveals
  3. The Norra Health home page, from the hero down to the appointment form Norra Health Family clinic · Portland, Oregon A clinic whose promise is calm, so calm became the constraint: twenty-six hand-drawn SVGs, an eighty-millisecond stagger, contrast ratios argued in the stylesheet. 26 SVGs Ratios in CSS
  4. The Arke Estates home page, from the hero down to the consultation form Arke Estates Real estate · Architectural Architecture, quietly brokered. Four colour tokens, three type weights, no shadows, no rounded corners, and the smallest stylesheet of the ten. 4 tokens 21.6 KB CSS
  5. The SLAB Strength Club home page, from the hero down to the sign-up form SLAB Strength Club Gym · Detroit, Michigan Concrete, forty-one squat racks and no mirrors. Three-pixel borders, hard eight-pixel shadows and reveals that snap in ninety milliseconds without a curve. 8px shadows 90ms linear
  6. The Noctis Studio home page, from the masthead down to the booking diary Noctis Studio Photography · London A darkroom rather than a gallery. Reveals arrive as a shutter wipe, the work sits on a strip you drag, and the lights stay off for a reason. Drag rail 10 modules
  7. The Root and Ritual home page, from the hero down to the newsletter block Root & Ritual Botanical skincare · Washington Two acres above the Salish Sea, thirty-four jars to a batch. Arch-topped plates, a fractal-noise grain over the whole page, and nothing landing quite square. feTurbulence 46 SVGs
  8. The Signalform home page, from the drawn dashboard down to the pricing table Signalform Developer tools · Observability A marketing site that contains the product rather than a screenshot of it: a hand-drawn SVG dashboard, a real command palette, and not one photograph in the build. ⌘K palette Zero photos
  9. The NEONFRAME home page, from the glitching hero down to the contact channel NEONFRAME Digital agency · Berlin A studio that sells realtime 3D, on a page with no canvas and no WebGL. Every glow, chamfer and scanline in it is CSS. CSS chamfers Zero photos
  10. The Brightloop home page, from the hero instruments down to the pricing block Brightloop Cohort courses · Education A career school whose product is structure, so the page shows structure: progress rings, growing bars and counters, all driven by one shared observer. SVG rings One observer

The index

The same ten, as a list. Every row goes to a full case study; every case study runs the real build in the page.

  1. Ember & Oak Editorial print · Restaurant 2021
  2. Aurelia House Luxury heritage · Boutique hotel 2023
  3. Norra Health Scandinavian calm · Family clinic 2020
  4. Arke Estates Radical minimal · Real estate 2025
  5. SLAB Strength Club Neo-brutalism · Gym 2022
  6. Noctis Studio Dark cinematic · Photography 2024
  7. Root & Ritual Organic botanical · Skincare shop 2020
  8. Signalform Precision dark · Developer tools 2026
  9. NEONFRAME Cyberpunk HUD · Digital agency 2023
  10. Brightloop Optimistic bright · Education 2022

How they are made

Ten different visual languages, one set of engineering habits. These are the rules every build in the set obeys.

  • No build step

    Every one of the ten is three files served as written: index.html, styles.css, script.js. No bundler, no transpiler, no node_modules, and nothing between the source and the browser.

    • HTML
    • CSS
    • Vanilla JavaScript

  • Tokens first

    Each site's identity lives in one :root block — colour, type, radius, easing. Arke Estates gets by on four colour tokens; NEONFRAME needs thirty-four. Change the block and the whole page changes mood.

    • Custom properties
    • clamp()
    • Fluid type

  • Motion with a brake

    All ten gate their animation behind prefers-reduced-motion, and several behind pointer: fine as well. Motion is an enhancement in every build; not one of them hides content behind an effect that might never run.

    • matchMedia
    • IntersectionObserver
    • rAF

  • Reachable without a mouse

    Every overlay takes focus, holds it and hands it back on Escape. Every accordion deliberately does not. Ten forms, each announcing its outcome in a live region rather than only showing it.

    • ARIA
    • Focus management
    • Keyboard

  • Interfaces drawn by hand

    Signalform's dashboard, Brightloop's progress rings and NEONFRAME's entire visual language are inline SVG and CSS. Those three ship no photographs at all — every pixel in them is generated in the browser.

    • Inline SVG
    • pathLength
    • clip-path

  • Ten voices, not one

    Editorial print, luxury heritage, Scandinavian calm, radical minimal, neo-brutalist, dark cinematic, organic botanical, precision dark, cyberpunk HUD, optimistic bright. No two of the ten share a typeface or a palette.

    • Art direction
    • Type pairing
    • Palette

Please rotate your device,
This is a vertical build.