Factory AI

Style Specimen

Visual Character

Industrial-technical aesthetic with Geist typography, diagonal stripe hover motifs, and bold orange accent color. Clean surfaces with subtle edge vignette effects.

Color Board

Page background
--color-bg-page
Surface
--color-surface-2
Brand primary
--color-brand-primary

Typography

Display / Hero
Heading Large
Heading Medium

Body text sample for standard reading rhythm and paragraph flow.

Secondary / caption text sample.

inline code sample()

Background System

Page Base
Diagonal Stripe
Hero Atmosphere
Muted Section

Atmosphere Demo

Hero-style atmosphere

Combined base, pattern, glow, overlay, and section surface treatment.

Motif Library

Diagonal Stripe
Gridline
Dot Field
Ambient Glow

Cards

Plain Card

Base informational surface.

Interactive Card

Hover to reveal diagonal stripe pattern.

Badge

Stat Card

128

Forms

Navigation

Overview Components Patterns Code

Table

Column Value Status
Typography Extracted Ready
Atmosphere Structured Ready
Motion Partially inferred Check

Prose

This section demonstrates article-style reading content. Links, paragraph rhythm, muted explanatory text, and inline emphasis should all reflect the extracted visual language.

Code Block

example.ts TypeScript 
// Factory AI code style
const motifs = {
  stripe: "diagonal",
  glow: "ambient",
  density: 0.12
};

Progress Loader

Orange progress gradient used for loading states.

Callouts

Info
Informational style sample.
Success
Success style sample.
Warning
Warning style sample.
Danger
Danger style sample.

Overlay

Modal Surface

Use this to demonstrate overlay, scrim, blur, and elevated surface behavior.

Animation System

Keyframe animations extracted from factory.ai CSS. Hover to see interactive effects.

Hover for Stripe
Scale In

enterFromRight

Modal slide in from right

enterFromLeft

Modal slide in from left

slidePattern Animation

Diagonal stripes that slide - the pattern shifts 28.28px on a 45deg angle