AI Tech Premium 2026

Carbon surfaces, teal trust and product-grade clarity.

This updated design system defines a premium AI-native visual language for landing pages, dashboards, pricing, navigation, forms, cards and product UI. The goal is modern 2026 polish without drifting into gaming aesthetics or generic SaaS templates.

Back to home Review content patterns
Core direction
  • Dark mode first, premium and AI-native.
  • Teal as trust signal, indigo for depth, fuchsia for rare emphasis.
  • Readable for marketing, product UI and data-heavy modules.
Font system
HeadlinesSpace Grotesk
UI / bodyInter / Geist
Data / codeIBM Plex Mono

Foundations

Palette, tokens and type hierarchy.

The system starts from a carbon background, controlled layered surfaces and a clear chromatic hierarchy: teal for trust and interaction, indigo for digital depth, fuchsia for rare moments of emphasis.

--color-background-main#0B1117Carbon background for the entire experience.
--color-surface#111A22Primary surface for cards, inputs and panels.
--color-surface-elevated#16212BElevated surface for overlays and higher emphasis UI.
--color-primary#0F6F6EInstitutional brand teal for stable identity moments.
--color-primary-bright#20D6C7Bright teal for CTA, focus and trusted AI highlights.
--color-secondary#5B6CFFDigital indigo for charts, depth and product nuance.
--color-accent#FF4FD8Rare high-attention accent for new/beta/high-impact messaging.
--color-text-primary#F4F7F8Primary text on dark surfaces.
--color-text-secondary#9AA7B2Secondary copy, descriptions and supporting UI.
--color-border#263541Discrete but visible borders and separators.
--color-muted#6F7D89Placeholder, captions and low-emphasis content.
Font system

Space Grotesk drives identity and hero moments.

Headline typography should feel intelligent, forward-looking and structured without becoming playful.

Inter or Geist handle long-form reading, navigation, table content, forms and component labels.

LATENCY / MODEL / TOKEN / ACTIVE / 2026
Exportable tokens
:root {
  --background: #0B1117;
  --surface: #111A22;
  --surface-elevated: #16212B;

  --primary: #0F6F6E;
  --primary-bright: #20D6C7;
  --secondary: #5B6CFF;
  --accent: #FF4FD8;

  --text-primary: #F4F7F8;
  --text-secondary: #9AA7B2;
  --text-muted: #6F7D89;

  --border: #263541;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Geist", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
}
H164-80px / 1.05 / Space Grotesk SemiBold
Build AI workflows your team can trust.
H244-56px / 1.1 / Space Grotesk SemiBold
Trusted automation for regulated environments.
H328-36px / 1.2 / Space Grotesk Medium
Premium product section title
H422-26px / 1.3 / Space Grotesk Medium
Dashboard module heading
Body Large18-20px / 1.6 / Inter Regular
Readable, premium body copy for landing sections and complex explanations.
Body16px / 1.6 / Inter Regular
Standard UI and content text with strong clarity and neutral rhythm.
Caption12-13px / 1.4 / Inter Medium
Used for metadata, helper notes and compact UI support.
Mono / Data13-15px / 1.5 / IBM Plex Mono
MODEL / API / 2026 / ACTIVE / 99.97%

Themes

Three modes for brand, contrast and color-safe accessibility.

The system now supports three explicit themes. The premium brand theme remains the default, while high contrast and color-safe modes remove visual dependence on glow, blur or color-only state meaning.

AI Premium Darkdata-theme="ai-premium"

Default brand theme with carbon background, premium teal identity, indigo depth and controlled fuchsia highlights.

  • Dark-first and AI-native
  • Teal for trust and interaction
  • Decorative effects are optional, never essential
AI Premium Lightdata-theme="ai-premium-light"

Light counterpart of the brand theme: airy surfaces with the same teal identity, indigo depth and restrained accents.

  • Default for light color-scheme preference
  • Teal and indigo tuned for light-surface contrast
  • Same layout, shadows softened
Clean High Contrastdata-theme="clean-contrast"

Maximum readability mode with white background, black text, visible borders and no decorative blur or glow.

  • Black on white with strong borders
  • Links always underlined
  • Designed for maximum contrast and enterprise clarity
Color-Safedata-theme="color-safe"

Accessibility mode that avoids color dependence and uses labels, icons, patterns and border styles for state meaning.

  • Dark monochrome baseline
  • Patterns and text labels for status
  • Readable even in grayscale

Buttons & Status

Buttons, badges and interaction language.

Primary actions must be unambiguous, secondary actions quiet but clear, and badges legible even in dense product surfaces.

PrimarySecondaryGhost
OutlineJoin betaDestructive
Disabled
Buttons

Six button variants with a premium dark UI baseline

The action system is led by bright teal for confidence, while secondary and outline variants preserve hierarchy without looking generic.

  • Primary uses bright teal with dark text for strong contrast.
  • Secondary and outline stay product-oriented and restrained.
  • Accent is rare and should be reserved for beta, demo or launch moments.
AINewBetaSecureAPIEnterpriseAutomated
Badges

AI, secure and product-state badges

Badges stay dark and bordered, then use teal, indigo or fuchsia as semantic foreground accents.

  • Use mono variants for technical tags, API references and machine-oriented data.
  • Avoid long badge text and avoid fuchsia for long-form reading content.
  • Badge color should reinforce meaning, not become decoration.

Brand Surfaces

Navbar, hero and footer direction.

Marketing surfaces should feel product-grade from the start: floating navigation, a strong headline system, subtle AI visual motion and a structured footer that closes the experience with authority.

darioc.ai
ExpertiseCase StudiesArticlesContact
Start a conversation
Navbar

Sticky premium navbar with clear CTA

The navbar uses a semi-transparent carbon surface, muted links and a bright teal CTA that anchors the top-level action.

  • Logo stays white with teal signal in the mark.
  • Active or hover states use bright teal, not pure white.
  • Blur and soft borders preserve a premium floating effect.
AI orchestration platform

Build AI workflows your team can trust.

Premium dark surfaces, clear product structure and subtle digital depth help the interface signal trust and precision.

Start freeView platform
Workflows128 active
Trusted actions99.97%
Hero

AI-native hero with highlighted trust signal

Hero sections should combine strong Space Grotesk typography, a highlighted keyword in teal and a subtle product dashboard or AI visual.

  • Use one highlighted keyword or phrase, not multiple competing accents.
  • Keep the right-side visual abstract, product-grade and not overly illustrative.
  • CTAs should form a clear primary/secondary pair.
darioc.ai

AI strategy, solution architecture and enterprise digital systems with a premium, trusted interface language.

Navigate
HomeExpertiseArticlesPricing
Connect
EmailLinkedInGitHubDesign System
© 2026 Dario Cargnino. All rights reserved.Built for AI trust, performance and scale.
Footer

Structured footer with darker base and teal hover states

The footer should feel slightly deeper than the main canvas, giving the site a confident closing block without becoming heavy.

  • Brand column explains the platform or company in one concise paragraph.
  • Navigation and contact columns stay readable and scannable.
  • Top divider and bottom meta row use the border token for quiet structure.

Core Components

Cards, forms and dashboard patterns.

These components must work in both marketing and product contexts: elegant enough for brand surfaces, disciplined enough for dense operational workflows.

01

Trusted orchestration

Workflow design for AI systems that must remain observable, secure and measurable.

Secure governance

Validation, policy controls and human review for enterprise AI operations.

Featured surface

Subtle teal-indigo edge lighting increases importance without breaking the system.

Cards

Dark cards with readable structure and featured variants

Cards should look confident and elevated without relying on heavy glassmorphism or excessive glow.

  • Default cards use the base surface token, 20px radius and a subtle soft shadow.
  • Featured cards can add teal or indigo edge emphasis, never a loud saturated frame.
  • Icons remain linear, lightweight and product-oriented.
Forms

Inputs optimized for dark clarity and clear focus

Inputs must remain readable without glow dependence: border, placeholder, focus ring and text contrast do the heavy lifting.

  • Background uses the surface token, not pure black.
  • Focus state uses bright teal border and a very controlled outer ring.
  • Keep label hierarchy simple and avoid over-decorating forms.
Active automations128+12.4%
Latency184msModel optimized
New AI alerts03Needs review
WorkflowStatusOwnerTrend
Claims triageActiveOps AI+8.2%
Policy extractionReviewPlatformStable
Agent routingAlertAutomationEscalated
Dashboard UI

Readable metrics, restrained chart color and data-first tables

Product UI should feel precise and scalable: strong metrics, clear rows, restrained borders and meaningful color coding.

  • Main numbers stay white for maximum clarity.
  • Positive signals use teal, informative states use indigo.
  • Fuchsia remains a rare highlight, not a default table color.

Commercial UI

Pricing, editorial cards and icon language.

Commercial modules should feel as premium as the rest of the site while staying operationally clear and easy to scan.

Starter

Starter

49 EUR/mo

  • Workflow builder
  • Secure API access
  • Email support
Choose plan
Most popular

Growth AI

149 EUR/mo

  • Advanced governance
  • Automation analytics
  • Priority support
Start growth
Enterprise

Enterprise

Custom

  • Private deployment
  • Compliance workflows
  • Dedicated architecture support
Talk to sales
Pricing

Dark pricing cards with a clearly featured plan

Pricing cards should preserve the same card language, then elevate the recommended plan with a controlled teal edge and a clear CTA.

  • Use a single highlighted plan per pricing group.
  • Badge for Most popular can use fuchsia or teal, but sparingly.
  • Feature lists should remain highly legible and not collapse into noise.
Editorial + icon

Content previews and icon treatment

The system should still support editorial content and capability storytelling without losing the premium product feel.

  • Use thin linear icons with teal or indigo accents.
  • Article cards should inherit the same surface and border language as product cards.
  • Content previews should remain readable and information-rich, not decorative.

Accessibility First

States, links and controls that work without color alone.

Every interactive pattern must remain understandable when gradients, glow and semantic color cues are removed. The system therefore pairs color with structure, text, icons and border treatment.

Theme:
AI Premium / Clean High Contrast / Color-Safe

Theme switcher

Accessible, persistent and visible theme control

Theme selection lives near the main navigation, opens from an icon menu and stays persisted in local storage.

  • Supports AI Premium, Clean High Contrast and Color-Safe modes.
  • Falls back to user preferences for contrast and color scheme when no manual theme is saved.
  • Supports keyboard navigation and visible focus states.
Success — Automation completed

The workflow finished successfully and results are ready to review.

Warning — Review before continuing

A policy threshold was reached and requires a manual confirmation step.

Error — This field is required

Provide the missing input before running the next AI automation step.

Info — Your model is still training

Performance metrics will update automatically once training has completed.

Status semantics

Success, warning, error and info with multiple signals

State communication combines icon, explicit label, border style and body text so meaning survives monochrome or low-saturation viewing.

  • Success uses a check icon and solid border.
  • Warning uses a triangle icon and dashed border.
  • Error uses an X icon and heavier border.
  • Info uses an info icon and dotted border.
View all articlesRead the accessibility guidelines
Series A — solid line + circle markers
Series B — dashed line + square markers
Series C — dotted line + triangle markers
Links + charts

Accessible links and grayscale-safe data visualization

Links remain visibly underlined, while data series use line style, marker shape and direct labels instead of color alone.

  • Hover increases underline thickness instead of only shifting color.
  • Headline links stay inline, not flex-wrapped, so the underline spans the full wrapped title.
  • Data series use solid, dashed and dotted styles with named labels.
  • The same logic remains readable in grayscale or color-safe mode.

Guidelines

Usage rules that keep the system premium and coherent.

The strongest systems stay disciplined. These guidelines prevent the interface from drifting into noisy neon, generic SaaS flatness or over-designed cyberpunk effects.

Use glow as support, never as structure

Every component should remain readable and distinct even with all glow effects removed.

Keep fuchsia rare and memorable

Reserve the accent for beta, new releases and high-attention highlights, not standard navigation or long-form text.

Favor depth over noise

Use layered surfaces, soft borders and spacing rhythm instead of stuffing components with gradients.

Support both marketing and product clarity

Every pattern should work for a hero section, a pricing block and a dashboard without losing brand coherence.

Never communicate state through color alone

Use icons, text labels, borders, underline treatment, marker shape or layout contrast as a second signal.

Respect motion and contrast preferences

Reduced motion and high contrast modes should preserve complete comprehension with fewer decorative effects.