aktive.chat is built as a high-precision, technology-driven platform that makes real-time AI translation and live captions feel seamless and intuitive. Its identity is rooted in the “Dark Sheet” principle — a controlled, minimal dark interface with a premium and forward-thinking character. The system relies on strict grid structures, sharp edges, confident typography, and deliberate contrast to communicate clarity, performance, and advanced software craftsmanship.

Primary Logo: aktivechat-typo.png typography mark accompanied by the icon (favicon.png).

• Placement & Usage: Used prominently in headers and footers with a transparent background. To maintain visual balance, the logo must always have designated breathing room (padding) and must never be crowded by other elements. Against dark backgrounds (#0b0b0b), the logo should be bright/white or use the primary brand accent.

The brand relies primarily on a sophisticated, deep dark theme, utilizing stark contrasts and a highly vibrant neon accent to draw attention.

Click the copy icon on any color to copy its HEX value.

The typography system strictly scales based on functional purpose, pairing a specialized, confident display font with a highly legible structural font.

• "The Sheet" Structure: Content is heavily contained horizontally within structured maximum widths (like 1440px or 800px for copy), ensuring text lengths never extend indefinitely. Core boundaries are often defined by rigid 1px borders tracking alongside columns.
• No Drop Shadows: Depth is not established using soft, diffused shadows. Instead, we use solid borders, background contrasting (#0b0b0b vs #111111), and stark architectural lines.
• Sharp Elements: Buttons, layout containers, and form fields typically utilize 0px border-radius to maintain a stark, precise, engineering-driven aesthetic; though a select few interactive "pill" elements use fully rounded corners (50px).

Imagery: Focused on technical representations, software mockups (like the 3D Bar charts, or split-screen UI highlights), and highly stylized photography.

Motion: Animation loops are subtle. Primary use of motion includes the gradientShift effect over accent text (e.g., "AI translation") which drifts smoothly over 3 seconds, or a rigid text-ticker representing languages rolling across the layout without stutter. Focuses on performance and intentionality without becoming distracting.

• Direct & Confident: Text favors actionable, descriptive language ("Real-time AI translation & live captions for events").
• Minimalist & Technical: Avoids overly fluffy "marketing language". Explanations are clean, formatted with bullet points, and focus rapidly on how things work.
• Progressive: Assumes the user is smart and looking for a next-generation solution.

The design scales naturally to fit various contexts:

• Dashboards & Workspaces: High utilization of the border layout and the Space Mono font for configuration pages, setup guides, and live logs.
• Public Landing Pages / Marketing: Expands heading sizes drastically (h1: 4.5rem, h2: 3rem) and utilizes heavy grid displays (grid-template-columns: 1fr 1fr) to juxtapose descriptive text against visual mockups.

• Contrast Checks: The primary off-white (#f4f4f5) on deep black (#0b0b0b) ensures massive readability passing minimum WCAG contrast standards. Muted paragraphs are strictly kept at #a1a1aa, guaranteeing they don't fade into the background.
• Semantics: Employs appropriate semantic tags (<main>, <header>, <footer>, <section>, <article>).
• Interactive Aria: Buttons opening sidebars, toggling mute logic in widgets, and social links rely heavily on inline SVGs equipped with appropriate aria-label tags (e.g. aria-label="X (Twitter)").