AskUI Corporate Identity

Official brand guidelines and design system for AskUI

Website • Quick Start • Brand Guidelines • UI Components • Blazor Guide • Icon Library • Live Demo

---

Overview

This repository contains the official corporate identity guidelines and UI component library for AskUI — the enterprise-ready computer use agent infrastructure. Use these resources to maintain brand consistency and quickly build UIs across all projects.

For AI-assisted development: This repo is optimized for use with Cursor AI and Claude Code. Reference the component files directly when building interfaces, and let the AI help you apply the design system consistently.

Source of truth: askui.com is the reference implementation of this identity. These files are read out of the site. If they disagree, the site is right and this repo is stale.

The three rules

1. One hue. Green marks an action, and it marks a pass. Nothing else carries colour. Because the accent and the verdict share a hue, a verdict is never carried by colour alone — PASSED, FAILED and WARN are always written out.
2. Dark means evidence. A dark panel says the content is a real run artifact: a log, a report, a terminal. If it is not evidence, it is not dark.
3. Show, don't explain. A visual with a one-line caption and a link to the detail. Prose is the last resort.

Quick Start

Colors

:root {
  --primary: #15803d;        /* Green: actions AND pass verdicts */
  --primary-hover: #116a33;
  --foreground: #151514;     /* Headlines, primary text */
  --body: #3e3f3e;           /* Body copy */
  --muted: #6f706f;          /* Captions, metadata */
  --background: #fafafa;     /* Page. Not pure white */
  --raised: #f1f1f0;         /* Bands, cards, hover fills */
  --border: #e6e6e4;         /* Hairlines */
  --ring: #151514;           /* Focus ring is ink, not green */
  --scope: #131312;          /* Evidence panels */
  --logo-ink: #14181d;       /* The mark */
}

The ramp is neutral — deliberately not a blue-tinted grey and not a warm bone tint. Photography carries the warmth; the interface stays out of the way.

Typography

Three families, each with a job:

• Inter — everything by default
• Source Serif 4 — statement headlines only, never body copy
• JetBrains Mono — machine facts: indices, IDs, verdicts, eyebrows

Element	Size	Weight
H1	clamp(38px, 5vw, 60px)	600
H2	clamp(26px, 3vw, 35px)	600
H3	17px	600
Body	16px	400
Eyebrow	11.5px mono, 0.14em, uppercase	500

600 is the weight ceiling. Nothing is 700 — headlines get their authority from size and tracking.

Logo

Context	Value	File
Light backgrounds	#14181d (ink)	assets/logo-dark.svg
Dark backgrounds	#ffffff	assets/logo-light.svg
Legacy / print	#282650 (purple)	assets/askui-logo-primary.svg

The site sets the mark in ink, not purple — it is monochrome by rule, and a purple mark would be the only exception on any page.

Repository Structure

askui-ci/
├── README.md                 # This file
├── CORPORATE_IDENTITY.md     # Full brand guidelines
├── COMPONENTS.md             # UI component library (HTML/CSS, copy-paste ready)
├── BLAZOR.md                 # Blazor integration guide (BlazorBlueprint + Tailwind)
├── ICONS.md                  # Icon library (Lucide) with HTML, React, Vue & Blazor usage
├── showcase.html             # Interactive demo page
├── assets/
│   ├── logo-dark.svg        # Logo for light backgrounds
│   ├── logo-light.svg       # Logo for dark backgrounds
│   ├── colors.css           # CSS variables & base styles (hex)
│   └── theme-blazor.css     # Blazor theme (OKLCH, with dark mode)
└── examples/
    ├── buttons.html         # Button component examples
    ├── badges.html          # Badge component examples
    ├── cards.html           # Card component examples
    ├── forms.html           # Form component examples
    ├── alerts.html          # Alert component examples
    ├── navigation.html      # Header/footer examples
    └── icons.html           # Icon library preview (click to copy)

UI Components

HTML/CSS

All components are documented in COMPONENTS.md with ready-to-copy HTML and CSS.

Component	Description	Example
Buttons	Primary, secondary, outline, ghost	buttons.html
Badges	Trust badges, status indicators	badges.html
Cards	Feature cards, pricing cards, hover cards	cards.html
Forms	Inputs, selects, checkboxes, textareas	forms.html
Alerts	Success, error, warning, info messages	alerts.html
Navigation	Header nav, footer	navigation.html
CTA Sections	Light and dark call-to-action blocks	showcase.html
Hero Sections	Landing page hero layouts	COMPONENTS.md
Modals	Dialog overlays	COMPONENTS.md
Tables	Data tables	COMPONENTS.md

Blazor (BlazorBlueprint + Tailwind CSS)

For Blazor applications, use BlazorBlueprint components with the AskUI OKLCH theme. Full guide: BLAZOR.md.

HTML Component	Blazor Equivalent
<button class="btn btn-primary">	<Button>
<button class="btn btn-outline">	<Button Variant="ButtonVariant.Outline">
<span class="badge">	<Badge>
<div class="card">	<Card> + <CardHeader> + <CardContent>
<input class="form-input">	<Input @bind-Value="...">
<div class="alert">	<Alert Variant="AlertVariant.Success">
<div class="modal-overlay">	<Dialog>
<table class="table">	<DataTable>
Inline SVG icons	<LucideIcon Name="..." />

Icon Library

60+ SVG icons organized by category. See ICONS.md for full documentation or preview them interactively.

Category	Icons
Navigation	arrow-right, arrow-left, chevron-down, external-link, menu, home
Actions	check, x, plus, search, edit, trash, copy, download, settings, filter
Status	check-circle, x-circle, alert-triangle, info, loader, clock, activity
Security	shield, shield-check, lock, unlock, key, eye, eye-off
Devices	monitor, smartphone, server, cloud, database, terminal, code
Automation	play, pause, zap, cpu, bot, workflow, layers, target
Social	github, linkedin, x-twitter, youtube, mail

Quick Usage

<!-- Inline SVG with currentColor -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M20 6L9 17l-5-5"/>
</svg>

<!-- With custom color -->
<svg style="color: #15803d;" ...>

Usage

With AI Assistants (Cursor / Claude Code)

Reference this repository in your workspace to let the AI apply the design system:

1. Clone to your project:

   git clone https://github.com/askui/corporate-identity.git docs/ci

2. Reference in prompts:

   "Use the AskUI design system from docs/ci/COMPONENTS.md to build a contact form"
   "Apply the button styles from docs/ci/assets/colors.css"
   "Create a pricing page following the cards in docs/ci/examples/cards.html"
   "Build a Blazor dashboard using the guide in docs/ci/BLAZOR.md"
   

3. Add to context:

   • Cursor: Open the component files in Cursor to give the AI full context.
   • Claude Code: Add the repo path to your CLAUDE.md for automatic context.

View the Showcase

# Clone the repository
git clone https://github.com/askui/corporate-identity.git
cd corporate-identity

# Serve locally (Python)
python3 -m http.server 8080

# Open in browser
open http://localhost:8080/showcase.html

Import CSS Variables

HTML/CSS projects:

<link rel="stylesheet" href="assets/colors.css">

Blazor projects (OKLCH + dark mode):

<link rel="stylesheet" href="assets/theme-blazor.css">

See BLAZOR.md for the complete Blazor setup with BlazorBlueprint + Tailwind CSS.

Brand Elements

Primary Button

<button style="
  background: #15803d;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  border: none;
">
  Book a Demo
</button>

Trust Badge

<span style="
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #edf4ed;
  color: #15803d;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 14px;
">
  ✓ ISO 27001 Certified
</span>

Enterprise Credentials

Always include these trust indicators where appropriate:

• ISO 27001 Certified
• GDPR Compliant
• On-Premise Available
• BYOM (Bring Your Own Model) Support
• EU Hosting Available

License

© 2026 AskUI GmbH. All rights reserved.

These brand assets are provided for authorized use only. For usage permissions, contact info@askui.com.