> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase13-session02-design-tokens-and-layout-shell/tasks.md). # Task Checklist **Session ID**: `phase13-session02-design-tokens-and-layout-shell` **Total Tasks**: 24 **Estimated Duration**: 3-4 hours **Created**: 2026-06-01 *** ## Legend * `[x]` = Completed * `[ ]` = Pending * `[P]` = Parallelizable (can run with other \[P] tasks) * `[SNNMM]` = Session reference (NN=phase number, MM=session number) * `TNNN` = Task ID *** ## Progress Summary | Category | Total | Done | Remaining | | -------------- | ------ | ------ | --------- | | Setup | 4 | 4 | 0 | | Foundation | 6 | 6 | 0 | | Implementation | 10 | 10 | 0 | | Testing | 4 | 4 | 0 | | **Total** | **24** | **24** | **0** | *** ## Setup (4 tasks) Initial configuration and environment preparation. * [x] T001 \[S1302] Verify Session 01 validation, Node.js 26.2.0 path, npm 11.16.0 path, and current `public-website` file inventory (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) * [x] T002 \[S1302] Audit starter inline route styles and record replacement targets before changing the home route (`public-website/src/pages/index.astro`) * [x] T003 \[S1302] Review PRD, README, build plan, and website UX sources for Cyber-Tactical token requirements and note that the mockup asset is absent (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) * [x] T004 \[S1302] Prepare layout, navigation, system component, data, and style directories and record the created structure (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) *** ## Foundation (6 tasks) Core structures and base implementations. * [x] T005 \[S1302] \[P] Create global reset, required color tokens, typography stacks, focus rings, layout helpers, reduced-motion rules, and local-first font loading defaults (`public-website/src/styles/global.css`) * [x] T006 \[S1302] \[P] Define shared navigation link groups and external demo/docs destination metadata with explicit affordances (`public-website/src/data/navigation.ts`) * [x] T007 \[S1302] \[P] Create BaseLayout with document shell, global stylesheet import, main landmark slot, and Session 03 metadata integration placeholders (`public-website/src/layouts/BaseLayout.astro`) * [x] T008 \[S1302] \[P] Create ContentLayout for standard content pages with bounded widths, responsive wrapping, and no nested page-section cards (`public-website/src/layouts/ContentLayout.astro`) * [x] T009 \[S1302] \[P] Create LegalLayout for policy pages with review-state affordances and no hosted-form assumptions (`public-website/src/layouts/LegalLayout.astro`) * [x] T010 \[S1302] \[P] Create Section primitive with full-width band and unframed variants, stable responsive constraints, and overflow-safe text wrapping (`public-website/src/components/layout/Section.astro`) *** ## Implementation (10 tasks) Main feature implementation. * [x] T011 \[S1302] \[P] Create SkipLink component with visible focus treatment and a stable target contract (`public-website/src/components/navigation/SkipLink.astro`) * [x] T012 \[S1302] Create Header component with route-aware navigation, accessible external links, and keyboard-reachable mobile control (`public-website/src/components/navigation/Header.astro`) * [x] T013 \[S1302] Create MobileNavigation component with state reset on close/re-entry, focus behavior, and duplicate-toggle prevention while transitioning (`public-website/src/components/navigation/MobileNavigation.astro`) * [x] T014 \[S1302] \[P] Create Footer component with product, resource, trust, and legal link groups plus no-overclaim boundary copy (`public-website/src/components/navigation/Footer.astro`) * [x] T015 \[S1302] Create Shell component composing skip link, header, main, footer, and reduced-motion-safe decorative layers (`public-website/src/components/layout/Shell.astro`) * [x] T016 \[S1302] \[P] Create ButtonLink primitive with variants, external link affordances, accessible labels, and hover/focus cyber-sweep states (`public-website/src/components/system/ButtonLink.astro`) * [x] T017 \[S1302] \[P] Create Badge primitive with semantic status variants and labels that do not rely on color alone (`public-website/src/components/system/Badge.astro`) * [x] T018 \[S1302] \[P] Create Panel primitive for repeated framed items only, with constrained dimensions and no page-section card styling (`public-website/src/components/system/Panel.astro`) * [x] T019 \[S1302] \[P] Create MetricStrip primitive with text labels, deterministic ordering, and responsive wrapping for long values (`public-website/src/components/system/MetricStrip.astro`) * [x] T020 \[S1302] Convert starter home route to BaseLayout/Shell and new primitives while removing inline CSS and preserving no analytics, forms, auth, server, or hosted-validation claims (`public-website/src/pages/index.astro`) *** ## Testing (4 tasks) Verification and quality assurance. * [x] T021 \[S1302] Run website typecheck and build under Node.js 26.2.0 or record exact environment blockers (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) * [x] T022 \[S1302] Run focused Biome format/lint checks for touched website files and record results (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) * [x] T023 \[S1302] Browser-smoke desktop and mobile widths for no text overlap, skip link behavior, keyboard navigation, mobile navigation close/reopen state, and explicit external links (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) * [x] T024 \[S1302] Validate ASCII encoding, Unix LF line endings, reduced-motion behavior, and excluded dependency posture for all new and modified files (`.spec_system/specs/phase13-session02-design-tokens-and-layout-shell/implementation-notes.md`) *** ## Completion Checklist Before marking session complete: * [x] All tasks marked `[x]` * [x] All tests passing or exact environment blockers recorded * [x] All files ASCII-encoded * [x] implementation-notes.md updated * [x] Ready for the validate workflow step *** ## Next Steps Run the validate workflow step to verify session completeness. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase13-session02-design-tokens-and-layout-shell/tasks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.