Official brand guidelines and design system for AskUI
Website • Quick Start • Brand Guidelines • UI Components • Blazor Guide • Icon Library • Live Demo
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.
:root {
--primary: #16a34a; /* Primary Green */
--foreground: #09090b; /* Text/Headings */
--muted: #71717a; /* Secondary text */
--border: #e4e4e7; /* Borders */
--background: #ffffff; /* Background */
--logo-purple: #282650; /* Logo color */
}- Font Family: Inter
- Display: 60px / 700 weight
- H1: 48px / 700 weight
- H2: 36px / 600 weight
- Body: 16px / 400 weight
| Context | File |
|---|---|
| Light backgrounds | assets/logo-dark.svg |
| Dark backgrounds | assets/logo-light.svg |
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)
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 |
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="..." /> |
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 |
<!-- 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: #16a34a;" ...>Reference this repository in your workspace to let the AI apply the design system:
-
Clone to your project:
git clone https://github.com/askui/corporate-identity.git docs/ci
-
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" -
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.mdfor automatic context.
# 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.htmlHTML/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.
<button style="
background: #16a34a;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
border: none;
">
Book a Demo
</button><span style="
display: inline-flex;
align-items: center;
gap: 6px;
background: #f0fdf4;
color: #16a34a;
padding: 6px 12px;
border-radius: 9999px;
font-size: 14px;
">
✓ ISO 27001 Certified
</span>Always include these trust indicators where appropriate:
- ISO 27001 Certified
- GDPR Compliant
- On-Premise Available
- BYOM (Bring Your Own Model) Support
- EU Hosting Available
© 2026 AskUI GmbH. All rights reserved.
These brand assets are provided for authorized use only. For usage permissions, contact info@askui.com.