align

align portal — design system v0.1

clarity and control,
on every screen.

the building blocks of the align portal. brand-locked colors, considered type, restrained components. every primitive on this page maps to a brand rule, not a designer's instinct.

01 / palette

color

khaki and moss ground the brand in nature. orange is reserved — it only appears on calls-to-action, sign-off prompts, and payment moments. stone and mushroom carry surfaces.

primary

khaki

#4f5641

primary text + brand block

orange

#ea5e11

CTA, sign-off, payment

ink

#000000

luxe block, dream-home

secondary + surfaces

moss

#88927a

mushroom

#d9d6cd

stone

#edeae7

dusty

#bbc2ae

paper

#ffffff

surface treatments

paper

white card on stone background. default for content panels.

mushroom

soft fill for nested or quiet panels.

khaki block

brand block. headers, hero strips, callouts.

ink

reserved for luxe contexts — dream-home, framer moments.

02 / typography

type

headers are alwayslowercase — even proper nouns. the only exception is the standalone word "I". mulish for headers (a stand-in for hero new), jost for body, mulish light for sub-headers.

forever home, on a quiet hill

display / h1mulish 600 · 56px · -0.005em

stage 1 — concept design

heading 2mulish 600 · 36px

next milestone

heading 3mulish 600 · 24px

feasibility presentation

heading 4mulish 600 · 18px

clarity and control, before commitment.

sub-headermulish 300 · 18px

By the time Cara reaches Align, the comparison is often over. Someone she trusts has told her this is the firm. We design for that conviction — calm, considered, never loud.

bodyjost 400 · 16px · 1.55

signed · stage 0 · 14 days ago

captionjost 400 · 13px · uppercase letter-spacing

03 / components

components

buttons

orange is reserved for sign-off, payment, and primary CTAs only. khaki carries everyday actions.

status badges

not startedin progressneeds attentioncompleteawaiting sign-off

form inputs

icons

outlined only — never solid. moss green by default; orange when used as a CTA marker.

project
client
builder
meeting
document
tasks
payment
chat
inbox
ai
ESD
signed

stage progress bar

the canonical project journey, mapped from the align value stream. every project sits at exactly one stage at a time. sign-off events advance it.

just started — sketch design

  1. sales
    lead → commencement
  2. 2sketch
    stage 0
  3. 3concept
    stage 1
  4. 4DA
    stage 2a
  5. 5interior
    stage 2b
  6. 6CD + BA
    stage 3

mid-flight — DA in council

  1. sales
    lead → commencement
  2. sketch
    stage 0
  3. concept
    stage 1
  4. 4DA
    stage 2a
  5. 5interior
    stage 2b
  6. 6CD + BA
    stage 3

finishing line — CD + BA

  1. sales
    lead → commencement
  2. sketch
    stage 0
  3. concept
    stage 1
  4. DA
    stage 2a
  5. interior
    stage 2b
  6. 6CD + BA
    stage 3

04 / putting it together

a project, in cara's words

a small composition showing how the primitives lock together for cara's view. mobile-first, calm, scannable. status, money, documents, next step.

your project

hill house, deviot

with davies construction · principal saxon hall

stage 1 of 6
  1. sales
    lead → commencement
  2. sketch
    stage 0
  3. 3concept
    stage 1
  4. 4DA
    stage 2a
  5. 5interior
    stage 2b
  6. 6CD + BA
    stage 3

next step

concept presentation — thursday 9:30am

joint meeting with saxon and the davies team. we'll walk through the two refined options and the concept budget.

paid & outstanding

$26,000 / $82,000

stages 0 & 1 deposit complete

  • stage 0 — sketch$6,000paid
  • stage 1 — concept$20,000paid
  • stage 2a — DA$5,000due
  • stage 2b — interior$20,000later
  • stage 3 — CD + BA$31,000later

your documents

  • needs & wants — hill house

    signed · stage 0

    signed

  • sketch design — option B (final)

    signed · stage 0

    signed

  • client architect agreement (CAA)

    signed · stage 0

    signed

  • concept design pack v1

    updated 3 days ago

    review

ask align

what was decided about the kitchen window?

ask anything about your project. answers come from your meeting minutes, drawings, and emails — sources cited.

05 / reference

the six stages

straight from the align value stream map — total enquiry-to-build duration ~49–90 weeks. every stage in the portal mirrors this structure exactly.

lead → commencement1

sales

lead through to project commencement. enquiry, application, discovery call, deposit. handover from go high level.

~18 business days

stage 02

sketch design

site visit through to client architect agreement signed. two sketch options, refined option, pre-build feasibility.

3–7 weeks

stage 13

concept design

brief through to signed concept and budget alignment. concept estimate package, builder estimate, alignment.

10–20 weeks

stage 2a4

development application

DA documentation, council lodgement and permit assessment. ends with DA permit received.

6–13 weeks

stage 2b5

interior design

interior design, finishes, joinery pricing and sign-off. ends with detailed drawings signed.

10–16 weeks

stage 36

construction docs + BA

engineering coordination, contract estimate, building approvals, build contract signed and construction start.

20–34 weeks