Axisflow AI Operations Template

Design Specification — Axisflow AI Operations Template

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#171717), a muted accent (#F5F5F5). All type is set in 'Inter'. Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: Inter — stack: 'Inter'

Font stacks (most used first)

• 'Inter'
• Inter,sans-serif
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit

Web font sources

• fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Breakpoints

• 640px
• 1280px

Animation & Motion

Easing curves

• cubic-bezier(.8,0,1,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.22,1,.36,1)

Keyframes

@keyframes float { 0%,to{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes bounce { 0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)} }
@keyframes fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes mic-pulse { 0%{transform:scale(1.2);opacity:.7}50%{transform:scale(1.45);opacity:.4}to{transform:scale(1.2);opacity:.7} }
@keyframes ping { 75%,to{transform:scale(2);opacity:0} }
@keyframes pulse-slow { 0%,to{opacity:1}50%{opacity:.8} }
@keyframes shimmer { 0%{transform:translate(-100%)}to{transform:translate(100%)} }
@keyframes small-mic-pulse { 0%{transform:scale(1.2);opacity:.7}50%{transform:scale(1.4);opacity:.4}to{transform:scale(1.2);opacity:.7} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))} }
@keyframes animation-path { 0%{offset-distance:0%}to{offset-distance:100%} }
@keyframes border-beam { 0%{offset-distance:0%}to{offset-distance:100%} }
@keyframes blur-up { 0%{opacity:0;filter:blur(10px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:translateY(0)} }
@keyframes gradient { 0%{background-position:0% center}to{background-position:200% center} }
@keyframes aura-code-chat-row-in { 0%{opacity:0}to{opacity:1} }
@keyframes aura-code-word-mask-in { 0%{opacity:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}to{opacity:1;-webkit-mask-position:0% 0%;mask-position:0% 0%} }

Animations

• aura-canvas-project-page-in .14s ease-out both

Effects

• backdrop-filter: blur(0)
• backdrop-filter: blur(5px)

Source Design Tokens (CSS custom properties)

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 98%;
  --popover-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 20%;
  --radius: .5rem;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 9%;
  --sidebar-primary: 0 0% 20%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 20%;
  --syntax-bg: #1e1e1e;
  --syntax-color: #d4d4d4;
  --slider-track-bg: rgba(0, 0, 0, .05);
  --slider-active-bg: rgba(0, 0, 0, .1);
}

Do's and Don'ts

Do

• Do reserve the accent #F5F5F5 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-surface: #FAFAFA;
  --color-text-primary: #171717;
  --color-text-secondary: #737373;
  --color-border: #E6E6E6;
  --color-primary: #171717;
  --color-secondary: #171717;
  --color-accent: #F5F5F5;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #171717;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #E5E7EB;
  --color-surface-container: #D4D4D4;
  --font-sans: 'Inter';
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --space-xs: 7px;
  --space-sm: 8px;
  --space-md: 16px;
  --tracking-display: -.01em;
  --tracking-label: .025em;
}