ASALA · Brand sheet

Components

Eight parts of the building, each on its own sheet. Every one started as a standard interface component and was rebuilt from architecture: doors, models, title blocks, louvres, lifts.

Drawing list
SheetTitleReplaces
A-101Pivot doorStart a project
A-104Title blockIntake form + approval stamp
A-105Construction sequenceProcess stepper
A-106Brise-soleilCase card preview
A-107ElevatorNavigation
A-108Room scheduleCommand palette
A-109Foundation stoneToast
A-110Laying coursesLoader
Live: navigates
Start a
project
Demo: click toggles
Start a
project
States
RestHeavy Dove Grey slab, engraved label in two offset tones.
Hover / focusRotates 16° on a pivot set a third in from the edge; a flat Casper slot shows on both sides.
PressSwings to 78° with perspective; “Come in” is written on the slot. Then it travels to the brief.
Keyboard / touchIt is a real link: Enter or a tap runs the same swing. Reduced motion: no swing, a Casper inset ring instead.

Started asA primary “Start a project” button.

BecameA pivot door in the lobby wall: a concrete leaf that turns on an offset pin and lets you in.

ProjectASALA · Elevation
Sheet title

Pivot door

SheetA-101
Scale1:1
Date

Issue a brief

Scope
Validation: required cells show an inline note and receive focus. Submit: courses are laid while it files, then “Approved for construction” is stamped and a toast lowers with a local reference. Nothing leaves your browser.

Started asA contact / intake form.

BecameThe title block from the corner of a drawing: Project, Client, Contact, Email, Scope, Closest scope, Target date, Brief, an automatic sheet number, Drawn: you, Date: today. Submitting brings down a rubber stamp, then the foundation stone.

ProjectASALA · Elevation
Sheet title

Title block

SheetA-104
Scale1:1
Date

The ASALA method

Arrow keys step through the five stages; clicking the drawing builds the next one.

±0.00 SITE BOUNDARYFOUNDATIONS +04.00+08.00+12.00+16.00 RUN · CAREGROW

Started asA four-step process stepper.

BecameThe ASALA method as a construction-sequence elevation: Audit is survey and foundations, Specify is the frame, Architect is the envelope, Launch turns the lights on, and Attend keeps it cared for and signalling. Tabs with arrow keys; the drawing builds to the chosen stage.

ProjectASALA · Elevation
Sheet title

Construction sequence

SheetA-105
Scale1:200
Date
Best BottlesCommerceIn progress. A glass-packaging store for a catalogue of about 2,300 products, being built now.View case · Best Bottles
Tarife AttarCommerceA perfume-oil house you navigate by compass, with every scent placed on a world map.View case · Tarife Attar
Each card opens onto a real capture of the client’s live site. Reduced motion: the fins fade instead of turning.

Started asA case-study card with a hover preview.

BecameA brise-soleil: vertical fins rotate open in a stagger on hover or focus to show the photograph behind and its label. On touch, a tap opens and closes them.

ProjectASALA · Elevation
Sheet title

Brise-soleil

SheetA-106
Scale1:1
Date

The column on the left of every page is the lift. Floors are listed top to bottom, Ground to Bedrock; the car rides the shaft as you scroll and the readout gives the depth in metres. Click a floor to travel. On this page the floors are the sheets.

On a phone the shaft becomes a compact level indicator in the top bar; “Floors” opens the directory between two lift doors.

GL01L02L03L04B
  • Desktop shaft
  • Car tracks
  • Readout
  • Travel
  • Lift doors

Started asA sticky navigation bar.

BecameAn elevator: a fixed shaft with a level indicator and a car that tracks the scroll, a height readout, and on mobile a directory that opens like a pair of lift doors.

ProjectASALA · Elevation
Sheet title

Elevator

SheetA-107
Scale1:1
Date

Press ⌘K, Ctrl K or / anywhere. Results are a room schedule (No., Room, Level, Notes); beside them a small plan fills the selected room with poché hatch.

  • Modal dialog, focus trapped
  • Input drives a listbox
  • Arrow keys move
  • Travel to the room
  • Close and restore focus

Started asA command palette.

BecameA room schedule and plan: search becomes a table of rooms; the selected room is shaded on a floor plan so you know where it sits in the building.

ProjectASALA · Elevation
Sheet title

Room schedule

SheetA-108
Scale1:1
Date

A Casper plaque with engraved lettering, done with two offset tones rather than a glow. It drops fast and settles by three pixels. It is announced through a polite live region and can be dismissed.

Started asA toast notification.

BecameA foundation stone: “Project received · date · ref”, lowered into place under the page.

ProjectASALA · Elevation
Sheet title

Foundation stone

SheetA-109
Scale1:1
Date

Tiles are laid course by course from the bottom, alternating direction as a bricklayer would, until a square-grid figure appears: a square and a rotated square around a centre. The percentage is Hanken with tabular figures, exposed as a progressbar.

Reduced motion: the finished figure is shown at once.

Started asA spinner / progress bar.

BecameLaying courses: a loader that builds a geometric figure tile by tile on a square grid. Used while the title block files.

ProjectASALA · Elevation
Sheet title

Laying courses

SheetA-110
Scale1:1
Date