Sheet B2 · Design system

Tokens, components, states.

Everything on this sheet renders from the same code as the site, so it can’t drift from it. Tokens live in src/design/tokens.ts and build to CSS with a contrast check.

T1 · Color

Two modes, one signal.

Every text pair is checked for WCAG AA when the tokens build.

System · dark

  • Background#090B0A
  • Surface 1#0E110F
  • Surface 2#141716
  • Surface 3#1B1F1E
  • Hairline#252927
  • Line strong#3A3E3C
  • Field edge#6B706E
  • Text#EAEEEC
  • Text muted#A5ABA8
  • Text faint#828885
  • Pixel at rest#4D5250
  • Live#7FD497
  • Live track#1E3527
  • Error#FF8A7A
  • Focus#EAEEEC
  • On text#090B0A

Document · light

  • Background#FBFAF7
  • Surface 1#F4F2EF
  • Surface 2#EBE9E5
  • Surface 3#E2DFDA
  • Hairline#D2D6DE
  • Line strong#AAB1BE
  • Field edge#788091
  • Text#0F1D38
  • Text muted#4B5669
  • Text faint#5F6879
  • Pixel at rest#C3C8D0
  • Blue#1957D2
  • Live#13773F
  • Live track#DCEFE2
  • Error#B42318
  • Focus#1957D2
  • On text#FBFAF7

T2 · Type scale

Fluid between the 390 and 1440 frames.

Grotesk at 400 and 500. Mono at 400, system language only.

Token3901440LeadingTrackingSample
--t-display46px128px0.94-0.048emEvery project
--t-title44px96px0.96-0.044emEvery project
--t-h134px64px1-0.036emEvery project
--t-h228px40px1.08-0.028emEvery project
--t-h322px28px1.18-0.018emEvery project
--t-h419px22px1.3-0.01emEvery project
--t-lead19px24px1.42-0.012emEvery project teaches the next one.
--t-body17px18px1.56-0.004emEvery project teaches the next one.
--t-small16px16px1.50emEvery project teaches the next one.
--t-mono12px13px1.450.06emWorld updated 3h ago
--t-mono-s12px12px1.40.06emWorld updated 3h ago

T3 · Spacing

A 4px base, named by size.

  • --s-3xs2px
  • --s-2xs4px
  • --s-xs8px
  • --s-s12px
  • --s-m16px
  • --s-l24px
  • --s-xl32px
  • --s-2xl48px
  • --s-3xl64px
  • --s-4xl96px
  • --s-5xl128px
  • --s-6xl160px
  • --s-7xl200px

T4 · Grid

Twelve columns at 1440, four at 390.

1440 · 12 columns · margin 64 · gutter 24
390 · 4 columns · margin 20 · gutter 12

T5 · Radius and lines

Square corners. Hairlines.

Radius 0px · everything
Radius 2px · reserved
hairline · 1px
rule · 1px
strong · 2px
focus · 2px
pixel · 8px

T6 · Motion

Things move only when the system does something.

A new item gets one green pulse, then settles to white. No loops, no parallax, no pings.

--d-instant90ms
--d-quick160ms
--d-base240ms
--d-draw700ms
--d-pulse1500ms
--e-standard
cubic-bezier(0.2, 0, 0, 1)
--e-out
cubic-bezier(0.16, 1, 0.3, 1)
--e-in
cubic-bezier(0.7, 0, 0.84, 0)
  • Pulse. Snap to green, hold 500ms, settle to white over 1000ms. Color only, never scale.
  • Cascade. In the world, an update spreads along links about 90ms per hop and finishes within two seconds.
  • Draw. New links draw on once over 700ms. Waiting links are dashed and still.
  • Hover. A color or underline change in 90ms. Nothing slides or grows.
  • Reduced motion. Nothing moves. New items show green until the next change, links appear complete, the plan renders whole.

C1 · Status line

Mono, one pixel at the front.

Green only within 24 hours of a real update. Stale reads gray.

World updated 3h agoBuffalo, NY

Live

Running nowBuffalo, NY

Running, no timestamp from the system yet · gray

World updated 6d agoBuffalo, NY

Stale

Stage 02Next

Next

C2 · Roadmap stage

Running, next, ahead.

01RunningNowChanged since your last visit

Atlas OS on pre-development

Atlas OS is the first product on the system: estimating for pre-development. The loop is running on a mixed-use redevelopment in Buffalo, from site to estimate, with the project team signing off on every number that matters.

Running nowBuffalo, NY

02NextChanged since your last visit

First outside developer projects

The same loop on projects for outside developers, with their teams making the calls and signing off.

Turns green whenThe first outside developer runs a project on the system.

03AheadChanged since your last visit

First published case study, with before-and-after numbers

Hours, cycle time and cost of the work, measured before the system and after it, on one project, published in full.

Turns green whenA project clears pre-development and its developer agrees to publish the numbers.

C3 · Loop step card

Upcoming, active, done.

Step 04/05EXPERTS ANSWER · SYSTEM RECORDS

World updates

Answers land in the world with who said it, when, and what it changes. Nothing gets retyped into a spreadsheet, and nothing gets lost in an inbox.

WorldANSWERS IN · AREAS CONNECTED

Upcoming

Step 03/05PERSON APPROVES · SYSTEM SENDS AND CHASES

Contact experts

The system writes to the experts the project needs: counsel, the surveyor, engineers, the architect. A person approves the first message to any new expert.

WorldOUTREACH SENT · WAITING ON ANSWERS

Active · the world is changing

Step 02/05ONE PERSON · ONE SESSION

Work session

Each person spends 30 to 40 minutes with the AI on the work that’s theirs. It drafts, they decide, and what they settle goes into the world.

WorldDRAFTED WORK ATTACHED TO THE PLAN

Done

C4 · World node and link

Rest, new, settled.

Before the step
Step 3: new nodes pulse once
Settled
  • Node at rest
  • New
  • Settled
  • Outside expert
  • Link
  • Waiting on an answer

C5 · People and system

Who does what.

People

  • Judgment

    Which site to pursue, which risk to carry, and when an answer is good enough to act on.

  • Relationships

    The lender, the planning board, the neighbors, and the partners you’ll build with again.

  • Sign-off

    The plan, the first message to any new expert, every number that matters, and anything with a stamp.

System

  • Drafting

    The first version of every memo, ask, schedule and estimate, with its sources attached.

  • Chasing

    The follow-ups nobody wants to send, sent on time, until the answer comes back.

  • Remembering

    Every answer, with who gave it and when, kept in this project’s world. The next project gets the method, not the answers.

  • Re-planning

    When an answer changes the plan, the system proposes the new one. Once the team confirms, each person hears what’s theirs now.

C6 · Route card

Rest, hover, selected, focus.

Rest
Hover
Selected
Focus

C7 · Buttons

Primary, secondary, quiet.

primary

Default
Hover
Pressed
Focus
Disabled

secondary

Default
Hover
Pressed
Focus
Disabled

quiet

Link with arrow

C9 · Example chip

Rest, hover, selected, focus, disabled.

Rest
Hover
Selected
Focus
Disabled

C10 · Draft-plan output

Empty, building, complete.

Set in Document mode: the system hands you a document.

Draft plan · Pre-development · Worked example

No project chosen yet

Waiting for a project

  1. 01Phases
  2. 02Sections
  3. 03The work, with an owner on each item
  4. 04The experts it would contact, each with a drafted ask

Empty
Draft plan · Pre-development · Worked example

40-unit mixed-use building on a vacant corner lot

Drafting the work

  1. P1Site and zoning

    1. Site control

      • Pull the title report and list every easementSystem
      • Boundary and topographic surveyExpert
    2. Zoning

    3. P2Feasibility

      1. Program

        • Site conditions

        • P3Design

          1. Concept

          2. P4Cost and capital

            1. Estimate

              • Capital

              Drafting the work

              Building
              Draft plan · Pre-development · Worked example

              40-unit mixed-use building on a vacant corner lot

              Draft complete · Nothing sent

              1. P1Site and zoning

                1. Site control

                  • Pull the title report and list every easementSystem
                  • Boundary and topographic surveyExpert
                2. Zoning

                  • Map use, height, density and parking for the cornerSystem
                  • Decide whether to pursue anything beyond as-of-rightPerson
              2. P2Feasibility

                1. Program

                  • Test unit mix for 40 units over ground-floor retailSystem
                  • Set the retail frontage and residential entryPerson
                2. Site conditions

                  • Scope a Phase I environmental site assessmentExpert
                  • Scope geotechnical boringsExpert
                  • Confirm water, sewer and storm capacity at the streetExpert
              3. P3Design

                1. Concept

                  • Two massing options for the cornerExpert
                  • Draft the code path for the architect: construction type, egress, separationsSystem
              4. P4Cost and capital

                1. Estimate

                  • Build the estimate from the massing, with a source for every lineSystem
                  • Check every assumption that moves the totalPerson
                2. Capital

                  • Draft sources and usesSystem
                  • Open lender conversationsPerson

              Experts it would contactA person approves each first message

              • Surveyor“Can you quote a boundary and topographic survey of a vacant corner lot, with your earliest start?”Draft · Not sent
              • Zoning counsel“For 40 units over ground-floor retail on this corner, what’s as-of-right and what would need relief?”Draft · Not sent
              • Environmental consultant“Can you scope a Phase I for a vacant lot with unknown prior uses, with fee and turnaround?”Draft · Not sent
              • Geotechnical engineer“What boring program would you recommend for a mid-rise mixed-use building here?”Draft · Not sent
              • Civil engineer“Can you confirm utility capacity at the street and what the connections will need?”Draft · Not sent
              • Architect“Could you test two massing options for 40 units over retail on this corner?”Draft · Not sent

              Draft plan. Nothing was sent.

              Draft plan. Nothing was sent.

              Complete

              C11 · Form field

              Empty, focus, error, filled, disabled.

              Empty
              Focus
              Error
              Filled
              Disabled

              U1 · Decks and documents

              The same system on a slide and on paper.

              Templates with example content. Slides stay in System mode; anything handed on uses Document mode.

              Slide · title
              Slide · roadmap status
              Field notes · Template · Rev 2026-11-05

              Pre-development · Week six

              Zoning counsel answered. The massing holds.

              Counsel confirmed the program is as-of-right, so the variance work comes off the plan and lender conversations move up. Two items changed owners.

              What changed

              • Variance application removed from the planCounsel · answer on record
              • Massing check with the architect addedOwner: development lead
              • Lender conversations moved upOwner: development lead

              Waiting on

              The geotechnical boring scope and the utility capacity letter. Both asks went out after a person approved them; follow-ups are on schedule. See the full plan.

              Document mode: paper, navy ink, one blue for links.Page 1
              Document · field notes, letter