Restyle the docs to the liquid.ai look

.mintignore

@@ -1 +1,2 @@
 MODEL-MATRIX.md
+DESIGN.md

CLAUDE.md

@@ -52,80 +52,21 @@ Always use proper opening/closing tag pairs for Mintlify components:
 </CardGroup>
 ```
 
-## Styling Approach
+## Styling Files
 
-### Priority Order
-
-1. **Use Mintlify's native components first** - CardGroup, Card, Badge, Tabs, Accordion, etc.
-2. **Use Mintlify's built-in props** - icons, colors, columns
-3. **Fall back to custom CSS only when native options don't work**
+Design rules (components, badges, model cards, format buttons, icons, color and corner tokens, CSS patterns) are in [DESIGN.md](DESIGN.md).
 
 ### Custom Style Files
 
 - `style.css` - Static CSS loaded by Mintlify
 - `styles.js` - JavaScript-injected CSS for dev mode (some styles only work via JS injection)
+- `feedback-ack.js` - shows a two-second tick after a feedback click, using Mintlify's documented button IDs and navigation event; leaves native voting in control.
 
-Both files should have the same styles for consistency between dev and production. `styles.js` holds a full copy of `style.css` (escape backticks, backslashes and `${` inside the template literal), followed by a few dev-only fixes at the end. After editing `style.css`, copy the change into `styles.js` and run `node --check styles.js`.
-
-### Card Border Fix
-
-Cards have overflow clipping issues. The fix requires:
-
-```css
-.card-group {
-  overflow: visible !important;
-  contain: none !important;
-  padding: 4px !important;
-  margin: -4px !important;
-}
-
-.mdx-content {
-  contain: none !important;
-  overflow: visible !important;
-}
-```
-
-### Light/Dark Mode Targeting
-
-```css
-/* Light mode only */
-:root:not(.dark) .selector { }
+`style.css` and `styles.js` should have the same styles for consistency between dev and production. `styles.js` holds a full copy of `style.css` (escape backticks, backslashes and `${` inside the template literal), followed by a few dev-only fixes at the end. After editing `style.css`, copy the change into `styles.js` and run `node --check styles.js`.
 
-/* Dark mode only */
-.dark .selector { }
-```
-
-## Available Badge Colors
-
-Mintlify supports these badge colors:
-- `green`, `red`, `blue`, `yellow`, `orange`, `purple`, `cyan`
-
-```mdx
-<Badge shape="pill" color="green">Recommended</Badge>
-<Badge shape="rounded" icon="circle-check" color="green" size="lg">Latest</Badge>
-```
+### Stray files
 
-## Common Patterns
-
-### Model Card Layout
-
-```mdx
-## Section Title &nbsp;&nbsp;<Badge shape="rounded" color="green">Label</Badge>
-
-<CardGroup cols={2}>
-
-<Card title="Model Name" href="https://huggingface.co/...">
-  1.2B · <Badge shape="pill" color="green">Recommended</Badge>
-
-  Short description of the model.
-</Card>
-
-</CardGroup>
-```
-
-### Colors
-
-Custom CSS uses the `--lfm-*` color tokens defined at the top of `style.css` (they switch under `.dark`). Don't hard-code hex values in CSS rules.
+Never save extra `.css` or `.js` files anywhere in the repo, including `.context/`: Mintlify loads every one it finds. Rename them (e.g. `.js.txt`) or keep them outside the repo.
 
 ## Sampling Parameters
 
@@ -182,17 +123,14 @@ If you get MDX parsing errors:
 grep -r '/>' --include="*.mdx" --include="*.md" .
 ```
 
-### Style Not Applying
-
-1. Check if the selector is specific enough
-2. Try adding `!important`
-3. Check if you need to target light/dark mode specifically
-4. For icons using mask-image, set `background-color` instead of `color`
-
 ## Liquid API Reference
 
 `api/openapi.json` generates the endpoint pages of the API reference tab. Never edit it by hand: it is exported from the console repository's endpoint registry (`apps/web/lib/api/docs.ts`) with `bun run openapi:export`. Change the endpoint docs there and re-export. See the README's "Liquid API Reference" section.
 
+## Sidebar Navigation
+
+Each tab in `docs.json` has one wrapper group named after the tab (`{"group": "LFM", "pages": [...]}`). Add new sections inside the wrapper's `pages` as nested groups with `"expanded": false`, not as new top-level groups.
+
 ## Link Snapshot Contract
 
 `link-snapshot.yaml` is an append-only ledger of every URL the docs site has promised to keep resolving. The pre-commit hook keeps it in sync; [`check-link-snapshot.yaml`](.github/workflows/check-link-snapshot.yaml) fails any PR that would make a recorded URL stop resolving. Run `npm install` once to install the hook.

DESIGN.md

@@ -0,0 +1,127 @@
+# Design Guide
+
+The docs follow liquid.ai: neutral grays, one violet accent, sharp corners, little color. Most of the look comes from `style.css`; pages only pick the right component.
+
+## Principles
+
+1. Use Mintlify's built-in components first (Card, Badge, Tabs, Accordion, Steps, callouts).
+2. Then their props (icon, columns, color).
+3. Custom CSS only when neither works.
+4. Avoid inline `style={{...}}` in MDX; never use it for colors or visual styling (the format buttons on model pages are the existing exception). Small layout tweaks are fine where no class exists.
+
+## Color
+
+- Don't introduce new colors. Use only the theme colors (the `--lfm-*` tokens in `style.css`).
+- Most of the page is neutral. Use color only to emphasize important information or to draw attention (e.g. the violet accent for links and highlights, green for "available" ticks, Warning/Danger callouts).
+
+## Corners
+
+Elements are square by default (the `--lfm-radius` token is 2px). Step numbers and scrollbar handles retain Mintlify's native round corners; don't add other rounded shapes or a larger `border-radius`.
+
+## Components
+
+### Cards
+
+Use a card to send the reader somewhere. Icon, title, one or two lines of text, two columns.
+
+```mdx
+<CardGroup cols={2}>
+
+<Card title="Explore Models" icon="brain" href="/lfm/models/complete-library">
+  Browse text, vision, audio, omni and decision models.
+</Card>
+
+</CardGroup>
+```
+
+- A single full-width `<Card>` (no CardGroup) for one main link, e.g. a cookbook.
+- Cards that link to another site get a ↗ automatically.
+
+### Model cards
+
+For model grids on the model-category pages. Wrap the grid in `model-cards`; the first line is the size, a space, then the badge (no `·` before the badge). Two columns.
+
+```mdx
+<div className="model-cards">
+<CardGroup cols={2}>
+
+<Card title="LFM2.5-1.2B-Instruct" href="/lfm/models/lfm25-1.2b-instruct">
+  1.2B <Badge shape="pill" color="blue">Chat</Badge>
+
+  Instruction-tuned for chat and general-purpose tasks.
+</Card>
+
+</CardGroup>
+</div>
+```
+
+### Use-case tiles
+
+Small gray tiles that list what a model can do. Not clickable (no `href`). 3 columns on model pages, 2 on category pages.
+
+```mdx
+<div className="use-cases">
+<CardGroup cols={3}>
+
+<Card title="Math & Logic" icon="calculator">
+  Strong arithmetic and logical reasoning
+</Card>
+
+</CardGroup>
+</div>
+```
+
+### Badges
+
+`color="green"` renders as the highlight (violet on lavender); use it only for "Recommended" and "Latest release". Every other color renders as the same neutral tag, so pick any for descriptive labels.
+
+```mdx
+<Badge shape="pill" color="green">Recommended</Badge>
+<Badge shape="pill" color="blue">Chat</Badge>
+```
+
+### Callouts
+
+- `<Note>`, `<Info>`, `<Tip>`, `<Check>`: flat gray panel, for side information.
+- `<Warning>`, `<Danger>`: keep their color; only for things that can go wrong.
+
+### Code
+
+- A code block per command or file.
+- `<CodeGroup>` for the same example in several languages.
+- Inline code (`` `model_id` ``) for names, values and flags in text.
+
+### Tabs, Steps, Accordion
+
+- `<Tabs>`: alternatives the reader picks one of (OS, framework).
+- `<Steps>`: a sequence the reader follows in order.
+- `<Accordion>`: optional detail that most readers can skip.
+
+### Model pages
+
+The format buttons under the intro (HF, GGUF, MLX, ...) keep their existing inline-styled markup; copy the row from another model page. `style.css` turns their inline colors into one outlined chip.
+
+### Colab badge
+
+Keep the original branded badge artwork. The shared `.colab-link img` style sizes all badges to 24px high with their aspect ratio preserved.
+
+```mdx
+<div className="colab-link">
+  <a href="https://colab.research.google.com/github/..." target="_blank">
+    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab"></img>
+  </a>
+</div>
+```
+
+### Icons
+
+- Font Awesome names (fontawesome.com/icons); Lucide names render as an empty box.
+- Brand icons (`github`, `discord`): `iconType="brands"`.
+
+## CSS
+
+- Colors: only the `--lfm-*` tokens at the top of `style.css` (they switch in dark mode). No new tokens, no hex values in rules.
+- Corners: use the `--lfm-radius` token (2px). Step numbers and scrollbar handles use `revert-layer` to keep Mintlify's native rounding. No hard-coded `border-radius`.
+- Selectors: prefer Mintlify's attributes (`data-active`, `aria-selected`, `data-component-part`) over `[class*="..."]`, which also matches Tailwind variants like `hover:text-primary`.
+- Light / dark only: `:root:not(.dark) .selector` / `.dark .selector`.
+- Style not applying: make the selector more specific, add `!important`, check light/dark, and for mask-image icons set `background-color`, not `color`.

deployment/gpu-inference/transformers.mdx

@@ -11,7 +11,7 @@
 
 <div className="colab-link">
   <a href="https://colab.research.google.com/github/Liquid4All/docs/blob/main/notebooks/LFM2_Inference_with_Transformers.ipynb" target="_blank">
-    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab" />
+    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab"></img>
   </a>
 </div>
 
@@ -70,10 +70,10 @@
 
 * **`model_id`**: Can be a Hugging Face model ID (e.g., `"LiquidAI/LFM2.5-1.2B-Instruct"`) or a local path
 * **`device_map="auto"`**: Automatically distributes across available GPUs/CPU (requires `accelerate`). Use `device="cuda"` for single GPU or `device="cpu"` for CPU only
 * **`dtype="bfloat16"`**: Recommended for modern GPUs. Use `"auto"` for automatic selection, or `"float32"` (slower, more memory)
 
 <Accordion title="Click to see a pipeline() example">
   The [`pipeline()`](https://huggingface.co/docs/transformers/en/main_classes/pipelines) interface provides a simpler API for text generation with automatic chat template handling. It wraps model loading and tokenization, making it ideal for quick prototyping.
 
   ```python
   from transformers import pipeline
@@ -98,10 +98,10 @@
 
   * **`"text-generation"`**: Task type for the pipeline
   * **`model_name_or_path`**: Model ID (e.g., `"LiquidAI/LFM2.5-1.2B-Instruct"`) or local path (download locally with `hf download --local-dir ./LFM2.5-1.2B-Instruct LiquidAI/LFM2.5-1.2B-Instruct`)
   * **`dtype="auto"`**: Automatically selects optimal dtype (`bfloat16` on modern devices). Can use `"bfloat16"` explicitly or `"float32"` (slower, more memory)
   * **`device_map="auto"`**: Automatically distributes across available GPUs/CPU (requires `accelerate`). Alternative: `device="cuda"` for single GPU, `device="cpu"` for CPU only. Don't mix `device_map` and `device`
 
   The pipeline automatically handles chat templates and tokenization, returning structured output with the generated text.
 </Accordion>
 
 ### Generation Parameters
@@ -110,7 +110,7 @@
 
 * **`do_sample`** (`bool`): Enable sampling (`True`) or greedy decoding (`False`, default)
 * **`temperature`** (`float`, default 1.0): Controls randomness (0.0 = deterministic, higher = more random). Typical range: 0.1-2.0
 * **`top_p`** (`float`, default 1.0): Nucleus sampling - limits to tokens with cumulative probability ≤ top\_p. Typical range: 0.1-1.0
 * **`top_k`** (`int`, default 50): Limits to top-k most probable tokens. Typical range: 1-100
 * **`min_p`** (`float`): Minimum token probability threshold. Typical range: 0.01-0.2
 * **`max_new_tokens`** (`int`): Maximum number of tokens to generate (preferred over `max_length`)

deployment/on-device/llama-cpp.mdx

@@ -8,14 +8,14 @@
 </Tip>
 
 <Note>
   Building an application with llama.cpp? Jump to [Build with llama.cpp](#building-applications) for mobile, desktop, chat, tool-calling, structured-output, and multimodal guides.
 </Note>
 
 For GPU-accelerated inference at scale, consider using [vLLM](/deployment/gpu-inference/vllm) instead.
 
 <div className="colab-link">
   <a href="https://colab.research.google.com/github/Liquid4All/docs/blob/main/notebooks/LFM2_Inference_with_llama_cpp.ipynb" target="_blank">
-    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab" />
+    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab"></img>
   </a>
 </div>
 
@@ -96,8 +96,8 @@
     ```bash
     git clone https://github.com/ggml-org/llama.cpp
     cd llama.cpp
     cmake -B build
     cmake --build build --config Release -j 8
     ```
 
     The compiled programs will be in `./build/bin/`.
@@ -222,7 +222,7 @@
 Control text generation behavior using parameters in the OpenAI-compatible API or command-line flags. Key parameters:
 
 * **`temperature`** (`float`): Controls randomness (0.0 = deterministic, higher = more random). Typical range: 0.1-2.0
 * **`top_p`** (`float`): Nucleus sampling - limits to tokens with cumulative probability ≤ top\_p. Typical range: 0.1-1.0
 * **`top_k`** (`int`): Limits to top-k most probable tokens. Typical range: 1-100
 * **`min_p`** (`float`): Filters tokens below `min_p * max_probability`. Typical range: 0.05-0.3
 * **`max_tokens`** / **`--n-predict`** (`int`): Maximum number of tokens to generate
@@ -299,7 +299,7 @@
 print(response.choices[0].message.content)
 ```
 
 The LFM3 GGUFs store their recommended sampling parameters, so the request needs none. For LFM2.5-VL, see the sampling parameters on its [model page](/lfm/models/lfm25-vl-1.6b).
 
 <Accordion title="Using local model files">
   Download the model and the projector, then pass both:
@@ -312,7 +312,7 @@
   ```
 </Accordion>
 
 ## Audio and Omni Models
 
 [LFM3-Audio-2B](/lfm/models/lfm3-audio-2b) and [LFM3-Omni-2B](/lfm/models/lfm3-omni-2b) take audio input, and LFM3-Omni-2B also takes images and video. With `-hf`, llama.cpp downloads the audio and vision projector automatically.
 
@@ -358,7 +358,7 @@
 
 ### Speech Synthesis
 
 The `llama` command has no TTS subcommand, so speech synthesis uses the separate `llama-tts` program, which ships with llama.cpp:
 
 ```bash
 hf download LiquidAI/LFM3-Audio-2B-GGUF LFM3-Audio-2B-Q4_K_M.gguf mmproj-LFM3-Audio-2B-Q8_0.gguf --local-dir .
@@ -371,7 +371,7 @@
 
 ## Speculative Decoding
 
 Some LFM2.5 models have DSpark draft models that make generation faster without changing the output. In llama.cpp, the drafter is a GGUF sidecar that you load next to the target with `-hfd` (or `-md` for a local file):
 
 ```bash
 llama serve -hf LiquidAI/LFM2.5-1.2B-Instruct-GGUF:F16 \
@@ -384,7 +384,7 @@
 
 ## Converting Custom Models
 
 If you have a finetuned model or need to create a GGUF from a Hugging Face model:
 
 ```bash
 # Clone llama.cpp if you haven't already
@@ -403,7 +403,7 @@
 
 <CardGroup cols={2}>
   <Card title="iOS & Android" icon="mobile" href="/deployment/on-device/llama-cpp/mobile">
     Link the XCFramework or NDK build and run LFM GGUFs in-process.
   </Card>
   <Card title="Desktop & Server Apps" icon="desktop" href="/deployment/on-device/llama-cpp/desktop">
     llama-server as a sidecar, or Python / Node.js / .NET bindings.

deployment/on-device/ollama.mdx

@@ -1,21 +1,21 @@
 ---
 title: "Ollama"
 description: "Deploy Liquid AI LFM models with Ollama. Pull, configure, and serve LFM2.5 models locally with an OpenAI-compatible API."
 ---
 
 <Tip>
   Use Ollama for quick local model serving with a simple CLI or Docker-based deployment.
 </Tip>
 
 Ollama uses GGUF models and supports GPU acceleration (CUDA, Metal, ROCm).
 
 <Warning>
   The official Ollama v0.17.0 (latest stable) from [ollama.com](https://ollama.com) fails with a `missing tensor 'output_norm.weight'` error on the `lfm2moe` architecture. This affects all LFM MoE models (e.g. LFM2-24B-A2B, LFM2-8A-A1B). To run any LFM MoE model you specifically need [v0.17.1-rc0](https://github.com/ollama/ollama/releases/tag/v0.17.1-rc0) or later.
 </Warning>
 
 <div className="colab-link">
   <a href="https://colab.research.google.com/github/Liquid4All/docs/blob/main/notebooks/LFM2_Inference_with_Ollama.ipynb" target="_blank">
-    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab" />
+    <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open in Colab"></img>
   </a>
 </div>
 
@@ -52,15 +52,15 @@
     docker exec -it ollama ollama run hf.co/LiquidAI/LFM2.5-1.2B-Instruct-GGUF
     ```
 
     See the [Ollama Docker documentation](https://ollama.com/blog/ollama-is-now-available-as-an-official-docker-image) for more details.
   </Tab>
 </Tabs>
 
 ## Using LFM2 Models
 
 Ollama can load GGUF models directly from Hugging Face or from local files.
 
 ### Running GGUFs
 
 You can run LFM2 models directly from Hugging Face:
 
@@ -107,7 +107,7 @@
   PARAMETER stop "<|endoftext|>"
   ```
 
   Import the model with the Modelfile:
 
   ```bash
   ollama create my-model -f Modelfile
@@ -138,11 +138,11 @@
 ollama run hf.co/LiquidAI/LFM2.5-1.2B-Instruct-GGUF "What is machine learning?"
 ```
 
 If you imported a model with a custom name using a Modelfile, use that name instead (e.g., `ollama run my-model`).
 
 ## Serving Models
 
 Ollama automatically starts a server on `http://localhost:11434` with an OpenAI-compatible API for programmatic access.
 
 ### Python Client
 
@@ -166,7 +166,7 @@
 ```
 
 <Accordion title="Curl request examples">
   Ollama provides two native API endpoints:
 
   **Generate API** (simple completion):
 
@@ -191,7 +191,7 @@
 
 ## Vision Models
 
 LFM2-VL GGUF models can also be used for multimodal inference with Ollama.
 
 <Accordion title="Interactive Chat with Images">
   Run a vision model directly and provide images in the chat:
@@ -215,7 +215,7 @@
 
 <Accordion title="Using the API">
   ```python
   from openai import OpenAI
   import base64
 
   client = OpenAI(
@@ -224,8 +224,8 @@
   )
 
   # Encode image to base64
   with open("image.jpg", "rb") as image_file:
       image_data = base64.b64encode(image_file.read()).decode("utf-8")
 
   response = client.chat.completions.create(
       model="hf.co/LiquidAI/LFM2.5-VL-1.6B-GGUF",