> 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/phases/phase_13/session_02_design_tokens_and_layout_shell.md). # Session 02: Design Tokens And Layout Shell **Session ID**: `phase13-session02-design-tokens-and-layout-shell` **Package**: public-website **Status**: Not Started **Estimated Tasks**: \~18-24 **Estimated Duration**: 2-4 hours *** ## Objective Implement the Cyber-Tactical visual foundation and reusable page shell that all public website routes will share. *** ## Scope ### In Scope (MVP) * Add `src/styles/global.css` with reset, tokens, typography, layout primitives, accessibility states, and shared motion rules. * Define the Space Black, Navy Obsidian, transparent Obsidian, Cyber Cyan, Hyper Purple, Matrix Green, Crimson Laser, Ice White, and Tactical Slate color tokens. * Establish display, body, and code font stacks: `Orbitron`/`Rajdhani`, `Outfit`, and `JetBrains Mono`. * Implement a privacy-conscious font loading plan and document any temporary third-party font request if self-hosting is deferred. * Create `BaseLayout.astro`, `ContentLayout.astro`, and `LegalLayout.astro`. * Create `Shell.astro` and `Section.astro` if the implementation keeps page chrome and section layout separate from layouts. * Create shared header, mobile navigation, footer, and skip link components. * Create foundational system components: `ButtonLink`, `Panel`, `MetricStrip`, `Badge`, and icon handling. * Add section primitives that use full-width bands or unframed layouts with constrained inner content. * Implement focus rings, skip-link behavior, reduced-motion guardrails, and accessible external link affordances. * Add CSS-only tactical grids, scanlines, glows, and status indicators in a way that can be disabled for reduced-motion users. ### Out of Scope * Final homepage, product page, and feature page content. * Complex JavaScript interactions. * Tailwind adoption. * A one-note palette dominated only by blue, purple, beige, dark slate, or brown/orange. * Decorative cards used as page sections. *** ## Prerequisites * [ ] Session 01 completed and Astro workspace builds. * [ ] Starter CSS and layouts reviewed before replacement. *** ## Deliverables 1. `src/styles/global.css` with visual tokens, reset, typography, layout helpers, motion defaults, and accessibility states. 2. Shared layouts under `src/layouts/`. 3. Header, mobile navigation, footer, skip link, and route-aware navigation components under `src/components/`. 4. Reusable primitive components for buttons, panels, metrics, badges, and icons. 5. Starter pages converted to the shared shell without layout clipping. *** ## Visual Requirements The site must feel like a premium developer command surface: * Dark cockpit background. * Precise panels and borders. * Tactical grid and scanline motifs. * Neon cyan, purple, green, and critical red accents. * Product-like states instead of generic decorative cards. * Hero and product previews that resemble operational UI rather than a stock illustration. Motion requirements: * Primary buttons use a cyber-sweep glow transition and character-shift feel with smooth timing such as `transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)`. * Grid lines may use a soft scanline wipe on load. * Status indicators may use a breathing neon pulse. * Cards and containers may use a lightweight fade-in only if it does not hurt performance or reduced-motion behavior. * Continuous scanner animations stop under `prefers-reduced-motion: reduce`. Accessibility requirements: * Focus ring should be thick, visible, and Cyber Cyan: `outline: 3px solid var(--color-accent); outline-offset: 4px;`. * Body text contrast must meet at least `4.5:1`. * Text must wrap cleanly and never overlap at mobile widths. * Every icon-only control needs a clear accessible name. *** ## Task Expansion Guidance When expanded with `plansession`, keep the checklist to 18-24 tasks covering: * Starter CSS audit. * Token definition. * Font loading plan. * Layout components. * Navigation components. * Footer content structure. * System primitives. * Motion rules. * Reduced-motion rules. * Focus states. * Responsive primitives. * Basic route shell adoption. * Browser smoke at mobile and desktop widths. *** ## Success Criteria * [ ] All existing starter routes render through the new shared shell. * [ ] Header, mobile navigation, footer, and skip link are keyboard reachable. * [ ] CSS tokens match the required Cyber-Tactical palette and font stacks. * [ ] Reduced-motion disables continuous motion without removing static state clarity. * [ ] No page section is implemented as a decorative floating card. * [ ] Text does not overlap at common mobile widths. --- # 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/phases/phase_13/session_02_design_tokens_and_layout_shell.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.