> ## Documentation Index
> Fetch the complete documentation index at: https://okl-ink.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Overview

> Understand the core concepts, data model, and architecture of okl.ink pages.

# Product Overview

okl.ink is organized around **Projects** (each having a public `/:slug` page), **Links** (interactive tiles within a bento grid), and **Themes** (customizable visual styling and layout tokens).

```
User (Account)
 │
 ├── ApiTokens (Scoped Bearer tokens for MCP & REST)
 └── Projects (Pages)
      ├── Metadata (Title, Description, Slug, Cover Image, Name)
      ├── Settings (Published, Password Protected, Blocked)
      ├── Theme (Preset, Typography, Radius, Density, Colors)
      └── Links (Ordered tiles with size, click counts, widgets)
```

***

## Core Entities

### Projects (Pages)

A project represents your public-facing page. Each project is uniquely identified by a clean URL slug (e.g., `okl.ink/my-launch`).

* **Slug Constraints**: 1–50 alphanumeric characters and hyphens. Reserved paths (such as `api`, `dashboard`, `settings`, `r`, `inspector`, etc.) are protected.
* **Publication State**: Pages start in draft mode and can be toggled live instantly.
* **Access Control**: Projects can be publicly open, draft-only, or password protected.

### Links & Tiles

Links are the individual content units on a page. Unlike conventional link trees with standard uniform buttons, okl.ink organizes links into a dynamic bento grid.

* **Sizes**: `1x1` (Icon), `2x1` (Standard), `2x2` (Rich Preview/Social), and `4x1` (Full Banner).
* **Positioning**: Zero-indexed ordering stored in PostgreSQL and reordered via optimistic transactions.
* **Shortlink Routing**: Every link gets a unique `/r/:id` route that increments the click counter and redirects the visitor safely.

### Theming & Styling

Visual styling in okl.ink is powered by a procedural theme engine that translates JSON configurations into CSS custom properties:

* Custom background and accent colors are validated for WCAG luminance contrast.
* Precomputed light/dark icon wells ensure maximum contrast for icons in dark themes.
* Fluid radius and density variables control padding and tile margins.

***

## Workspace Navigation

| Route                 | Function                                                   |
| :-------------------- | :--------------------------------------------------------- |
| `/`                   | Landing page and product discovery                         |
| `/dashboard`          | User overview, total projects, and aggregate click metrics |
| `/projects/[id]/edit` | Full interactive bento grid canvas & live editor           |
| `/[slug]`             | Public project page                                        |
| `/r/[id]`             | Shortlink redirector with click telemetry                  |
| `/inspector`          | Public link security and reputation verification tool      |
| `/report`             | Community abuse reporting system                           |
| `/settings`           | User profile, active sessions, and security details        |
| `/api/mcp`            | Hosted Streamable HTTP MCP endpoint for AI tools           |
| `/api/v1/*`           | Developer REST API endpoints                               |