diff --git a/.gitattributes b/.gitattributes index fa3c7bc..b1fac6d 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,3 +1,5 @@ *.png binary *.pdf binary *.woff2 binary +*.webp binary +*.woff binary diff --git a/README.md b/README.md index 28dc451..5f4472a 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ masters, colours, type, voice, every design token and the UI specs, published fr | `fonts/` | Gilroy Regular, Medium, Semibold and Bold (WOFF), plus Unbounded (WOFF2). Legacy faces retained for existing consumers. See `fonts/README.md`. | | `tokens/` | `tokens.css` (`@font-face` + light/dark colour variables as RGB triplets) and `tokens.json` (the same colours as hex, plus the seven brand colours) | | `docs/` | `ui-brand-spec.md` (token derivations, contrast ratios, states, status pills, type scale, logo use), `ux-spec.md` (**Space Works UX**: our interaction patterns, reusable layouts, navigation and screen specs), `ux-screens-longtail.md` (remaining screens) | +| `screenshots/ux/` | Screenshots of Space Works UX in Space Works Events (light, dark and phone), used by the site's UX pages | | `site/` | The Starlight website published to GitHub Pages; `scripts/sync-kit.mjs` copies the kit in at build time | | `references/yuyu/` | The reference boards from [Yuyu](https://github.com/twilighty-abhi/yuyu) that inspired Space Works UX | diff --git a/screenshots/README.md b/screenshots/README.md new file mode 100644 index 0000000..45562bd --- /dev/null +++ b/screenshots/README.md @@ -0,0 +1,7 @@ +# Screenshots + +`ux/` holds screenshots of Space Works UX in a real Space Works product, used by the design site's UX pages. + +- **Source:** SpaceWorks-Events at `origin/dev` `03186e0`, run locally with demo data (no real people or data). +- **Naming:** `--.webp`. Desktop is 1280×800, phone is 390×844, both at 1×. +- **Refresh:** re-capture whenever the patterns change, keeping the same names so the site picks them up. diff --git a/screenshots/ux/account-profile-desktop-dark.webp b/screenshots/ux/account-profile-desktop-dark.webp new file mode 100644 index 0000000..8a5de37 Binary files /dev/null and b/screenshots/ux/account-profile-desktop-dark.webp differ diff --git a/screenshots/ux/account-profile-desktop-light.webp b/screenshots/ux/account-profile-desktop-light.webp new file mode 100644 index 0000000..64395b4 Binary files /dev/null and b/screenshots/ux/account-profile-desktop-light.webp differ diff --git a/screenshots/ux/auth-reset-password-desktop-dark.webp b/screenshots/ux/auth-reset-password-desktop-dark.webp new file mode 100644 index 0000000..a8c14a2 Binary files /dev/null and b/screenshots/ux/auth-reset-password-desktop-dark.webp differ diff --git a/screenshots/ux/auth-reset-password-desktop-light.webp b/screenshots/ux/auth-reset-password-desktop-light.webp new file mode 100644 index 0000000..cfa0f54 Binary files /dev/null and b/screenshots/ux/auth-reset-password-desktop-light.webp differ diff --git a/screenshots/ux/auth-sign-in-desktop-dark.webp b/screenshots/ux/auth-sign-in-desktop-dark.webp new file mode 100644 index 0000000..2db7391 Binary files /dev/null and b/screenshots/ux/auth-sign-in-desktop-dark.webp differ diff --git a/screenshots/ux/auth-sign-in-desktop-light.webp b/screenshots/ux/auth-sign-in-desktop-light.webp new file mode 100644 index 0000000..c05d06e Binary files /dev/null and b/screenshots/ux/auth-sign-in-desktop-light.webp differ diff --git a/screenshots/ux/auth-sign-in-phone-light.webp b/screenshots/ux/auth-sign-in-phone-light.webp new file mode 100644 index 0000000..74fc6a6 Binary files /dev/null and b/screenshots/ux/auth-sign-in-phone-light.webp differ diff --git a/screenshots/ux/detail-overview-desktop-dark.webp b/screenshots/ux/detail-overview-desktop-dark.webp new file mode 100644 index 0000000..fdcc0ce Binary files /dev/null and b/screenshots/ux/detail-overview-desktop-dark.webp differ diff --git a/screenshots/ux/detail-overview-desktop-light.webp b/screenshots/ux/detail-overview-desktop-light.webp new file mode 100644 index 0000000..51c2983 Binary files /dev/null and b/screenshots/ux/detail-overview-desktop-light.webp differ diff --git a/screenshots/ux/detail-overview-phone-light.webp b/screenshots/ux/detail-overview-phone-light.webp new file mode 100644 index 0000000..86ac861 Binary files /dev/null and b/screenshots/ux/detail-overview-phone-light.webp differ diff --git a/screenshots/ux/flow-check-in-desktop-dark.webp b/screenshots/ux/flow-check-in-desktop-dark.webp new file mode 100644 index 0000000..b6d28b7 Binary files /dev/null and b/screenshots/ux/flow-check-in-desktop-dark.webp differ diff --git a/screenshots/ux/flow-check-in-desktop-light.webp b/screenshots/ux/flow-check-in-desktop-light.webp new file mode 100644 index 0000000..83aa76b Binary files /dev/null and b/screenshots/ux/flow-check-in-desktop-light.webp differ diff --git a/screenshots/ux/flow-check-in-phone-light.webp b/screenshots/ux/flow-check-in-phone-light.webp new file mode 100644 index 0000000..51942d8 Binary files /dev/null and b/screenshots/ux/flow-check-in-phone-light.webp differ diff --git a/screenshots/ux/form-new-organisation-desktop-dark.webp b/screenshots/ux/form-new-organisation-desktop-dark.webp new file mode 100644 index 0000000..c8fe7da Binary files /dev/null and b/screenshots/ux/form-new-organisation-desktop-dark.webp differ diff --git a/screenshots/ux/form-new-organisation-desktop-light.webp b/screenshots/ux/form-new-organisation-desktop-light.webp new file mode 100644 index 0000000..aaea5e5 Binary files /dev/null and b/screenshots/ux/form-new-organisation-desktop-light.webp differ diff --git a/screenshots/ux/list-guests-desktop-dark.webp b/screenshots/ux/list-guests-desktop-dark.webp new file mode 100644 index 0000000..70d0aae Binary files /dev/null and b/screenshots/ux/list-guests-desktop-dark.webp differ diff --git a/screenshots/ux/list-guests-desktop-light.webp b/screenshots/ux/list-guests-desktop-light.webp new file mode 100644 index 0000000..edb65ea Binary files /dev/null and b/screenshots/ux/list-guests-desktop-light.webp differ diff --git a/screenshots/ux/list-guests-phone-light.webp b/screenshots/ux/list-guests-phone-light.webp new file mode 100644 index 0000000..f33de82 Binary files /dev/null and b/screenshots/ux/list-guests-phone-light.webp differ diff --git a/screenshots/ux/list-member-ids-desktop-dark.webp b/screenshots/ux/list-member-ids-desktop-dark.webp new file mode 100644 index 0000000..1620913 Binary files /dev/null and b/screenshots/ux/list-member-ids-desktop-dark.webp differ diff --git a/screenshots/ux/list-member-ids-desktop-light.webp b/screenshots/ux/list-member-ids-desktop-light.webp new file mode 100644 index 0000000..fc7c2a4 Binary files /dev/null and b/screenshots/ux/list-member-ids-desktop-light.webp differ diff --git a/screenshots/ux/list-member-ids-phone-light.webp b/screenshots/ux/list-member-ids-phone-light.webp new file mode 100644 index 0000000..4ef3416 Binary files /dev/null and b/screenshots/ux/list-member-ids-phone-light.webp differ diff --git a/screenshots/ux/public-event-desktop-dark.webp b/screenshots/ux/public-event-desktop-dark.webp new file mode 100644 index 0000000..48d05e5 Binary files /dev/null and b/screenshots/ux/public-event-desktop-dark.webp differ diff --git a/screenshots/ux/public-event-desktop-light.webp b/screenshots/ux/public-event-desktop-light.webp new file mode 100644 index 0000000..30d2fad Binary files /dev/null and b/screenshots/ux/public-event-desktop-light.webp differ diff --git a/screenshots/ux/public-event-phone-light.webp b/screenshots/ux/public-event-phone-light.webp new file mode 100644 index 0000000..c38ed02 Binary files /dev/null and b/screenshots/ux/public-event-phone-light.webp differ diff --git a/screenshots/ux/public-organisation-desktop-dark.webp b/screenshots/ux/public-organisation-desktop-dark.webp new file mode 100644 index 0000000..fd449da Binary files /dev/null and b/screenshots/ux/public-organisation-desktop-dark.webp differ diff --git a/screenshots/ux/public-organisation-desktop-light.webp b/screenshots/ux/public-organisation-desktop-light.webp new file mode 100644 index 0000000..d32d6d9 Binary files /dev/null and b/screenshots/ux/public-organisation-desktop-light.webp differ diff --git a/screenshots/ux/public-organisation-phone-light.webp b/screenshots/ux/public-organisation-phone-light.webp new file mode 100644 index 0000000..8555602 Binary files /dev/null and b/screenshots/ux/public-organisation-phone-light.webp differ diff --git a/screenshots/ux/public-ticket-desktop-dark.webp b/screenshots/ux/public-ticket-desktop-dark.webp new file mode 100644 index 0000000..1aadce9 Binary files /dev/null and b/screenshots/ux/public-ticket-desktop-dark.webp differ diff --git a/screenshots/ux/public-ticket-desktop-light.webp b/screenshots/ux/public-ticket-desktop-light.webp new file mode 100644 index 0000000..4bee9a9 Binary files /dev/null and b/screenshots/ux/public-ticket-desktop-light.webp differ diff --git a/screenshots/ux/public-ticket-phone-light.webp b/screenshots/ux/public-ticket-phone-light.webp new file mode 100644 index 0000000..982fa2c Binary files /dev/null and b/screenshots/ux/public-ticket-phone-light.webp differ diff --git a/screenshots/ux/public-verify-card-desktop-dark.webp b/screenshots/ux/public-verify-card-desktop-dark.webp new file mode 100644 index 0000000..4f2b520 Binary files /dev/null and b/screenshots/ux/public-verify-card-desktop-dark.webp differ diff --git a/screenshots/ux/public-verify-card-desktop-light.webp b/screenshots/ux/public-verify-card-desktop-light.webp new file mode 100644 index 0000000..8a8d4ee Binary files /dev/null and b/screenshots/ux/public-verify-card-desktop-light.webp differ diff --git a/screenshots/ux/public-verify-card-phone-light.webp b/screenshots/ux/public-verify-card-phone-light.webp new file mode 100644 index 0000000..328d4ed Binary files /dev/null and b/screenshots/ux/public-verify-card-phone-light.webp differ diff --git a/screenshots/ux/public-verify-not-found-desktop-dark.webp b/screenshots/ux/public-verify-not-found-desktop-dark.webp new file mode 100644 index 0000000..449cd7d Binary files /dev/null and b/screenshots/ux/public-verify-not-found-desktop-dark.webp differ diff --git a/screenshots/ux/public-verify-not-found-desktop-light.webp b/screenshots/ux/public-verify-not-found-desktop-light.webp new file mode 100644 index 0000000..7b207a2 Binary files /dev/null and b/screenshots/ux/public-verify-not-found-desktop-light.webp differ diff --git a/screenshots/ux/public-verify-not-found-phone-light.webp b/screenshots/ux/public-verify-not-found-phone-light.webp new file mode 100644 index 0000000..bff7690 Binary files /dev/null and b/screenshots/ux/public-verify-not-found-phone-light.webp differ diff --git a/screenshots/ux/settings-organisation-desktop-dark.webp b/screenshots/ux/settings-organisation-desktop-dark.webp new file mode 100644 index 0000000..4813e7c Binary files /dev/null and b/screenshots/ux/settings-organisation-desktop-dark.webp differ diff --git a/screenshots/ux/settings-organisation-desktop-light.webp b/screenshots/ux/settings-organisation-desktop-light.webp new file mode 100644 index 0000000..d31ff43 Binary files /dev/null and b/screenshots/ux/settings-organisation-desktop-light.webp differ diff --git a/screenshots/ux/settings-organisation-phone-light.webp b/screenshots/ux/settings-organisation-phone-light.webp new file mode 100644 index 0000000..dca01b7 Binary files /dev/null and b/screenshots/ux/settings-organisation-phone-light.webp differ diff --git a/screenshots/ux/table-team-desktop-dark.webp b/screenshots/ux/table-team-desktop-dark.webp new file mode 100644 index 0000000..3d5bc23 Binary files /dev/null and b/screenshots/ux/table-team-desktop-dark.webp differ diff --git a/screenshots/ux/table-team-desktop-light.webp b/screenshots/ux/table-team-desktop-light.webp new file mode 100644 index 0000000..37d2017 Binary files /dev/null and b/screenshots/ux/table-team-desktop-light.webp differ diff --git a/screenshots/ux/workspace-dashboard-desktop-dark.webp b/screenshots/ux/workspace-dashboard-desktop-dark.webp new file mode 100644 index 0000000..1901f8a Binary files /dev/null and b/screenshots/ux/workspace-dashboard-desktop-dark.webp differ diff --git a/screenshots/ux/workspace-dashboard-desktop-light.webp b/screenshots/ux/workspace-dashboard-desktop-light.webp new file mode 100644 index 0000000..6c54a89 Binary files /dev/null and b/screenshots/ux/workspace-dashboard-desktop-light.webp differ diff --git a/screenshots/ux/workspace-dashboard-phone-light.webp b/screenshots/ux/workspace-dashboard-phone-light.webp new file mode 100644 index 0000000..10fbe51 Binary files /dev/null and b/screenshots/ux/workspace-dashboard-phone-light.webp differ diff --git a/screenshots/ux/workspace-empty-state-desktop-dark.webp b/screenshots/ux/workspace-empty-state-desktop-dark.webp new file mode 100644 index 0000000..303ed87 Binary files /dev/null and b/screenshots/ux/workspace-empty-state-desktop-dark.webp differ diff --git a/screenshots/ux/workspace-empty-state-desktop-light.webp b/screenshots/ux/workspace-empty-state-desktop-light.webp new file mode 100644 index 0000000..a2c3147 Binary files /dev/null and b/screenshots/ux/workspace-empty-state-desktop-light.webp differ diff --git a/screenshots/ux/workspace-organisations-desktop-dark.webp b/screenshots/ux/workspace-organisations-desktop-dark.webp new file mode 100644 index 0000000..ae09aa9 Binary files /dev/null and b/screenshots/ux/workspace-organisations-desktop-dark.webp differ diff --git a/screenshots/ux/workspace-organisations-desktop-light.webp b/screenshots/ux/workspace-organisations-desktop-light.webp new file mode 100644 index 0000000..fb6f7dd Binary files /dev/null and b/screenshots/ux/workspace-organisations-desktop-light.webp differ diff --git a/site/astro.config.mjs b/site/astro.config.mjs index 4e81969..8880849 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -61,7 +61,7 @@ export default defineConfig({ ], }, { label: 'Tokens', items: ['tokens/using-the-kit', 'tokens/reference'] }, - { label: 'UX', items: ['ux/introduction'] }, + { label: 'UX', items: ['ux/introduction', 'ux/patterns', 'ux/gallery', 'ux/inspiration'] }, { label: 'Specs', items: [{ autogenerate: { directory: 'specs' } }] }, { label: 'About', items: ['about/credits'] }, ], diff --git a/site/scripts/sync-kit.mjs b/site/scripts/sync-kit.mjs index 706394d..6edfd5e 100644 --- a/site/scripts/sync-kit.mjs +++ b/site/scripts/sync-kit.mjs @@ -2,6 +2,7 @@ // so the site always shows the real masters and never a hand-maintained copy of them. // // logo/ icons/ fonts/ tokens/ brand/ -> public/kit/... (served for preview and download) +// screenshots/ references/yuyu/ -> public/kit/... (UX screenshots and reference boards) // logo/*.svg -> src/assets/kit/ (header logo and hero art) // docs/*.md -> src/content/docs/specs/ (rendered spec pages) // @@ -21,11 +22,17 @@ for (const dir of [kit, assets, specs]) { mkdirSync(dir, { recursive: true }); } -for (const folder of ['logo', 'icons', 'fonts', 'tokens']) { +for (const folder of ['logo', 'icons', 'fonts', 'tokens', 'screenshots']) { cpSync(join(root, folder), join(kit, folder), { recursive: true }); } cpSync(join(root, 'brand', 'space-works-brand-guidelines-v1.pdf'), join(kit, 'brand', 'space-works-brand-guidelines-v1.pdf')); cpSync(join(root, 'brand', 'guidelines', 'png'), join(kit, 'brand', 'guidelines'), { recursive: true }); +// Reference boards get URL-safe names ("Sign in, invites & account.png" -> "sign-in-invites-account.png"). +mkdirSync(join(kit, 'references', 'yuyu'), { recursive: true }); +for (const file of readdirSync(join(root, 'references', 'yuyu')).filter((f) => f.endsWith('.png'))) { + const slug = file.replace(/\.png$/, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); + cpSync(join(root, 'references', 'yuyu', file), join(kit, 'references', 'yuyu', `${slug}.png`)); +} for (const file of readdirSync(join(root, 'logo')).filter((f) => f.endsWith('.svg'))) { cpSync(join(root, 'logo', file), join(assets, file)); @@ -56,4 +63,4 @@ for (const { file, slug, order, label } of specPages) { writeFileSync(join(specs, `${slug}.md`), frontmatter + source.slice(match[0].length)); } -console.log('sync-kit: copied logo, icons, fonts, tokens, brand pages and 3 specs'); +console.log('sync-kit: copied logo, icons, fonts, tokens, screenshots, brand pages, reference boards and 3 specs'); diff --git a/site/src/components/ReferenceBoards.astro b/site/src/components/ReferenceBoards.astro new file mode 100644 index 0000000..6daf063 --- /dev/null +++ b/site/src/components/ReferenceBoards.astro @@ -0,0 +1,19 @@ +--- +// The four reference boards from Yuyu that inspired Space Works UX. Files live in references/yuyu/. +import { kitUrl } from './kit-url'; + +const boards = ['Organiser workspace', 'Managing an event', 'Sign in, invites & account', 'Attending an event']; +const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); +const src = (name: string) => kitUrl(`references/yuyu/${slug(name)}.png`); +--- + +
+ { + boards.map((name) => ( + + {`Yuyu + {name} · Yuyu + + )) + } +
diff --git a/site/src/components/UxShot.astro b/site/src/components/UxShot.astro new file mode 100644 index 0000000..94437c7 --- /dev/null +++ b/site/src/components/UxShot.astro @@ -0,0 +1,36 @@ +--- +// One Space Works UX screen: desktop light and dark side by side, plus the phone view when captured. +// Each image opens at full size. Files live in screenshots/ux/ at the repository root. +import { kitUrl } from './kit-url'; + +interface Props { + name: string; + alt: string; + phone?: boolean; + caption?: string; +} +const { name, alt, phone = false, caption } = Astro.props; +const src = (size: string, mode: string) => kitUrl(`screenshots/ux/${name}-${size}-${mode}.webp`); +--- + +
+
+ + {`${alt}, + Light · desktop + + + {`${alt}, + Dark · desktop + + { + phone && ( + + {`${alt}, + Phone + + ) + } +
+ {caption &&
{caption}
} +
diff --git a/site/src/content/docs/about/credits.md b/site/src/content/docs/about/credits.md index 810f10e..d4d5d47 100644 --- a/site/src/content/docs/about/credits.md +++ b/site/src/content/docs/about/credits.md @@ -14,8 +14,11 @@ paint styles and the ten text styles. [Space Works UX](/ux/introduction/) is our own interaction system: the patterns, layouts and interaction details in the specs. It was inspired by [Yuyu](https://github.com/twilighty-abhi/yuyu), whose screens we studied as reference boards. The reference boards are kept in -[`references/yuyu/`](https://github.com/SpaceWorks-HQ/SpaceWorks-Design/tree/main/references/yuyu) and are not -republished on this site. +[`references/yuyu/`](https://github.com/SpaceWorks-HQ/SpaceWorks-Design/tree/main/references/yuyu) and are shown, +with attribution, on [Inspired by Yuyu](/ux/inspiration/). They remain Yuyu's work and are not relicensed. + +The screenshots on the UX pages are of Space Works Events, run with demo data. They are in +[`screenshots/ux/`](https://github.com/SpaceWorks-HQ/SpaceWorks-Design/tree/main/screenshots/ux). ## Fonts diff --git a/site/src/content/docs/ux/gallery.mdx b/site/src/content/docs/ux/gallery.mdx new file mode 100644 index 0000000..46430d4 --- /dev/null +++ b/site/src/content/docs/ux/gallery.mdx @@ -0,0 +1,52 @@ +--- +title: Screen gallery +description: Every captured Space Works UX screen, grouped by the layout it uses, in light, dark and phone views. +--- + +import UxShot from '../../../components/UxShot.astro'; + +Every screen is the app shell plus exactly one layout from the [closed set](/specs/ux-patterns/). The screens +below come from **Space Works Events** with demo data. The files are in +[`screenshots/ux/`](https://github.com/SpaceWorks-HQ/SpaceWorks-Design/tree/main/screenshots/ux). + +## L1 + L2 · App shell and dashboard + + + + + +## L3 · List + + + + + +## L4 · Detail + + + +## L5 · Settings + + + + +## L6 · Form page + + + +## L7 · Flow + + + +## L8 · Auth and centred card + + + + +## L9 · Public and public detail + + + + + + diff --git a/site/src/content/docs/ux/inspiration.mdx b/site/src/content/docs/ux/inspiration.mdx new file mode 100644 index 0000000..fa00fe1 --- /dev/null +++ b/site/src/content/docs/ux/inspiration.mdx @@ -0,0 +1,32 @@ +--- +title: Inspired by Yuyu +description: The reference boards from Yuyu that Space Works UX grew from, and what we changed. +--- + +import ReferenceBoards from '../../../components/ReferenceBoards.astro'; + +Space Works UX is our own, and it started from [Yuyu](https://github.com/twilighty-abhi/yuyu), an event +platform by Abhiram N J. We studied 28 of its screens on four boards (R1–R28 in the +[spec](/specs/ux-patterns/)) for layout, navigation and interaction, then adapted them for Space Works. + +## What we kept + +- A calm workspace: one shell, text-only navigation and one filled primary action per region. +- Stat cards, contextual callouts and lists that put the next step inline. +- Undo in place for reversible actions, and a danger zone for the rest. +- A split-screen sign-in, centred task cards and public pages with a sticky action card. + +## What we changed + +- **Visual identity.** Every colour, typeface, logo and icon comes from the + [Space Works brand guidelines](/brand/guidelines/), not from the boards. Yuyu's near-black pill buttons became + Maker Teal, and its warm-grey sidebar became a Citron field. +- **Scale.** Dense tables, guided multi-step flows, payments with receipts, kiosks and many roles. See + "Where the reference boards don't scale" in the [spec](/specs/ux-patterns/). + +## The reference boards + +These boards are Yuyu's work, shown here for attribution and study. They are not part of the Space Works design +kit and are not relicensed. + + diff --git a/site/src/content/docs/ux/introduction.mdx b/site/src/content/docs/ux/introduction.mdx index f455f27..bd0941f 100644 --- a/site/src/content/docs/ux/introduction.mdx +++ b/site/src/content/docs/ux/introduction.mdx @@ -4,10 +4,13 @@ description: Our interaction system. The patterns, layouts and quality bar every --- import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; +import UxShot from '../../../components/UxShot.astro'; **Space Works UX** sets how every Space Works screen works: where things go, how you move between them, and what happens when you act. The brand decides how a screen looks. Space Works UX decides how it behaves. + + ## The rules to remember @@ -47,6 +50,8 @@ what happens when you act. The brand decides how a screen looks. Space Works UX - **A quality bar** that every screen has to pass before it ships. + + @@ -57,4 +62,5 @@ what happens when you act. The brand decides how a screen looks. Space Works UX Space Works UX is our own. It was inspired by [Yuyu](https://github.com/twilighty-abhi/yuyu), whose screens we studied as reference boards (R1–R28 in the spec) and then adapted for Space Works: bigger tables, guided flows, payments, kiosks and many roles. The visual identity comes only from the -[Space Works brand guidelines](/brand/guidelines/). See [Credits and licences](/about/credits/). +[Space Works brand guidelines](/brand/guidelines/). See [Inspired by Yuyu](/ux/inspiration/) and +[Credits and licences](/about/credits/). diff --git a/site/src/content/docs/ux/patterns.mdx b/site/src/content/docs/ux/patterns.mdx new file mode 100644 index 0000000..bf1defe --- /dev/null +++ b/site/src/content/docs/ux/patterns.mdx @@ -0,0 +1,99 @@ +--- +title: Patterns in practice +description: The core Space Works UX patterns, each shown in a real Space Works screen in light, dark and phone views. +--- + +import UxShot from '../../../components/UxShot.astro'; + +These are real screens from **Space Works Events**, built on Space Works UX and run with demo data. Each pattern +links back to its number in the [Space Works UX spec](/specs/ux-patterns/). Select any image to open it at full +size. + +## App shell and sidebar (P1) + +A Citron sidebar with the workspace switcher on top, a text-only nav with one filled active item, then "View +public page ↗" and the account chip at the bottom. On a phone it folds into a top bar and sheet. + + + +## Page header, callout and stats (P2, P4, P5) + +One identity block per page: name, meta and at most one filled primary action. A contextual callout carries the +next step, and stat cards show real numbers. + + + +## Lists with filter chips and bulk actions (P6, P8, P10) + +Filter chips carry their counts. Selecting rows turns on the bulk bar. Every status is a word in a pill, never +colour alone. + + + + + +## Tables inside a card (P14) + +Dense data keeps the card chrome: a bordered card, sentence-case column labels and a hairline between rows. + + + +## Settings rows, live preview and sticky save (P15, P16) + +Settings are labelled rows with helper text beside each field. Changes collect in a sticky Discard / Save bar, +and the danger zone sits at the very end. + + + +## Create with a live preview (P18) + +Create forms stay short, mark optional fields inline, and check the web address as you type. + + + +## Empty states and first-run (P17) + +An empty workspace never just says "nothing here". It names the next step, and the first-run checklist shows only +one call to action at a time. + + + +## Work in a focused flow (P21, P30) + +High-frequency work gets its own focused surface: the scanner, search, live progress and an offline callout. +Reversible actions offer Undo in place instead of asking "Are you sure?". + + + +## Auth split screen and centred task card (P22, P23) + +Sign-in is a split screen: the form on one side, one bold brand moment on the other. Single tasks, like resetting +a password, get one centred card. + + + + + +## Account (P24) + +One header card with the person and their verification chips, then tabs, each a column of cards. + + + +## Public pages (P25) + +Public pages use the organisation's identity and a sticky card with the one action that matters. + + + + + +## Mobile ticket and card checks (P27) + +Things people show at a door are built for a phone first: large type, high contrast and a clear state. + + + + + + diff --git a/site/src/styles/kit.css b/site/src/styles/kit.css index 3d06199..f559b85 100644 --- a/site/src/styles/kit.css +++ b/site/src/styles/kit.css @@ -162,3 +162,31 @@ /* Voice */ .sw-say { font-weight: 600; color: var(--sl-color-white); } + +/* UX screenshots */ +.sw-shot { margin-block: 1.25rem 2rem; } +.sw-shot-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + align-items: start; +} +.sw-shot-row.has-phone { grid-template-columns: 1fr 1fr minmax(0, 0.32fr); } +.sw-shot a { display: grid; gap: 0.35rem; text-decoration: none; color: var(--sl-color-gray-3); font-size: 0.8125rem; } +.sw-shot img { + width: 100%; + height: auto; + border-radius: 10px; + border: 1px solid var(--sl-color-hairline); +} +.sw-shot a:hover img { border-color: var(--sl-color-text-accent); } +.sw-shot a:hover { color: var(--sl-color-text-accent); } +.sw-shot figcaption { margin-top: 0.5rem; color: var(--sl-color-gray-2); font-size: 0.9375rem; } +@media (max-width: 50rem) { + .sw-shot-row, .sw-shot-row.has-phone { grid-template-columns: 1fr; } + .sw-shot-row .sw-shot-dark { display: none; } + .sw-shot-row .sw-shot-phone { max-width: 14rem; } +} +.sw-boards { display: grid; gap: 1.5rem; margin-block: 1.5rem; } +.sw-boards a { display: grid; gap: 0.5rem; text-decoration: none; color: var(--sl-color-gray-3); font-size: 0.875rem; } +.sw-boards img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--sl-color-hairline); }