Feature Sections

18 Variants

Engineered for Mathematical Consistency

From design token system to automated verification gates, Shavin eliminates visual entropy across enterprise applications.

Concentric Surface Mathematics

Nested containers automatically compute inner radii based on outer padding boundaries, guaranteeing zero corner distortion.

concentric-geometry.ts

auto-layout

Outer R: 16px

Inner R: 12px

consistent design

Real-time daemon verification continuously audits contrast ratios and rejects unapproved hex literals.

Audit Verification

Passed

100.0% Purity

WCAG 2.1 AAA Compliant

138 Primitives

Strict WCAG AAA token compliance

Zero Runtime CSS

Atomic Tailwind compiler presets

MCP Native

Zero-hallucination AI assistant sync

Bento Grid 3-Column

Engineered from First Principles

Every primitive satisfies strict token decoupling, concentric mathematics, and real-time verification gates.

Interactive Feature Cards

(

{item.title}

{item.desc}

))}

Icon Matrix Features

adaptive radii computed at compile time

Eliminate awkward optical gaps between nested surfaces. Shavin automatically applies the layout engine: inner corners adapt dynamically to their container's padding.

concentric-nesting.engine

auto-layout

Outer Container: p-5 (20px)

rounded-panel-p5

Nested Interactive Surface

Concentric

bridge-daemon:7428

connected

AST verification

100% token pure

Contrast compliance

WCAG 2.1 AAA

Literal hex detections

0 violations

Audit Status

PASS: 0 errors

Deterministic design tokens that never drift

Never worry about AI assistants inventing phantom hex codes or violating accessibility standards. The MCP Server daemon catches regressions at authoring time.

Alternating Story Split

Everything You Need for Enterprise UI

Built from the ground up for speed, mathematical consistency, and zero-hallucination AI pair programming.

Feature Grid Matrix

New Feature

AI Automation Workflow

Connect your software tools to automated AI agents. Trigger multi-step workflows automatically on repository changes.

Feature Action Card

Architecture

@shavin/ui Spec Guide

WCAG AAA

Building Two-Tier Token Engines

Decouple theme-independent foundation palettes from role-based semantic variables for zero-breakage runtime custom property mutations.

Alex Rivera

Media & Image Hero Card

Enterprise Plan

Popular

Unlimited team seats, dedicated MCP server deployment, zero-hallucination AI agents, and custom brand theme presets.

24/7 Priority Dedicated Support

Unlimited AI Workspace Tokens

$99 / mo

Inset Style Banner Card

Sign in

Enter your credentials to access your account.

Password

Invalid input — please check and try again

Remember me

Forgot password?

Don't have an account? Sign up

Engineered for Mathematical Consistency

From design token system to automated verification gates, Shavin eliminates visual entropy across enterprise applications.

Concentric Surface Mathematics

Nested containers automatically compute inner radii based on outer padding boundaries, guaranteeing zero corner distortion.

concentric-geometry.ts

auto-layout

Outer R: 16px

Inner R: 12px

consistent design

Real-time daemon verification continuously audits contrast ratios and rejects unapproved hex literals.

Audit Verification

Passed

100.0% Purity

WCAG 2.1 AAA Compliant

138 Primitives

Strict WCAG AAA token compliance

Zero Runtime CSS

Atomic Tailwind compiler presets

MCP Native

Zero-hallucination AI assistant sync

Bento Grid 3-Column

Engineered from First Principles

Every primitive satisfies strict token decoupling, concentric mathematics, and real-time verification gates.

Interactive Feature Cards

(

{item.title}

{item.desc}

))}

Icon Matrix Features

adaptive radii computed at compile time

Eliminate awkward optical gaps between nested surfaces. Shavin automatically applies the layout engine: inner corners adapt dynamically to their container's padding.

concentric-nesting.engine

auto-layout

Outer Container: p-5 (20px)

rounded-panel-p5

Nested Interactive Surface

Concentric

bridge-daemon:7428

connected

AST verification

100% token pure

Contrast compliance

WCAG 2.1 AAA

Literal hex detections

0 violations

Audit Status

PASS: 0 errors

Deterministic design tokens that never drift

Never worry about AI assistants inventing phantom hex codes or violating accessibility standards. The MCP Server daemon catches regressions at authoring time.

Alternating Story Split

Everything You Need for Enterprise UI

Built from the ground up for speed, mathematical consistency, and zero-hallucination AI pair programming.

Feature Grid Matrix

New Feature

AI Automation Workflow

Connect your software tools to automated AI agents. Trigger multi-step workflows automatically on repository changes.

Feature Action Card

Architecture

@shavin/ui Spec Guide

WCAG AAA

Building Two-Tier Token Engines

Decouple theme-independent foundation palettes from role-based semantic variables for zero-breakage runtime custom property mutations.

Alex Rivera

Media & Image Hero Card

Enterprise Plan

Popular

Unlimited team seats, dedicated MCP server deployment, zero-hallucination AI agents, and custom brand theme presets.

24/7 Priority Dedicated Support

Unlimited AI Workspace Tokens

$99 / mo

Inset Style Banner Card

Sign in

Enter your credentials to access your account.

Password

Invalid input — please check and try again

Remember me

Forgot password?

Don't have an account? Sign up

Bento Grid 3-Column

Modern asymmetric Bento grid layout displaying 3 distinct product capabilities with clean visual hierarchy.

>npx @shavin/cli add features-bento-grid

Engineered for Mathematical Consistency

From design token system to automated verification gates, Shavin eliminates visual entropy across enterprise applications.

Concentric Surface Mathematics

Nested containers automatically compute inner radii based on outer padding boundaries, guaranteeing zero corner distortion.

concentric-geometry.ts

auto-layout

Outer R: 16px

Inner R: 12px

consistent design

Real-time daemon verification continuously audits contrast ratios and rejects unapproved hex literals.

Audit Verification

Passed

100.0% Purity

WCAG 2.1 AAA Compliant

138 Primitives

Strict WCAG AAA token compliance

Zero Runtime CSS

Atomic Tailwind compiler presets

MCP Native

Zero-hallucination AI assistant sync

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#bento#features#grid

Interactive Feature Cards

Three equal-width feature cards with hover states, semantic icons, and action links.

>npx @shavin/cli add features-interactive-cards

Engineered from First Principles

Every primitive satisfies strict token decoupling, concentric mathematics, and real-time verification gates.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#cards#interactive

Icon Matrix Features

Dense 2x2 icon matrix with detailed explanations for technical architectures.

>npx @shavin/cli add features-icon-matrix

(

{item.title}

{item.desc}

))}

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#matrix#dense

Alternating Story Split

Narrative feature block with alternating content and media illustration sections.

>npx @shavin/cli add features-story-split

adaptive radii computed at compile time

Eliminate awkward optical gaps between nested surfaces. Shavin automatically applies the layout engine: inner corners adapt dynamically to their container's padding.

concentric-nesting.engine

auto-layout

Outer Container: p-5 (20px)

rounded-panel-p5

Nested Interactive Surface

Concentric

bridge-daemon:7428

connected

AST verification

100% token pure

Contrast compliance

WCAG 2.1 AAA

Literal hex detections

0 violations

Audit Status

PASS: 0 errors

Deterministic design tokens that never drift

Never worry about AI assistants inventing phantom hex codes or violating accessibility standards. The MCP Server daemon catches regressions at authoring time.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#story#split#narrative

Feature Grid Matrix

Structured multi-tier matrix of platform capabilities with token-strict icon badges.

>npx @shavin/cli add feature-grid-matrix

Everything You Need for Enterprise UI

Built from the ground up for speed, mathematical consistency, and zero-hallucination AI pair programming.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#matrix#grid

Feature Action Card

Feature showcase card with icon, title, description, and action button.

>npx @shavin/cli add card-feature-action

New Feature

AI Automation Workflow

Connect your software tools to automated AI agents. Trigger multi-step workflows automatically on repository changes.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#card#feature#action

Media & Image Hero Card

Card with media/image header, content body, and footer actions.

>npx @shavin/cli add card-media-hero

Architecture

@shavin/ui Spec Guide

WCAG AAA

Building Two-Tier Token Engines

Decouple theme-independent foundation palettes from role-based semantic variables for zero-breakage runtime custom property mutations.

Alex Rivera

When to Use & Guidelines

Place above the fold as the primary visual anchor of the page.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#card#media#hero

Inset Style Banner Card

Card with inset banner section for promotional or informational messaging.

>npx @shavin/cli add card-inset-banner

Enterprise Plan

Popular

Unlimited team seats, dedicated MCP server deployment, zero-hallucination AI agents, and custom brand theme presets.

24/7 Priority Dedicated Support

Unlimited AI Workspace Tokens

$99 / mo

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#card#banner#inset

Sign In Card

>npx @shavin/cli add sign-in-card

Sign in

Enter your credentials to access your account.

Password

Invalid input — please check and try again

Remember me

Forgot password?

Don't have an account? Sign up

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#studio-authored

Bento Grid 3-Column

Modern asymmetric Bento grid layout displaying 3 distinct product capabilities with clean visual hierarchy.

>npx @shavin/cli add features-bento-grid

Engineered for Mathematical Consistency

From design token system to automated verification gates, Shavin eliminates visual entropy across enterprise applications.

Concentric Surface Mathematics

Nested containers automatically compute inner radii based on outer padding boundaries, guaranteeing zero corner distortion.

concentric-geometry.ts

auto-layout

Outer R: 16px

Inner R: 12px

consistent design

Real-time daemon verification continuously audits contrast ratios and rejects unapproved hex literals.

Audit Verification

Passed

100.0% Purity

WCAG 2.1 AAA Compliant

138 Primitives

Strict WCAG AAA token compliance

Zero Runtime CSS

Atomic Tailwind compiler presets

MCP Native

Zero-hallucination AI assistant sync

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#bento#features#grid

Interactive Feature Cards

Three equal-width feature cards with hover states, semantic icons, and action links.

>npx @shavin/cli add features-interactive-cards

Engineered from First Principles

Every primitive satisfies strict token decoupling, concentric mathematics, and real-time verification gates.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#cards#interactive

Icon Matrix Features

Dense 2x2 icon matrix with detailed explanations for technical architectures.

>npx @shavin/cli add features-icon-matrix

(

{item.title}

{item.desc}

))}

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#matrix#dense

Alternating Story Split

Narrative feature block with alternating content and media illustration sections.

>npx @shavin/cli add features-story-split

adaptive radii computed at compile time

Eliminate awkward optical gaps between nested surfaces. Shavin automatically applies the layout engine: inner corners adapt dynamically to their container's padding.

concentric-nesting.engine

auto-layout

Outer Container: p-5 (20px)

rounded-panel-p5

Nested Interactive Surface

Concentric

bridge-daemon:7428

connected

AST verification

100% token pure

Contrast compliance

WCAG 2.1 AAA

Literal hex detections

0 violations

Audit Status

PASS: 0 errors

Deterministic design tokens that never drift

Never worry about AI assistants inventing phantom hex codes or violating accessibility standards. The MCP Server daemon catches regressions at authoring time.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#story#split#narrative

Feature Grid Matrix

Structured multi-tier matrix of platform capabilities with token-strict icon badges.

>npx @shavin/cli add feature-grid-matrix

Everything You Need for Enterprise UI

Built from the ground up for speed, mathematical consistency, and zero-hallucination AI pair programming.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#features#matrix#grid

Feature Action Card

Feature showcase card with icon, title, description, and action button.

>npx @shavin/cli add card-feature-action

New Feature

AI Automation Workflow

Connect your software tools to automated AI agents. Trigger multi-step workflows automatically on repository changes.

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#card#feature#action

Media & Image Hero Card

Card with media/image header, content body, and footer actions.

>npx @shavin/cli add card-media-hero

Architecture

@shavin/ui Spec Guide

WCAG AAA

Building Two-Tier Token Engines

Decouple theme-independent foundation palettes from role-based semantic variables for zero-breakage runtime custom property mutations.

Alex Rivera

When to Use & Guidelines

Place above the fold as the primary visual anchor of the page.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#card#media#hero

Inset Style Banner Card

Card with inset banner section for promotional or informational messaging.

>npx @shavin/cli add card-inset-banner

Enterprise Plan

Popular

Unlimited team seats, dedicated MCP server deployment, zero-hallucination AI agents, and custom brand theme presets.

24/7 Priority Dedicated Support

Unlimited AI Workspace Tokens

$99 / mo

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#card#banner#inset

Sign In Card

>npx @shavin/cli add sign-in-card

Sign in

Enter your credentials to access your account.

Password

Invalid input — please check and try again

Remember me

Forgot password?

Don't have an account? Sign up

When to Use & Guidelines

Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.
Accessible by default with proper ARIA roles and keyboard navigation.

#studio-authored