uncloseai.

Styleguide

Visual reference for every component in the uncloseai.js embed system. This page documents the design tokens, vault onboarding flow, chat interface, and controls. The floating button at the bottom right is the live embed: click it to test the real modal.

Color Palette

Core colors used across the modal system. The purple gradient anchors the header, send button, and vault submit. All other colors adapt to light and dark themes via CSS custom properties.

Brand Gradient

Interface Colors

Typography

Brand Font

uncloseai.

font-family: 'ChunkFiveRegular', monospace — used for the h1 branding, vault gate title, and floating button.

Body Text

Body text inherits from PicoCSS system font stack. Base size: 16px, line-height: 1.6.

Heading scale factor: 1.125 (major second). h1 through h6 computed via calc(1rem * var(--heading-scale)^n).

Code

Code blocks use highlight.js v11.10.0 with the a11y-dark theme. The modal auto-loads this stylesheet on any host page. Inline code uses PicoCSS monospace styling.

// JavaScript: one-line installation
const script = document.createElement("script");
script.src = "https://uncloseai.com/uncloseai.js";
script.type = "module";
document.head.appendChild(script);

# Python: streaming chat with uncloseai
class UncloseAI:
    def __init__(self):
        self.endpoints = []

    def chat_stream(self, model, messages):
        for chunk in self._sse_stream(model, messages):
            yield chunk["choices"][0]["delta"]["content"]

# Bash: test the TTS endpoint
curl -X POST https://speech.ai.unturf.com/v1/audio/speech \
  -H "Content-Type: application/json" \
  -d '{"model":"tts-1","voice":"alloy","input":"Hello world"}'

Vault Gate

The vault gate is the first thing every user sees when opening the modal. It encrypts chat history, API keys, and settings behind a password using AES-256 with a device-specific salt. Each website gets its own vault.

New User (Create Vault)

Returning User (Unlock)

Error State

Modal Headers

All three modals share the same header structure: gradient background, title, and action buttons. The purple gradient anchors the chat and TTS modals, while translate uses green.

Chat Modal

Purple gradient with brand title, page context subtitle, settings gear, and close button.

TTS Modal

Purple gradient with "Text to Speech" title and close button.

Translate Modal

Green gradient (#4CAF50 → #45a049) with "Translate" title and close button.

Chat Messages

User messages are right-aligned with a blue background. Responses are left-aligned and themed for dark/light. Both use asymmetric border-radius for a conversational feel.

Message Actions

Each message has action buttons that appear on hover: copy as Markdown, copy as HTML, text-to-speech download, and delete.

Controls

The control strip sits between the chat area and input field. Horizontally scrollable on mobile. Each button triggers a modal feature.

Buttons

Gradient Buttons

Used for primary actions: vault submit, send message, and modal CTA buttons.

Control Buttons

Used for secondary actions in the control strip and settings panel.

Floating Button

The entry point. Fixed position, bottom-right. Uses ChunkFive font. Colors adapt to the host page's theme.

Inputs

Chat Input (Rounded)

The main message input. Rounded border-radius: 24px, auto-grows up to 120px height, focus ring uses the brand blue #667eea.

Vault Input (Rectangular)

Used in the vault gate and settings forms. border-radius: 10px with a subtle focus ring.

Live Demo

The uncloseai. floating button in the bottom-right corner of this page is the real embed. Click it to interact with the full modal, including vault creation, chat, TTS, translation, and settings. Everything documented above is rendered live inside that modal.

Embed Code

<!-- Add to any HTML page -->
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>

That single line loads the entire modal system: vault encryption, chat, TTS, translation, page reading, file upload, and settings. Zero configuration required. See the full documentation for customization options.