Feat: Documentations

Documentation/CONTRIBUTING

@@ -0,0 +1,161 @@
+# Contributing
+
+Thanks for contributing to Moku Work.
+
+This project is still in an early scaffold stage, so the goal is to keep changes easy to understand, easy to review, and easy to undo.
+
+## Getting Started
+
+### Project structure
+
+- `Frontend/` — SolidStart frontend workspace
+- `Backend/` — backend placeholder
+- `Proxy/` — proxy placeholder
+- `Docker/` — local Docker Compose files
+- `Env/` — local environment files
+- `Commands/` — Just command modules and entrypoints
+
+### Prerequisites
+
+Before working on the project, make sure you have:
+
+- `just`
+- Docker with `docker compose`
+- Docker Buildx
+- Node.js `>=22`
+- `pnpm@9`
+
+### Local development
+
+List available commands:
+
+```bash
+just --list --list-submodules
+```
+
+Main local development flow:
+
+```bash
+just local dev
+```
+
+This command builds the frontend development image and starts the local development stack.
+
+### Local environment
+
+Local development uses:
+
+```bash
+Env/.env.local
+```
+
+If local environment values are missing, create or update that file before starting the stack.
+
+## Commit Naming Convention
+
+Use short, clear commit messages that describe one logical change.
+
+Preferred format:
+
+```text
+Type: Short description
+```
+
+Examples:
+
+```text
+Feat: Add login page scaffold
+Fix: Resolve mobile sidebar overflow
+Refactor: Split theme helpers from app entry
+Docs: Add local development notes
+Chore: Update frontend dependencies
+```
+
+Recommended commit types:
+
+- `Feat:` — new feature or visible behavior
+- `Fix:` — bug fix
+- `Refactor:` — internal code change without behavior change
+- `Docs:` — documentation only
+- `Chore:` — maintenance, tooling, dependency, or housekeeping work
+- `Style:` — formatting or styling-only cleanup
+- `Test:` — tests added or updated
+
+### Commit message rules
+
+- Keep the subject line short and specific
+- Start with a capitalized type
+- Describe what changed, not the entire session
+- One commit should usually be explainable in one sentence
+
+Good:
+
+```text
+Feat: Add base dashboard layout
+Fix: Correct broken theme toggle import
+Docs: Document branch naming workflow
+```
+
+Bad:
+
+```text
+stuff
+more updates
+big rewrite
+misc fixes
+```
+
+## Branch Naming Convention
+
+Use branch names that make the purpose of the work obvious at a glance.
+
+Preferred format:
+
+```text
+type/short-description
+```
+
+Examples:
+
+```text
+feature/login-page
+fix/mobile-sidebar-overflow
+refactor/theme-helpers
+docs/contributing-update
+chore/frontend-dependency-updates
+rewrite/v2-foundation
+```
+
+Recommended branch types:
+
+- `feature/` — new feature work
+- `fix/` — bug fixes
+- `refactor/` — structural code changes without intended behavior changes
+- `docs/` — documentation work
+- `chore/` — maintenance or tooling updates
+- `rewrite/` — large rebuilds or architecture overhauls
+
+### Branch naming rules
+
+- Use lowercase words
+- Separate words with hyphens
+- Keep the name short but specific
+- Name the branch after the outcome, not the time spent on it
+- For larger efforts, prefer one clear branch name over vague labels like `misc` or `updates`
+
+Good:
+
+```text
+feature/auth-shell
+fix/docker-local-env-loading
+rewrite/new-routing-foundation
+```
+
+Bad:
+
+```text
+new-stuff
+work-branch
+test
+misc-updates
+```

Documentation/TODO.md

@@ -0,0 +1,70 @@
+# ToDo
+
+## Version 1.0.0 Roadmap
+
+### Version 0.1.0
+
+**Goal:** Barebone frontend with a real backend core.
+
+#### Architecture
+
+- [ ] Project-Structure
+- [ ] Stack-Decisions
+- [ ] Proxy
+- [ ] Dev-and-Prod-Builds
+
+#### Backend
+
+- [ ] Auth
+  - [ ] Session-Flow
+  - [ ] Login-Logout-Foundation
+  - [ ] Authentication
+- [ ] User
+  - [ ] Base-Model
+  - [ ] Base-Workspace
+    - [ ] Folders-and-Subfolders
+    - [ ] Boards
+    - [ ] Dashboard
+- [ ] Organization
+  - [ ] Base-Model
+  - [ ] Access-Rules-and-Membership
+- [ ] Workspace
+  - [ ] Folders-and-Subfolders
+- [ ] API
+
+#### Frontend
+
+- [x] Foundation
+- [x] Typography
+- [x] Icons
+- [ ] Primitives
+  - [ ] Button
+  - [ ] IconButton
+  - [ ] Input
+  - [ ] Surface
+- [ ] App-Shell
+- [ ] Nav-Bar
+- [ ] Workspace-Switching
+- [ ] Workspace-Home
+
+### Version 0.2.0
+
+**Goal:** First real work surface.
+
+- [ ] Table
+- [ ] CVA
+- [ ] Storyboard
+
+### Version 0.3.0
+
+**Goal:** Documents and system hardening.
+
+- [ ] Document
+- [ ] Accessibility-Rules
+- [ ] Motion-Foundation
+
+### Version 0.4.0
+
+- [ ] Gantt-Board
+- [ ] Calendar
+- [ ] Timeline

Frontend/package.json

@@ -15,6 +15,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"lucide-solid": "^0.542.0",
 		"@solidjs/start": "2.0.0-alpha.2",
 		"@solidjs/vite-plugin-nitro-2": "^0.1.0",
 		"postcss": "^8.5.15",

Frontend/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@solidjs/vite-plugin-nitro-2':
         specifier: ^0.1.0
         version: 0.1.0(vite@7.3.1(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))
+      lucide-solid:
+        specifier: ^0.542.0
+        version: 0.542.0(solid-js@1.9.11)
       postcss:
         specifier: ^8.5.15
         version: 8.5.15
@@ -2151,6 +2154,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-solid@0.542.0:
+    resolution: {integrity: sha512-cMy0fZu9TEEm1IIP3BIXBJd07xJGeAYNebIE1Zti+7cnv1hJcHoNZx4+D2tHZIYKILoSB/Rhs5M0vdKzQTU33g==}
+    peerDependencies:
+      solid-js: ^1.4.7
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -5522,6 +5530,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-solid@0.542.0(solid-js@1.9.11):
+    dependencies:
+      solid-js: 1.9.11
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

Frontend/src/lib/icons/index.ts

@@ -0,0 +1,3 @@
+// Path: Frontend/src/lib/icons/index.ts
+
+export { Bell, Check, ChevronDown, ChevronLeft, ChevronRight, Folder, FolderOpen, Home, LayoutGrid, MoreHorizontal, Plus, Search, Settings, User, X } from "lucide-solid";

Frontend/src/styles/base/_fonts.scss

@@ -1,6 +1,11 @@
 /* Path: Frontend/src/styles/base/_fonts.scss */
 
 :root {
-  --font-family-sans: "Inter", "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-family-mono: "Geist Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", monospace;
+  --font-family-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-family-heading: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-family-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-family-mono:
+    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

Frontend/src/styles/base/_globals.scss

@@ -6,6 +6,7 @@ html {
   background: var(--color-canvas);
   color: var(--color-text);
   font-family: var(--font-family-sans);
+  font-synthesis: none;
   scroll-behavior: smooth;
   transition:
     background-color var(--motion-duration-base) var(--motion-ease-standard),
@@ -15,6 +16,8 @@ html {
 body {
   background: var(--color-canvas);
   color: var(--color-text);
+  font-family: var(--font-family-sans);
+  @include text-body;
 }
 
 a,
@@ -50,30 +53,48 @@ a {
 }
 
 h1 {
+  font-family: var(--font-family-display);
+  text-wrap: balance;
   @include text-display;
 }
 
 h2 {
+  font-family: var(--font-family-heading);
+  text-wrap: balance;
   @include text-heading;
 }
 
 h3 {
+  font-family: var(--font-family-heading);
+  text-wrap: balance;
   @include text-title;
 }
 
 h4,
 h5,
 h6 {
+  font-family: var(--font-family-heading);
+  text-wrap: balance;
   @include text-label;
 }
 
 p,
-span,
+li,
+blockquote,
+figcaption {
+  text-wrap: pretty;
+  @include text-body;
+}
+
+label,
+legend {
+  @include text-label;
+}
+
 button,
 input,
 textarea,
-label,
-li {
+select {
   @include text-body;
 }
 
@@ -82,6 +103,7 @@ pre,
 kbd,
 samp {
   font-family: var(--font-family-mono);
+  font-size: 0.95em;
 }
 
 #app {

Frontend/src/styles/themes/_tokens.scss

@@ -51,4 +51,35 @@
   --motion-duration-base: 220ms;
   --motion-duration-slow: 320ms;
   --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  // Typography
+  // ============================
+
+  --font-size-caption: 0.75rem;
+  --font-size-label: 0.875rem;
+  --font-size-body: 1rem;
+  --font-size-title: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
+  --font-size-heading: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
+  --font-size-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
+
+  --line-height-caption: 1.4;
+  --line-height-label: 1.35;
+  --line-height-body: 1.55;
+  --line-height-title: 1.3;
+  --line-height-heading: 1.15;
+  --line-height-display: 1.05;
+
+  --font-weight-caption: 500;
+  --font-weight-label: 600;
+  --font-weight-body: 400;
+  --font-weight-title: 600;
+  --font-weight-heading: 600;
+  --font-weight-display: 700;
+
+  --letter-spacing-caption: 0.01em;
+  --letter-spacing-label: 0.005em;
+  --letter-spacing-body: 0;
+  --letter-spacing-title: -0.01em;
+  --letter-spacing-heading: -0.02em;
+  --letter-spacing-display: -0.03em;
 }

Frontend/src/styles/tools/_mixins.scss

@@ -19,37 +19,43 @@
 }
 
 @mixin text-caption {
-  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
-  font-weight: 500;
-  line-height: 1.4;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-caption);
+  line-height: var(--line-height-caption);
+  letter-spacing: var(--letter-spacing-caption);
 }
 
 @mixin text-label {
-  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
-  font-weight: 600;
-  line-height: 1.4;
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
 }
 
 @mixin text-body {
-  font-size: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
-  font-weight: 400;
-  line-height: 1.6;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
 }
 
 @mixin text-title {
-  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
-  font-weight: 600;
-  line-height: 1.25;
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-title);
+  line-height: var(--line-height-title);
+  letter-spacing: var(--letter-spacing-title);
 }
 
 @mixin text-heading {
-  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
-  font-weight: 650;
-  line-height: 1.1;
+  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-heading);
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--letter-spacing-heading);
 }
 
 @mixin text-display {
-  font-size: clamp(2rem, 1.45rem + 2.1vw, 3.5rem);
-  font-weight: 700;
-  line-height: 1;
+  font-size: var(--font-size-display);
+  font-weight: var(--font-weight-display);
+  line-height: var(--line-height-display);
+  letter-spacing: var(--letter-spacing-display);
 }