A comprehensive showcase of our matte-metal AI workspace: neutral graphite surfaces, muted steel-blue actions, and soft ice highlights.
text-5xl font-boldtext-4xl font-semiboldtext-3xl font-semiboldBody Large - DM Sans provides excellent readability with a modern, clean aesthetic perfect for our design system.
text-lgBody Regular - The default body text size for most content.
text-baseBody Small - Used for supporting text and captions.
text-sm text-muted-foregroundconst code = "Fira Code for monospace text";font-mono
Primary
Steel Indigo #7783A1Secondary
Graphite #1C2027Accent
Mist Blue #89AAB6Muted
Subtle BackgroundMidnight
#101216Graphite
#1C2027Steel Indigo
#7783A1Mist Blue
#89AAB6Wasserstoff Blonde
#C7B27ACloud
#EEF0F5Tailwind Connect — button from Tailwind CSS Connect website
Blue-to-lime-green gradient icons derived from the CI tokens (--primary → --primary-spectrum-lime). The gradient is painted on the icon strokes themselves — no background box. The admin backend uses variant="lime-blue" (lime → blue).
variant="blue-lime"Diagonal blue-to-lime-green stroke gradient.
variant="lime-blue"Diagonal lime-green-to-blue stroke gradient.
variant="vertical"Top-to-bottom blue-to-lime-green stroke gradient.
variant="vivid"Cyan-to-lime-green stroke gradient for extra contrast.
This card demonstrates the milk glass aesthetic with translucent backgrounds and soft borders.
This card includes a footer section with action buttons, perfect for billing, settings, or confirmation dialogs.
•••• 4242
Expires 12/2025
Nachtshooting zwischen Oberleitungen mit Spiegelungen im Zugfenster.
Morgendunst am Depot mit seitlichem Licht auf den Waggonkanten.
Step 1 active (no selections yet)
Step 1 active, step 2 has prior selections
Step 2 active, nothing selected
Step 2 active, 5 selected
Three-step flow, step 3 active
Complete contact form pattern with validation, error handling, and success states.
<div className="space-y-2">
<Label htmlFor="field">Label</Label>
<Input id="field" ... />
{error && <p className="text-destructive">...</p>}
</div>const validate = () => {
const errors = {};
if (!field) errors.field = "Required";
return Object.keys(errors).length === 0;
};3D cube spinner used during route transitions (e.g. when opening the AI Suite).
Overview content goes here. This demonstrates how tabs work with our design system.
Transient notifications (via Sonner). Use the same semantic types as Alerts: success = primary/steel-blue, error = destructive, info = muted. Use toast.success(), toast.error(), and toast.info() for user feedback after actions. Do not overuse—prefer inline feedback for forms.
| User | Status | Role | Actions |
|---|---|---|---|
JD John Doe john@example.com | Active | Admin | |
AS Alice Smith alice@example.com | Active | User | |
BJ Bob Johnson bob@example.com | Pending | User |
The Favorites Modal is a full-screen modal using CSS variables for all colors. It demonstrates proper use of the destructive color for accent elements like hearts.
.glass-effectTranslucent with backdrop blur for a frosted glass appearance
bg-cardDefault card background with consistent theming
Beautiful charts using Recharts with our matte metal and milk glass design system
Common patterns used in billing and settings pages
| Invoice | Date | Amount | Status |
|---|---|---|---|
| INV-2025-001 | Jan 1, 2025 | $29.00 | Paid |
| INV-2024-012 | Dec 1, 2024 | $29.00 | Paid |
Receive updates about your account
Add an extra layer of security
Promotional content and special offers
A modern, responsive footer component with navigation links, social media icons, and legal information
import { Footer } from "@/components/footer";
export default function Page() {
return (
<div>
{/* Your page content */}
<Footer />
</div>
);
}Used on /ai-suite/templates. Cards sit in a grid-cols-4 auto-rows-[200px] bento layout with varying col-span and row-span values for visual hierarchy. Each card uses a gradient accent over a glass-effect surface.
Studio-quality shots with clean backgrounds and perfect lighting for e-commerce.
Studio white background, professional product shot, [product], dramatic side lighting
Professional portraits with flattering light.
Epic landscapes and characters.
Stunning interior and exterior architecture visualizations.
// Bento grid container
<div className="grid grid-cols-4 auto-rows-[200px] gap-4">
{/* Featured card — 2 columns × 2 rows */}
<div className="col-span-2 row-span-2 relative rounded-2xl border border-border overflow-hidden ...">
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-primary/5" />
<div className="absolute inset-0 glass-effect" />
{/* content */}
</div>
{/* Standard card — 1×1 */}
<div className="col-span-1 row-span-1 ...">…</div>
{/* Wide card — 2×1 */}
<div className="col-span-2 row-span-1 ...">…</div>
</div>Config-driven controls for VIP-tier ComfyUI models. Both components read their entire shape from ai_models.configuration, so a workflow with a different LoRA roster or sampler ranges needs no frontend change.
One row per LoRA slot with an on/off switch and a weight slider that only appears when the slot is enabled. Scrolls past ~8 entries and shows an active count with a reset-to-defaults action.
Collapsed by default with a summary of the pinned values. Expands to steps / CFG / denoise / eta sliders plus sampler and scheduler dropdowns, and one-click presets from the workflow's recommended settings. Sliders commit on release so dragging never re-renders the parent form.
Resulting task parameters
{
"steps": 8,
"cfg": 1,
"denoise": 1,
"eta": 0,
"samplerName": "linear/euler",
"scheduler": "simple",
"secondPass": false,
"secondPassDenoise": 0.2,
"upscalerEnabled": true,
"vipLora2": true,
"vipLora2Strength": 1,
"vipLora4": true,
"vipLora4Strength": 0.5,
"vipLora6": true,
"vipLora6Strength": 1.5,
"vipLora8": false,
"vipLora8Strength": 1
}These keys map 1:1 to the ComfyUI node mappings, so the same controls drive any VIP workflow without frontend changes.
Components for the team page — Slack-style member cards and team overview UI.
Displays a team member with their avatar, name, email, and role badge. Supports role color theming and user-type indicators.
Anna Müller
anna@example.com
Ben Schmidt
ben@example.com
Clara Weber
clara@example.com
David Koch
david@example.com
Eva Braun
eva@example.com
import { TeamMemberCard } from "@/components/team/TeamMemberCard";
<TeamMemberCard
member={{
userId: "abc-123",
name: "Anna Müller",
email: "anna@example.com",
avatarUrl: null, // or a URL string
userType: "team-lead", // "admin" | "team-lead" | "user" | "guest"
roleName: "Lead Designer",
roleColor: "#7783A1", // optional hex color for role badge
}}
/>The left-rail sidebar used on the team page. Shows team identity, collapsible subgroups, and a compact member list.
Layout
Sidebar (hidden on mobile) + flex-1 main content area with responsive member card grid.
Floating action bar that appears at the bottom of the screen when items are selected in the AI Suite queue.
Uses glass-effect + rounded-2xl. Renders fixed at the bottom of the viewport when selectedTaskIds.size > 0.
Explorer-style dataset management at /ai-suite/library. Folder grid + dataset cards + recent list. All interactive elements use shadcn Card, AlertDialog, Skeleton, and Label.
Plain nav with ChevronRight separators. Ancestor segments are clickable buttons; the current segment is plain text.
grid-cols-2…6 responsive grid. Each folder is a shadcn Card with a DropdownMenu (rename / delete) that appears on hover. The dashed card triggers inline creation.
Shadcn Card with hover state and a context DropdownMenu.
Flux Portraits
High-quality portrait shots
vor 2 Min.
Produkt-Shots
vor 3 Std.
Kampagne Q1
Spring campaign assets
vor 2 Tagen
Each row is a shadcn Card with icon, title, optional folder path, and relative timestamp.
Flux Portraits
Produkte
Kampagne Q1
Hintergrundbilder
Projekte / Flux
Inline editable key/value rows. Field name column is fixed-width; value column stretches. Delete button appears on row hover.
Responsive square-thumbnail grid. Hover shows dark overlay with ExternalLink + delete buttons. Clicking a thumbnail opens a full-screen lightbox.
Shadcn Skeleton used for all loading states — folder grid, dataset list, and recent rows.
Social Publishing
Components for posting generated images to connected social accounts. The UI talks only to
lib/integrations/social-publishing, so it carries no knowledge of any one provider's request format.ZernioWordmark / ZernioMark
The partner logo, inlined from
public/images/logo/zernio/logo-primary.svg. Brand red stays fixed in both themes;monochromeswitches tocurrentColorfor dense or disabled placements. The wordmark is wide — size it by width; the mark is square and fills its box.Wordmark
Mark (48px)
Mark, monochrome
PlatformIcon
Icon for a platform slug. Only platforms lucide ships a glyph for get one — anything else, including a slug the provider adds later, falls back to a neutral globe rather than breaking the list.
ShareToSocialDialog
Account picker grouped by connection, caption field, and a post-now / schedule / draft selector. Every selected image goes into one post per connection, which is what carousel-capable platforms expect. With nothing connected it shows an empty state pointing at Settings → Connections.