Foundations

A warm neutral page, white cards, one violet-blue for action and five category hues kept to dots, chips and avatars.

Surfaces, text and accent

Page--bg

Card--surface

Inset--surface-2

Strong line--line-strong

Text--text

Quiet text--text-3

Accent--accent

Selected--accent-subtle

OK--ok

Warning--warn

Error--bad

Info--info

Category hues `data-cat="1..5"`

Ink for text on its tint, tint for chips and avatars, mark for dots and bars. One meaning per product.

TomatoInteractionLF

AmberPortfolioSW

GreenResearchDR

SkyFoundationsMO

PinkCommunityPR

Type

title 600 26/32Overview

subtitle 600 20/28Motion workshop

heading 600 16/24Weekly activity

body 400 15/22Bring the prototype from week 6.

label 500 14/20Learner seats

small 400 13/185 sessions, 112 RSVPs

stat 600 30/36184

Radius and marks

10 12 16 pill

10 for nav items and small buttons, 12 for buttons, inputs and menus, 16 for cards and dialogs, pill only for chips, badges, segmented controls, switches and pagination.

ui-mark dot

square, legends

Actions

One filled violet button per view. Secondary is white with a hairline, ghost is text, danger is a red outline.

Button `ui-button`

Primary

Secondary

Ghost

Danger

Hover

Focus ring

Primary hover

Disabled

Loading

sm

default

lg

Icon

Ghost icon

With ui-kbd

Inputs

Labels sit above, help and errors below on their own line. Focus is a violet border with a soft ring.

Field `ui-field ui-input`

Course nameShown on every session. Focused Hover Work emailEnter a full email address, like priya@halftone.school. Workspace addressOnly owners can change this.

More fields

Search Default length ui-select Time zone ui-combobox Cohort length ui-slider12 weeks Disabled slider3 Session description

Selection

Checkboxes, radios and switches use the accent when on. Chips filter, segmented controls switch a view.

Checkbox and radio `ui-choice`

Send reminders Include archived Locked by owner

Who can book office hours Learners in the course Open slots show on the course page. Anyone in the school Includes alumni and guests. Public link Available on the Campus plan.

Switch `ui-switch`

Waitlist for full sessions Tell hosts about each RSVP Recording (required on this plan)

Segmented `ui-segmented`

Chip `ui-chip aria-pressed`

Selected

Default

Hover

Focus

Disabled

The active place lifts onto a white thumb or takes the violet line; everything else stays quiet.

Nav `ui-nav ui-nav-item`

Tabs `ui-tabs`

21 going, 3 on the waitlist.

Breadcrumb `ui-breadcrumb`

Pagination `ui-pagination`

Steps `ui-steps ui-step aria-current="step"`

School
First course
Invite learners
First session

Steps before the current one show a check; on phones only the current label stays visible.

Feedback

Status is always a word with a mark. Alerts sit near the problem; toasts confirm what just happened.

Alert `ui-alert data-status`

Recording turns on automatically for workshops. Learners get the replay at 15:15.

Spring cohort imported. 184 learners and 4 courses are ready.

View learners

3 learners are on the waitlist. The main hall seats 60 and is free from 13:00.

The Zoom connection expired, so new sessions have no link.

Reminders are paused during the winter break, December 20 to January 5.

Status and badge

On trackNeeds attentionBehind by 2 weeksWaitlist, 1stDraft

WorkshopFoundationsCurrent planTrial

Toast `ui-toast`

Settings saved

Learners will see the new schedule defaults.

Progress and meter

74%74% Uploading 6161 / 120 h 184184 / 200 4949 / 50 GB

Progress is work done; meter is usage against a limit and turns amber, then red, near the limit.

Skeleton `ui-skeleton`

Empty state `ui-empty`

No sessions this week

Sessions you schedule for the spring cohort show up here with who is coming.

Data display

Tables, lists and facts read in tabular figures, with category marks keyed to the course.

Stat strip `ui-stat-strip`

Active learners: 184

Average completion: 62%

Sessions this week: 14

Table `ui-table-wrap ui-table`

Course	Learners	Completion	Status
Product Design Foundations	62	74%74%	On track
Research Methods	41	58%58%	Needs attention
Portfolio Studio	33	41%41%	Behind by 2 weeks

List `ui-list ui-list-item`

Data list `ui-data-list`

Host: Lena Fischer
When: Wed, Oct 28, 13:30
Zoom: zoom.us/j/81432209
Recording: On

Timeline `ui-timeline`

Lena Fischer added Easing curves cheat sheet
Today, 10:12
Kenji Sato joined the waitlist
Today, 9:48
Maya Okafor commented
Can we record the pair-tuning part too?
Yesterday, 18:20
Lena Fischer scheduled the session
Oct 21, 11:30

Avatar, card, kbd, code

MODRPRH

Portfolio Studio

33 learners · next review today at 16:00

Press ⌘ K to search, or paste commons.app/join/halftone-7q2k into the course channel.

Embed the schedule

<iframe src="https://commons.app/embed/halftone/schedule"
  title="Halftone School schedule"></iframe>

Charts `ui-chart`

Past weeks
This week, so far

Share across courses, 184 learners

Foundations 62
Interaction 48
Research 41
Portfolio 33

Layers

Menus, tooltips, dialogs and the command menu float on the card surface with the one floating shadow. Shown open here; the buttons open the live ones.

Menu `ui-menu`

Tooltip `ui-tooltip`

Dialog `ui-dialog`

Archive the spring cohort?

184 learners keep read-only access. You can restore it within 30 days.

Command menu `ui-command`

Accordion `ui-accordion`

Who can see recordings?

Learners in the course and its hosts. Guests see only sessions they joined.

How long are recordings kept?

Until the cohort is archived, then 30 more days.

App layout

The shell, page header, sections, filters, settings and the sign-in frame. Full screens are in the blocks folder.

Shell `ui-shell ui-sidebar ui-topbar ui-page-header ui-section`

Today

5 sessions, 112 RSVPs

Open calendar

Section content: a list, chart or table.

Detail panel `ui-detail`

Interaction & Motion

Motion workshop

Tune two transitions live and compare.

WhenToday, 13:30

WhereStudio 2 and Zoom

Settings `ui-settings-group ui-danger`

Scheduling

Defaults for new sessions

Waitlist for full sessions

The next learner gets the seat

Danger zone

Affects every learner

Delete workspace

This cannot be undone.

Sign-in frame `ui-auth`

Welcome back to Commons

Halftone School · spring cohort

or with email

By continuing you agree to the Terms.

Surfaces, text and accent

Category hues data-cat="1..5"

Type

Radius and marks

Button ui-button

Field ui-field ui-input

More fields

Checkbox and radio ui-choice

Switch ui-switch

Segmented ui-segmented

Chip ui-chip aria-pressed

Nav ui-nav ui-nav-item

Tabs ui-tabs

Breadcrumb ui-breadcrumb

Pagination ui-pagination

Steps ui-steps ui-step aria-current="step"

Alert ui-alert data-status

Status and badge

Toast ui-toast

Progress and meter

Skeleton ui-skeleton

Empty state ui-empty

No sessions this week

Stat strip ui-stat-strip

Table ui-table-wrap ui-table

List ui-list ui-list-item

Data list ui-data-list

Timeline ui-timeline