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.

Layout

Every layout here is CSS grid. Not as a preference — a grid track is sized before its content is placed, so an item is never squeezed below its own width. A flex row makes no such promise: it will shrink an item until the text inside it wraps. That is not theoretical. The training dashboard’s toolbar was a flex row, and as controls were added flex compressed each label until a checkbox sat on one line with its word orphaned on the next — the toggle read as a stray glyph and could not be found at all.

Four primitives cover nearly everything. Spacing and column floors are tokens (--sg-gap-*, --sg-col-*), mirrored in the dashboard as --gap-* and --col-*.

.sg-bar — a toolbar

Wraps between items, never inside one. The floor must be a definite length: with min-content or 0, auto-fit cannot work out how many tracks fit and shrinks them instead, which overlaps the items rather than wrapping them.

.bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sg-col-btn), max-content));
  justify-content: start;
  gap: var(--sg-gap-sm) var(--sg-gap-lg);
  align-items: center;
}

.sg-run — a run that stays on one line

Icon and label, button and button, dot and legend text. Tracks are max-content, so nothing in the run can be compressed.

.sg-pair — label left, value right

Because it is a grid rather than justify-content: space-between, every value in a stack of these lands on the same column instead of wherever its label happened to end.

.sg-panels — panels that reflow

By available width, not by a fixed column count. One rule, no breakpoints.

Sizing a track

Pick the floor by measuring, not by taste. On the dashboard toolbar at 1545px, counting groups whose content no longer fits its track: min-content and 0 squeezed all four groups, 160–240px squeezed three, 300–340px squeezed two, and 400px squeezed none. --col-group is 400px.

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 with Reverse RAG (live page content injected into every conversation), TTS, translation, file upload, and settings. Zero configuration required. See the full documentation for customization options.