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

# Quickstart

> Get started with okl.ink in under 2 minutes: create an account, build your first page, configure your theme, and publish.

# Quickstart

Follow these steps to launch your first okl.ink project page.

<Steps>
  <Step title="Sign in with Email OTP">
    Visit [okl.ink/login](https://okl.ink/login) and sign in using your email address.
    Enter the verification code to authenticate and access your Dashboard.
  </Step>

  <Step title="Create a New Project Page">
    From your Dashboard, click **Create Project**.

    Provide the core details:

    * **Title**: The headline displayed on your project header (e.g., `My Launch Project`).
    * **Description**: A concise one-line summary of what you are sharing.
    * **Slug**: Your unique URL identifier (e.g., `my-project` resolves to `okl.ink/my-project`).
    * **Cover Image (Optional)**: A banner image URL (`https://...`).

    Click **Create Page** to open the interactive canvas builder.
  </Step>

  <Step title="Add & Arrange Your Link Tiles">
    Click the **Add Tile** button (`+`) on the canvas to add your resources.

    <CardGroup cols={2}>
      <Card title="Live Demo / Website" icon="globe">
        URL to your hosted deployment (e.g., Vercel, Fly.io, custom domain).
      </Card>

      <Card title="Code Repository" icon="github">
        Link to GitHub, GitLab, or SourceHut repo.
      </Card>

      <Card title="Documentation" icon="book-open">
        Link to docs, API specs, or guides.
      </Card>

      <Card title="Socials & Media" icon="share-nodes">
        Interactive embed cards for X, LinkedIn, or YouTube videos.
      </Card>
    </CardGroup>

    Select a tile size:

    * `1x1`: Compact square icon widget
    * `2x1`: Standard horizontal card with title & subtitle
    * `2x2`: Large square for rich media & social previews
    * `4x1`: Full-width banner strip

    <Frame caption="Interactive Bento Canvas & Tile Builder">
      <img src="https://mintcdn.com/okl-ink/UZD8uXSZcXeqIjQF/images/start-using.png?fit=max&auto=format&n=UZD8uXSZcXeqIjQF&q=85&s=ed469fd869786850575c17e5a54dc052" alt="Start using okl.ink bento grid canvas" width="1848" height="1089" data-path="images/start-using.png" />
    </Frame>

    Drag and drop tiles on the canvas to reorder them in real-time.
  </Step>

  <Step title="Customize Appearance & Theme">
    Open the **Appearance** panel in the builder sidebar:

    1. **Presets**: Choose from `oklink` (warm editorial), `midnight` (deep slate), `paper` (minimal sepia), `vivid` (punchy indigo/orange), or `lofi` (matte monochrome).
    2. **Typography**: Select `Modern` (Inter/system), `Editorial` (serif), `Mono` (code), or `Geist`.
    3. **Corner Radius**: Adjust between `Sharp`, `Rounded`, `Soft`, or `Pill`.
    4. **Density**: Toggle between `Compact`, `Comfortable`, and `Airy`.
    5. **Custom Colors**: Override background and accent colors with real-time contrast calculations.

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

  <Step title="Publish and Share">
    Toggle the **Published** switch in the top toolbar.

    Your page is now live at `okl.ink/<your-slug>`.

    <Tip>
      Copy the short link or click **Share** to generate a QR code and preview your dynamic OpenGraph card for social media.
    </Tip>
  </Step>
</Steps>