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

Theme presets and styling in okl.ink — Theme Presets & Appearance Panel

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:

{
  "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.

Getting Started

Core Features

Theming & Design Tokens

Theming & Design Tokens

Built-in Presets

Typography Presets

Radius Presets

Density Presets

Automatic Contrast Calibration

​Theming & Design Tokens

​Built-in Presets

​Typography Presets

​Radius Presets

​Density Presets

​Automatic Contrast Calibration

Theming & Design Tokens

Built-in Presets

Typography Presets

Radius Presets

Density Presets

Automatic Contrast Calibration