[Chore] Update contributing guidelines and local setup documentation

CONTRIBUTING.md

@@ -2,42 +2,62 @@
 
 First off, thank you for considering contributing to **VeriWorkly**! We are building a professional, privacy-first career ecosystem, and we value your help.
 
-## 🏗️ Getting Started
+> [!IMPORTANT]
+> **Detailed guides, developer workflows, and coding standards** live in our official documentation:
+>
+> - 📖 **[Full Contributing Guidelines](https://docs.veriworkly.com/docs/contributing/index)**
+> - 🛠️ **[Detailed Local Setup Guide](https://docs.veriworkly.com/docs/getting-started/local-setup)**
 
-### 📦 Development Prerequisites
+---
+
+## ⚡ Quick TL;DR Contribution Workflow
 
-- **Node.js 20+**
-- **npm v10+**
-- **Docker** (Optional, for full stack testing)
+If you just need a quick heads-up on the commands and branching protocol:
 
-### 🛠️ Local Setup
+### 1. Fork & Clone
 
-1. **Fork** the repository.
-2. **Clone** your fork:
+1. Fork the [original repository](https://github.com/VeriWorkly/veriworkly).
+2. Clone your fork locally:
    ```bash
-   git clone https://github.com/VeriWorkly/veriworkly.git
+   git clone https://github.com/YOUR_USERNAME/veriworkly.git
    cd veriworkly-resume
    ```
-3. **Install** dependencies:
-   ```bash
-   npm install
-   ```
-4. **Environment**:
+3. Set up the upstream remote:
    ```bash
-   cp .env.example .env
-   cp apps/server/.env.example apps/server/.env
+   git remote add upstream https://github.com/VeriWorkly/veriworkly.git
    ```
-5. **Start Dev**:
-   ```bash
+
+### 2. Branching Policy
+
+- **Base Branch**: PRs must be based on and target the **`master`** branch.
+- **Update your branch** before starting:
+  ```bash
+  git checkout master
+  git pull upstream master
+  git checkout -b feat/your-feature-name
+  ```
+
+### 3. Local Run Commands
+
+- Install dependencies: `npm install`
+- Copy environment variables: `cp .env.example .env` and `cp apps/server/.env.example apps/server/.env`
+- Choose your dev flow:
+  - **Frontend-only (Site/Templates at port 3000)**: `npm run dev` _(No database or backend server needed)_
+  - **Full-stack (All apps/databases)**: `npm run dev:all` _(Requires running `npm run db:push -w @veriworkly/server`)_
+
+### 4. Code Quality
+
+Run checks before committing:
+
+```bash
    npm run dev:all
-   ```
+```
 
 ---
 
 ## 🌿 Branching Policy
 
-- `main`: Production-ready code.
-- `dev`: Active development and integration branch. **Base your PRs here.**
+- `master`: Active development, integration, and production branch. **Base your PRs here.**
 
 ### Branch Naming Convention
 
@@ -50,16 +70,17 @@ First off, thank you for considering contributing to **VeriWorkly**! We are buil
 
 ## 🛠️ Development Guidelines
 
-### 🎨 Architecture
+### 1. Architecture
 
 We use a **Monorepo** structure.
 
-- **apps/resume-builder**: Core Next.js application.
+- **apps/site**: Marketing landing site.
+- **apps/studio**: Builder studio application.
 - **apps/server**: Express API.
 - **apps/docs-platform**: Documentation (Fumadocs).
 - **packages/ui**: Shared Design System.
 
-### 📝 Coding Standards
+### 2. Coding Standards
 
 - **TypeScript**: Mandatory for all new code.
 - **Linting**: Run `npm run lint` before committing.
@@ -70,10 +91,11 @@ We use a **Monorepo** structure.
 ## 📝 Pull Request Process
 
 1. **Create an Issue**: Discuss large changes before starting work.
-2. **Submit PR**: Open a PR against the `dev` branch.
+2. **Submit PR**: Open a PR against the `master` branch.
 3. **Checklist**:
-   - [ ] Code builds successfully (`npm run build`)
    - [ ] Lint passes (`npm run lint`)
+   - [ ] Prettier formatting succeeds (`npm run format:write`)
+   - [ ] Code builds successfully (`npm run build`)
    - [ ] Tests pass (`npm test`)
    - [ ] Documentation updated (if applicable)
 

QUICK_START.md

@@ -31,20 +31,26 @@ VeriWorkly is a monorepo consisting of a Next.js frontend and an Express backend
 
 ## 🚀 Running the App
 
-To start all services (Frontend, Backend, Docs, Blog) in development mode:
+To start services (Site, Builder Studio, Backend, Docs, Blog) in development mode:
 
 ```bash
 npm run dev
+npm run dev:site
+npm run dev:studio
+npm run dev:server
+npm run dev:docs
+npm run dev:blog
 ```
 
 To start specific apps:
 
-- **Resume Builder**: `npm run dev:resume`
+- **Site/Resume**: `npm run dev` (starts @veriworkly/site)
+- **Studio**: `npm run dev:studio`
 - **Server**: `npm run dev:server`
 - **Docs**: `npm run dev:docs`
 - **Blog**: `npm run dev:blog`
 
-## 📖 Full Documentation
+## 📚 Detailed Documentation
 
 For detailed guides on deployment, contribution, and architecture, visit:
 [https://docs.veriworkly.com](https://docs.veriworkly.com)

README.md

@@ -119,7 +119,7 @@ docker compose --env-file .env.docker up -d --build
 | [User Support](https://docs.veriworkly.com/docs/user-guides/creating-your-first-resume) | Guides for building and managing resumes.    |
 | [Local Setup Guide](README.Local.md)                                                    | Detailed manual installation instructions.   |
 | [Docker Deployment](README.Docker.md)                                                   | Production self-hosting instructions.        |
-| [Contributing Guidelines](https://docs.veriworkly.com/docs/contributing/index)          | Standards and protocols for contributors.    |
+| [Contributing Guidelines](CONTRIBUTING.md)                                              | Standards and protocols for contributors.    |
 
 ## Security & Privacy
 
@@ -142,7 +142,7 @@ For complete security policy, see [SECURITY.md](SECURITY.md)
 
 ## Contributing
 
-VeriWorkly is an open-source project and welcomes community contributions. Please review our [Contributing Guide](https://docs.veriworkly.com/docs/contributing/index) before submitting Pull Requests.
+VeriWorkly is an open-source project and welcomes community contributions. Please review our [Contributing Guide](CONTRIBUTING.md) before submitting Pull Requests.
 
 ### Ways to Contribute
 

apps/blog-platform/content/blog/building-scalable-resume-platform-multi-app-architecture.mdx

@@ -9,10 +9,11 @@ date: "2026-04-28"
 
 VeriWorkly is organized as a multi-app repository with a clear split of concerns:
 
-1. Resume Builder (`apps/resume-builder`)
-2. Docs Platform (`apps/docs-platform`)
-3. Blog Platform (`apps/blog-platform`)
-4. API Server (`apps/server`)
+1. Marketing Landing Site (`apps/site`)
+2. Builder Studio (`apps/studio`)
+3. Docs Platform (`apps/docs-platform`)
+4. Blog Platform (`apps/blog-platform`)
+5. API Server (`apps/server`)
 
 We also maintain one internal shared package, `@veriworkly/ui` (`packages/ui`), for reusable UI primitives and theme tokens.
 
@@ -34,11 +35,16 @@ Each service can be deployed independently. If export traffic spikes, we can tun
 
 ## What Each App Does
 
-### Resume Builder (`apps/resume-builder`)
+### Marketing Landing Site (`apps/site`)
 
-- Interactive editing experience
-- Local-first by default, with optional sync
-- Template rendering and export orchestration from the UI
+- Public-facing landing pages, pricing, and features presentation
+- Integrated blog previews and brand assets section
+
+### Builder Studio (`apps/studio`)
+
+- Interactive resume/CV editor and template selection
+- Local-first document editing and customization
+- Client-side export orchestration and PDF rendering
 
 ### API Server (`apps/server`)
 

apps/docs-platform/content/docs/architecture/auth-system.mdx

@@ -18,7 +18,7 @@ VeriWorkly utilizes the **Better-Auth** framework, specifically the **Email OTP*
 
 The authentication infrastructure is distributed between the client and server applications to maintain a clear separation of concerns.
 
-- **Frontend (`apps/resume-builder`)**: Utilizes the Better-Auth client SDK for session lifecycle management and the orchestration of the OTP verification interface.
+- **Frontend (`apps/studio`)**: Utilizes the Better-Auth client SDK for session lifecycle management and the orchestration of the OTP verification interface.
 - **Backend (`apps/server`)**: Operates as the centralized authentication authority. Responsibilities include database interaction, OTP generation, and secure email dispatch via SMTP.
 
 ### Session Management Strategy

apps/docs-platform/content/docs/architecture/design-system.mdx

@@ -0,0 +1,145 @@
+---
+title: Shared Design System
+description: Technical architecture, components, and token variables of the @veriworkly/ui package.
+---
+
+import { Step, Steps } from "fumadocs-ui/components/steps";
+
+# Shared Design System (`@veriworkly/ui`)
+
+The `@veriworkly/ui` package is the centralized design system and UI library for the VeriWorkly monorepo. It ensures visual consistency, accessibility, and high performance across all workspace platforms:
+
+- **Marketing Site** (`apps/site` on port 3000)
+- **Builder Studio** (`apps/studio` on port 3001)
+- **Documentation** (`apps/docs-platform` on port 3002)
+- **Blog** (`apps/blog-platform` on port 3003)
+
+---
+
+## Theme & Tokens System
+
+The design system implements a dark-and-light theme design using native CSS variables mapped to Tailwind CSS v4 custom theme tokens. This configuration resides in `packages/ui/src/styles/themes.css`.
+
+### Theme CSS Variables
+
+The following core variables are injected into `:root` (light mode) and `.dark` (dark mode) contexts:
+
+| CSS Variable   | Tailwind Token        | Description               | Light Value            | Dark Value               |
+| :------------- | :-------------------- | :------------------------ | :--------------------- | :----------------------- |
+| `--background` | `color-fd-background` | Canvas background         | `#f5f4ef` (cream)      | `#0d1117` (deep dark)    |
+| `--foreground` | `color-fd-foreground` | Primary text and icons    | `#171717` (charcoal)   | `#f3f4f6` (light gray)   |
+| `--card`       | `color-fd-card`       | Container elements        | `#ffffff` (pure white) | `#121924` (slate navy)   |
+| `--border`     | `color-fd-border`     | Divider borders           | `rgba(23,23,23,0.12)`  | `rgba(148,163,184,0.24)` |
+| `--accent`     | `color-fd-primary`    | Interactive action states | `#2563eb` (royal blue) | `#60a5fa` (light blue)   |
+
+### CSS Usage Example
+
+To style a custom element outside the predefined Tailwind utilities, use the CSS custom properties:
+
+```css
+.custom-panel {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  transition: border-color 0.2s ease;
+}
+
+.custom-panel:hover {
+  border-color: var(--accent);
+}
+```
+
+---
+
+## Component Library
+
+### UI Elements (`src/components/ui`)
+
+All primitives are designed to be fully modular, responsive, and lightweight:
+
+- **Accordion**: Collapsible accordion panels for FAQs and dense details.
+- **Badge**: Pill badges for tag attributes or status indicators.
+- **Button**: Action triggers with loaders, icons, and multiple style variants.
+- **Card**: Elevated border boxes representing standalone content sections.
+- **Checkbox**: Fully accessible check selectors.
+- **Input**: Validated input text fields with layout error messaging.
+- **Menu**: Nested contextual navigation triggers and action menus.
+- **Modal**: Overlay modal displays utilizing smooth transitions.
+- **Select**: Interactive form dropdown components.
+- **Switch**: Visual toggle state controls.
+- **TextArea**: Expandable multi-line textual fields.
+- **Tooltip**: Contextual bubble descriptions on hover.
+
+### Structural Layout Components (`src/components/layout`)
+
+- **Container**: Page margins and content max-width constraints.
+- **MarketingNavbar**: Landing header supporting desktop actions and mobile menu slide-out navigation.
+- **MarketingFooter**: Multi-column site link index containing copyright and social integrations.
+- **AppShell**: Left-rail navigation layout shell for the builder workspace.
+- **ThemeToggle**: Class-based theme switcher button (`light` vs `.dark` DOM root updates).
+- **SocialIcons**: Vector brand assets linking to GitHub, LinkedIn, and Twitter/X.
+
+---
+
+## Typography & Font Setup
+
+Google **Geist** and **Geist Mono** are pre-configured in `src/lib/fonts.ts`. The variables are consolidated into the `globalFontVariables` helper:
+
+### Next.js Integration Guide
+
+Import the fonts and global CSS stylesheet into the main root layout (`app/layout.tsx`):
+
+```tsx
+import { globalFontVariables } from "@veriworkly/ui";
+import "@veriworkly/ui/styles/globals.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={globalFontVariables}>
+      <body className="bg-background text-foreground antialiased">{children}</body>
+    </html>
+  );
+}
+```
+
+---
+
+## Development & Extension
+
+### Creating a New Component
+
+To add a new shared UI component to the design system:
+
+<Steps>
+  <Step>
+    #### Component Implementation
+    Create your component file inside `packages/ui/src/components/ui/` or `/layout/`. Always write styling with Tailwind utilities:
+    ```tsx
+    // packages/ui/src/components/ui/CardHeader.tsx
+    import React from "react";
+    import { cn } from "../../utils";
+
+    export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+    export const CardHeader = ({ className, ...props }: CardHeaderProps) => {
+      return (
+        <div
+          className={cn("border-b border-border pb-4 mb-4", className)}
+          {...props}
+        />
+      );
+    };
+    ```
+
+  </Step>
+
+<Step>
+  #### Export the Component Expose your component in the main entrypoint `packages/ui/src/index.ts`:
+  ```typescript export * from "./components/ui/CardHeader"; ```
+</Step>
+
+  <Step>
+    #### Workspace Hot Reloading
+    Since npm workspaces track the files directly, other apps (`site`, `studio`) will automatically rebuild with Hot Module Replacement (HMR) once you save changes.
+  </Step>
+</Steps>