design the front end every HouseAccount app shares

Everything a HouseAccount page is made of

One stylesheet, one script, the marks every app is known by, and the pages shown when an app is not. Each is at a stable path here; an app on the houseaccount gem serves the same paths itself, and everything else links them from this origin.

Stylesheet https://design.houseaccount.com/css/houseaccount.css Bootstrap 6 alpha, Bootstrap Icons and the house's own rules.
Script https://design.houseaccount.com/js/houseaccount.js Turbo, Bootstrap, and a Stimulus application with every controller the house names.
Pinned to a version https://design.houseaccount.com/v0.2.0/css/houseaccount.css · /v0.2.0/js/houseaccount.js · /v0.2.0/theme/nord.css Every release stays at its own prefix forever, whole and cached for a year, for a page that moves on its own terms. The unversioned paths follow the latest.

Favicons

What a tab, a phone and a manifest each ask for, per app under /favicon. The pink one is a local machine's.

App.svg-dev.svg-96.png-180.png-192.png-512.png.ico.webmanifest
houseaccounticomanifest
fountainicomanifest
goldrushicomanifest
houstonicomanifest
designicomanifest
autopiloticomanifest

Palettes

Nine stylesheets under /theme that repaint Bootstrap's ramps; the toggle rotates through them and flips the mode, the way the sidebar's does.

theme/<name>.css · bootstrap dawn dracula gruvbox monokai nord one_dark solarized tokyo_night

Components

Bootstrap 6 as the house draws it. Every rule that differs from upstream is in css/houseaccount.css.

Buttons and badges

enum delivered failed

Breadcrumb

Tooltip and relative time

Hover the icon and the time: ·

Phone

The server hands over ten digits and data-controller='phone'; the browser decides the shape, in a cell and in a field.

A cell: 4155550000

A masked value

********

Toast

Blue Crew was updated.

Chat

What the chat helper draws: turns in on the left and out on the right, who said each and when, a delivery mark, what a turn cost, an answer being typed, and a field whose suggestion cycles.

Claude

Data loaded! What can I help with?

you

How much did I bill last month?

Claude · $0.0123

$12,400Across 31 jobs, up from $9,800 the month before.

you

And the month before?

Wall

The signup flow's background: a cyanotype of the trades a homeowner books, drifting up in columns with the family's marks among them. One attribute draws it, data-controller='wall' on the shell, and the sheet in front is .welcome-card. Blueprint blues in light, inverted in dark.

houseaccount

Welcome to HouseAccount

Enter the phone number of your business and we’ll text a verification code

Tables

A recourse table: sortable headings with an icon, a kept row, the row a write just landed on, and cells that stack under 576 pixels.

Name Phone Status
Blue Crew4155550000active2121 jobs
Nashville Plumbing6155550123draft33 jobs
Golden Gate Electric4155559876active38,40538,405 jobs

Pages

What a HouseAccount app answers when it cannot answer, under /page. The houseaccount engine serves them for every status.

And what each app shows while it is down, under /down: its own mark in the middle, the house's at the foot. The engine answers /down.html with the host's own once Houseaccount.app names it, and Heroku's maintenance page points here.