FOLIO UI
Folio UI · 20 components · light + dark

Warm ink on parchment — a directory design system

Three-font editorial system combining Fraunces serif with JetBrains Mono and Press Start 2P pixel labels. Hard shadows, dashed borders, sharp corners — built for developer tools and catalogues.

Buttons

Pixel-label (Press Start 2P) buttons with hard ink box shadows. All variants, sizes, and states.

Sizes

Icon button · Close button

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--accent">Accent</button>
<button class="btn btn--destructive">Destructive</button>

<!-- Sizes -->
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary btn--lg">Large</button>

<!-- Loading -->
<button class="btn btn--primary is-loading" aria-busy="true">Submit</button>

Filter Tabs

Pixel-font toggle tabs — used to filter directory listings. Active state inverts ink/cream.

<div class="filter-group" data-filter-group role="tablist">
  <button class="filter-tab is-active" data-filter="all" role="tab">All</button>
  <button class="filter-tab" data-filter="live" role="tab">Live</button>
  <button class="filter-tab" data-filter="demo" role="tab">Demo</button>
</div>

Text Input

Mono-font inputs with focus ring and semantic states. Labels use Press Start 2P pixel font.

Must start with https:// 
<div class="input-group">
  <label class="input-label required" for="url">Site URL</label>
  <input class="input" id="url" type="url" placeholder="https://your.site">
  <span class="input-helper">Must start with https://</span>
</div>

<!-- Error state -->
<input class="input is-error" type="text">

<!-- Success state -->
<input class="input is-success" type="text">

CTA Combo

Inline email input + submit button. Border lifts and shadow extends on focus-within.

No spam. Unsubscribe any time. 
<div class="cta-combo">
  <input class="input" type="email" placeholder="you@yourdomain.com">
  <button class="btn btn--primary">Submit</button>
</div>

Form Stack

Stacked inputs with bottom submit button — used for "submit your site" forms.

<div class="cta-stack">
  <input class="input" type="email" placeholder="you@yourdomain.com">
  <input class="input" type="url" placeholder="https://your.site">
  <button class="btn btn--primary">Request to be listed</button>
</div>

Select

Custom-chevron select. is-active class inverts colour when a filter is selected.

<select class="input select">
  <option value="all">All categories</option>
  <option value="ai">AI & Fintech</option>
</select>

<!-- Active / filtered state -->
<select class="input select is-active">
  <option value="ai">AI & Fintech</option>
</select>

Checkbox

Square checkbox with accent fill on checked state.

<label class="checkbox-wrap">
  <input type="checkbox" checked>
  <span class="checkbox-label">Show live entries</span>
</label>

Toggle / Switch

Slide toggle, accent fill when on.

Email notifications
Public listing
Verified badge (coming soon) 
<div class="toggle-wrap">
  <label class="toggle" for="t1">
    <input type="checkbox" id="t1" checked>
    <span class="toggle-track"></span>
  </label>
  <span class="toggle-label">Public listing</span>
</div>

Badges & Pills

Pixel-font badges used for status (live/demo) and tool kinds (read/write/action).

live demo read write action neutral accent

Sizes

live sm live md live lg 
<span class="badge badge--live">live</span>
<span class="badge badge--demo">demo</span>
<span class="badge badge--read">read</span>
<span class="badge badge--write">write</span>
<span class="badge badge--action">action</span>

Kicker

Press Start 2P eyebrow label with leading rule — used above section headings.

Directory For Agents Tools 
<span class="kicker">Directory</span>

Share Buttons

Small icon-only buttons for social sharing. Accent fill on hover.

<div class="share-group">
  <span class="share-label">Share</span>
  <button class="share-btn" aria-label="Share on X">
    <svg ...>...</svg>
  </button>
</div>

Avatar

Round avatar with variant fill colours. Group stacks first-child on top.

AK FM ZR
AK FM ZR LV 
<span class="avatar avatar--md avatar--accent">AK</span>
<span class="avatar avatar--md avatar--neutral">FM</span>
<span class="avatar avatar--md avatar--ink">ZR</span>

<!-- Group -->
<div class="avatar-group">
  <span class="avatar avatar--md avatar--accent">AK</span>
  <span class="avatar avatar--md avatar--neutral">FM</span>
</div>

Code Block

Dark terminal block with traffic-light chrome, mono prompt, and copy button.

terminal
$ npx folio-cli install --registry https://api.folio.dev 
<div class="code-block">
  <div class="code-block-head">
    <span class="code-dot code-dot--red"></span>
    <span class="code-dot code-dot--amber"></span>
    <span class="code-dot code-dot--green"></span>
    <span class="code-block-label">terminal</span>
  </div>
  <div class="code-cmd">
    <span class="code-prompt">$</span>
    <span class="code-text" id="cmd">npx folio-cli install</span>
    <button class="code-copy" data-copy="#cmd">...</button>
  </div>
</div>

Directory Table

Numbered rows grouped by category, with expandable accordion panels. Click a row to reveal tool cards.

API Registry

12 entries ↗
Commerce 3 entries

Headless storefront API exposing product catalogue, cart, and checkout tools to AI agents.

store.fieldco.io↗
Tools 8 tools
▸ search_products read

Search the product catalogue by keyword, category, or price range. Returns paginated results with availability.

Input schema 
{
  "query": "string",
  "category": "string?",
  "max_price": "number?",
  "page": "integer? (default: 1)"
}
▸ add_to_cart write

Add a product variant to the current session cart. Returns updated cart state.

▸ checkout action

Initiate checkout flow and return a secure redirect URL for payment processing.

Inventory management API with real-time stock levels and reorder triggers.

inventory.norwood.co↗
▸ get_stock_level read

Retrieve current stock levels for one or more SKUs.

Order tracking and fulfilment status API.

Developer Tools 2 entries

CI/CD pipeline management API for triggering builds, reading logs, and managing environments.

Log aggregation and query API. Search across multiple services with structured filters.

<div class="dir-wrap">
  <div class="dir-head">...</div>
  <div class="cat-section">
    <div class="cat-head is-clickable" role="button">
      <span class="cat-label">Commerce</span>
      <span class="cat-count">3 entries</span>
      <span class="cat-rule"></span>
    </div>
    <div class="row-list">
      <div class="dir-row is-expandable">
        <span class="row-num">01</span>
        <span class="row-icon"><span class="fallback"></span></span>
        <span class="row-host">store.fieldco.io</span>
        <span class="badge badge--live">live</span>
        <span class="row-tools"><span class="num">8</span> tools</span>
        <span class="row-chev">▸</span>
      </div>
      <div class="expansion">...</div>
    </div>
  </div>
</div>

Tool Card

Expandable <details> card showing tool name, kind badge, description, and JSON schema.

▸ get_availability read

Retrieve real-time availability for one or more resource IDs. Returns a structured map of dates and slots.

Input schema 
{
  "resource_ids": "string[]",
  "start_date": "ISO8601 date",
  "end_date": "ISO8601 date",
  "timezone": "string? (IANA)"
}
▸ create_booking write

Create a new booking for a resource. Returns a confirmation ID and calendar invite link.

▸ send_confirmation action

Dispatch a booking confirmation email and optional SMS to the specified contact.

<details class="tool-card">
  <summary class="tool-head">
    <span class="tool-chevron">▸</span>
    <span class="tool-name">get_availability</span>
    <span class="badge badge--read">read</span>
  </summary>
  <div class="tool-body">
    <p class="tool-desc">Description here.</p>
    <details class="tool-schema">
      <summary>Input schema</summary>
      <pre>{ "resource_id": "string" }</pre>
    </details>
  </div>
</details>

API Endpoint List

Rows showing HTTP method verb, path (with query string highlight), and a description. Hover reveals left-border accent and diagonal arrow.

REST API Docs↗

Folio exposes a RESTful API at api.folio.dev/v1. All responses return JSON.

GET /tools?category=commerce&status=live List tools ↗ GET /tools/{id} Get tool details ↗ POST /sites Submit a site ↗ DELETE /sites/{id} Remove listing ↗

All endpoints require Authorization: Bearer <token>. Tokens are available in your account settings.

<div class="api-list">
  <a href="#" class="api-row">
    <span class="api-verb">GET</span>
    <span class="api-path">/tools<span class="qs">?category=commerce</span></span>
    <span class="api-label">List tools</span>
    <span class="api-arrow">↗</span>
  </a>
</div>

Dock Card

Boxed sidebar widget with pixel chrome bar, dot, bullet list, and hard-shadow CTA.

FOLIO

The curated API registry for developers and AI agents.

  • Browse 40+ verified APIs
  • Filter by category and status
  • Inspect tool schemas inline
  • Submit your own API
Browse Registry → 
<div class="dock">
  <div class="dock-chrome">
    <span class="dock-dot"></span>
    <span class="dock-title">FOLIO</span>
    <div class="dock-window-controls">
      <span class="dock-window-btn dock-window-min"></span>
      <span class="dock-window-btn dock-window-max"></span>
    </div>
  </div>
  <p class="dock-tagline">...</p>
  <hr class="dock-sep">
  <ul class="dock-bullets">
    <li>Browse 40+ verified APIs</li>
  </ul>
  <a href="#" class="dock-cta">Browse Registry <span class="dock-cta-arrow">→</span></a>
</div>

Toast

Four semantic variants: info, success, warning, error. Left border signals type.

Processing
Your request is being reviewed.
Submitted
Your API listing is under review.
Rate limit
Approaching 100 req/min.
Connection failed
Check your API endpoint and retry.

Live triggers

<div class="toast toast--success">
  <div class="toast-body">
    <div class="toast-title">Submitted</div>
    <div class="toast-desc">Your API listing is under review.</div>
  </div>
</div>

Alert / Banner

Inline semantic alert banners — info, success, warning, error.

Folio API is in public beta. Endpoints may change.
Your site has been verified and is now listed.
Your API key expires in 3 days. Renew now.
Authentication failed. Check your Bearer token.
<div class="alert alert--info">Folio API is in public beta.</div>
<div class="alert alert--success">Site verified and listed.</div>
<div class="alert alert--warning">API key expires in 3 days.</div>
<div class="alert alert--error">Authentication failed.</div>

Empty State

Displayed when a filtered directory has no matching results.

No APIs match your filters.
<div class="empty-state">No APIs match your filters.</div>

Skeleton Loading

Shimmer animation for loading states. Click "Reload" to replay.

<div class="skeleton" style="height:16px;width:200px;"></div>

Typography

Triple font system: Fraunces (display + body), JetBrains Mono (UI + code), Press Start 2P (labels + kickers).

The API Directory.

Section heading — serif medium

Sub-heading — serif light italic variant

Body text in Fraunces 300. Readable at comfortable sizes, with generous leading for editorial-style layouts. Accent links use the sky blue token.

Mono text — JetBrains Mono 400 — used for URLs, code, and metadata

Pixel kicker — press start 2p — labels

inline code snippet 
<p class="type-display">The API Directory.</p>
<p class="type-h2">Section heading</p>
<p class="type-body">Body text</p>
<p class="type-mono">Mono UI text</p>
<p class="type-pixel">Pixel label</p>
<code class="inline">inline code</code>

Colour Tokens

Warm cream base palette with sky blue accent. Hard ink shadows.

surface-base
surface-raised
text-primary
text-secondary
text-tertiary
brand-accent
accent-deep
accent-soft
border-default
success
warning
error

Motion Tokens

All transitions use CSS custom property durations. Panel entrance uses panel-in keyframe.

--duration-fast → 80ms — button active press
--duration-base → 120ms — hover transitions
--duration-slow → 280ms — backdrop, row expand
--duration-enter → 200ms — panel-in, slide down
--easing-default → cubic-bezier(0.4, 0, 0.2, 1)
--easing-spring → cubic-bezier(0.18, 0.89, 0.32, 1.18) — modal entrance

Named keyframes

cta-pulse (live dot)