uncloseai.

Styleguide: Component Reference for uncloseai.js

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

Gradient
#667eea → #764ba2
Primary
#667eea
Secondary
#764ba2

Interface Colors

Dark BG
#1a1a2e
Chat Dark
rgb(26,26,26)
Light BG
#f8f9fa
User Msg
#007bff
AI Msg Dark
#2d3748
Success
#28a745
Error
#dc3545
Border
#dee2e6

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

// Example: one-line installation
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>

Code blocks use highlight.js with the a11y-dark theme. Inline code uses the default PicoCSS monospace styling.

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)

Dark Theme
🔐
uncloseai.
Your chat history, API keys, and settings are encrypted with AES-256 using a password you choose and a device-specific salt. Each website has its own vault. Choose a password to get started.
Light Theme
🔐
uncloseai.
Your chat history, API keys, and settings are encrypted with AES-256 using a password you choose and a device-specific salt. Each website has its own vault. Choose a password to get started.

Returning User (Unlock)

Dark Theme
🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.
Light Theme
🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.

Error State

🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.
That password didn't work. Please try again.

Purple gradient header with title, subtitle, and settings gear. The gradient linear-gradient(135deg, #667eea, #764ba2) is the visual anchor across the entire modal system.

Hermes Machine Learning
Discussing: uncloseai.js Styleguide

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.

Dark Theme
What can you help me with on this page?
I can see this is the uncloseai.js styleguide. I can help you understand the component system, color palette, vault encryption, or any of the UI patterns documented here. What interests you?
Tell me about the vault encryption
Light Theme
What can you help me with on this page?
I can see this is the uncloseai.js styleguide. I can help you understand the component system, color palette, vault encryption, or any of the UI patterns documented here. What interests you?
Tell me about the vault encryption

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.

uncloseai.

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.