> ## 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.

# Theming & Design Tokens

> Explore the procedural theming engine, preset palettes, typography options, and contrast math.

# Theming & Design Tokens

okl.ink includes a design engine (`src/lib/theme.ts`) that transforms configuration objects into CSS variables.

***

## Built-in Presets

okl.ink includes 5 curated visual presets:

| Preset         | Swatch    | Default Background    | Accent Color            | Typography | Radius  | Density     |
| :------------- | :-------- | :-------------------- | :---------------------- | :--------- | :------ | :---------- |
| **`oklink`**   | `#efe6d8` | *Dynamic App Default* | *System Primary*        | Modern     | Rounded | Comfortable |
| **`midnight`** | `#17191d` | `#1a1a1a`             | `#9d4edd` (Purple)      | Modern     | Rounded | Airy        |
| **`paper`**    | `#f7f2e7` | `#f7f2e7` (Sepia)     | `#9a3412` (Rust)        | Editorial  | Sharp   | Airy        |
| **`vivid`**    | `#151d4d` | `#151d4d` (Deep Navy) | `#f97316` (Neon Orange) | Modern     | Rounded | Comfortable |
| **`lofi`**     | `#1d2026` | `#1a1a1a` (Charcoal)  | `#f59e0b` (Amber)       | Modern     | Rounded | Compact     |

<Frame caption="Theme Presets & Appearance Panel">
  <img src="https://mintcdn.com/okl-ink/UZD8uXSZcXeqIjQF/images/customizations.png?fit=max&auto=format&n=UZD8uXSZcXeqIjQF&q=85&s=f469e9701fad723bd1b6d0408a243626" alt="Theme presets and styling in okl.ink" width="1848" height="1089" data-path="images/customizations.png" />
</Frame>

***

## Typography Presets

Typography presets apply tailored font stacks to headlines, subheadings, and link labels:

* **Modern**: Clean, geometric sans-serif (Inter / System font stack).
* **Editorial**: Elegant serif styling (`Playfair Display`, `Newsreader`, or classical editorial stacks).
* **Mono**: Technical monospace typography (`Geist Mono`, `JetBrains Mono`).
* **Geist**: Modern, ultra-clean neo-grotesque font by Vercel.

***

## Radius Presets

Control the corner rounding of the project container and individual link tiles:

| Radius Preset | Page Container Radius | Tile Corner Radius   |
| :------------ | :-------------------- | :------------------- |
| **`sharp`**   | `0px`                 | `0px`                |
| **`rounded`** | `1.0rem` (16px)       | `1.0rem` (16px)      |
| **`soft`**    | `1.5rem` (24px)       | `1.25rem` (20px)     |
| **`pill`**    | `2.0rem` (32px)       | `9999px` (Full Pill) |

***

## Density Presets

Control vertical rhythm, tile padding, and grid spacing:

```json theme={null}
{
  "compact": {
    "--project-section-pad": "1rem",
    "--project-header-pad-x": "1.5rem",
    "--project-tile-gap": "0.5rem",
    "--project-tile-pad": "0.875rem"
  },
  "comfortable": {
    "--project-section-pad": "1.5rem",
    "--project-header-pad-x": "2rem",
    "--project-tile-gap": "0.625rem",
    "--project-tile-pad": "1.125rem"
  },
  "airy": {
    "--project-section-pad": "2.25rem",
    "--project-header-pad-x": "3rem",
    "--project-tile-gap": "1rem",
    "--project-tile-pad": "1.5rem"
  }
}
```

***

## Automatic Contrast Calibration

When you choose a custom background or accent color, okl.ink's design engine automatically calculates WCAG-compliant contrast ratios:

* **Legible Typography**: Headlines and subtitle colors adjust dynamically so text always passes high-contrast accessibility standards.
* **Card Surfaces**: Card fills, borders, and hover states calibrate in real time to match your custom background luminance.
* **Icon Wells**: On dark backgrounds, an icon-well background is generated so link logos and social icons remain crisp and balanced.