---
version: alpha
name: Dayos AI Ops Interface
description: "A case-derived AI operations design system inspired by awarded enterprise AI/SaaS storytelling. It uses a near-black operational canvas, pale neutral text, cool cyan-green system signals, dense telemetry panels, and scroll-story-ready product frames. The style is built for enterprise productivity, multi-cloud operations, and AI workflow pages where abstract capability must become visible state. Motion should reveal causality through scrubbed video, step transitions, and form-state changes, while the static layout remains readable without animation."

colors:
  primary: "#7cf7d4"
  on-primary: "#03110d"
  primary-hover: "#a5ffe7"
  primary-focus: "#39d9b3"
  ink: "#f1f3ec"
  ink-muted: "#c8cec4"
  ink-subtle: "#8d968e"
  ink-tertiary: "#5f6962"
  canvas: "#030504"
  canvas-soft: "#080b09"
  surface-card: "#101411"
  surface-1: "#101411"
  surface-2: "#151b17"
  surface-3: "#1d251f"
  glass: "#101a16"
  hairline: "#26302a"
  hairline-strong: "#3b4a40"
  data-cyan: "#7ad7ff"
  data-lime: "#d6ff6b"
  data-violet: "#9a8cff"
  semantic-success: "#7cf7d4"
  semantic-warning: "#f5d76b"
  semantic-danger: "#ff7b7b"
  inverse-canvas: "#f2f3ed"
  inverse-surface-1: "#ffffff"
  inverse-ink: "#0b0f0d"

typography:
  display-xl:
    fontFamily: Geist
    fontSize: 76px
    fontWeight: 560
    lineHeight: 0.98
    letterSpacing: 0
  display-lg:
    fontFamily: Geist
    fontSize: 54px
    fontWeight: 560
    lineHeight: 1.04
    letterSpacing: 0
  display-md:
    fontFamily: Geist
    fontSize: 38px
    fontWeight: 560
    lineHeight: 1.12
    letterSpacing: 0
  headline:
    fontFamily: Geist
    fontSize: 28px
    fontWeight: 560
    lineHeight: 1.16
    letterSpacing: 0
  card-title:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: 560
    lineHeight: 1.24
    letterSpacing: 0
  subhead:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 460
    lineHeight: 1.45
    letterSpacing: 0
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 420
    lineHeight: 1.55
    letterSpacing: 0
  body:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 420
    lineHeight: 1.55
    letterSpacing: 0
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 430
    lineHeight: 1.48
    letterSpacing: 0
  caption:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 680
    lineHeight: 1.35
    letterSpacing: 0.08em
    textTransform: uppercase
  mono:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 450
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
  xxl: 20px
  pill: 9999px

spacing:
  base: 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 36px
  xxl: 56px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  button-secondary:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  ops-panel:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 18px
  telemetry-card:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 14px
  story-frame:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 24px
  form-transition-panel:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 16px

motion:
  scroll-story:
    purpose: "Reveal system causality and product state, not decoration."
    properties: "transform, opacity, clip-path, CSS variables"
    fallback: "Static keyframes and readable section content for prefers-reduced-motion."
  form-transition:
    purpose: "Show intent capture, validation, routing, and completion as visible state changes."
    duration: "180ms to 420ms"

layout:
  hero: "Full-width operational hero with visible product frame in the first viewport and a next-section hint."
  grid: "12-column desktop grid, 2-column tablet, 1-column mobile; telemetry panels can span 3, 4, 6, or 12 columns."
  density: "High information density is allowed inside panels, but page sections need strong breathing room."
  media: "Product frames, scrubbed video, and system diagrams should show real UI states rather than abstract background art."

guidance:
  do:
    - "Use dark canvas, fine borders, and cyan-green signals to make AI operations feel inspectable."
    - "Keep the product object visible in the first viewport."
    - "Use motion to explain system transitions, routing, validation, and results."
    - "Pair every chart or animation with readable labels and static fallback content."
  dont:
    - "Do not use abstract gradients as the only hero signal."
    - "Do not hide product value inside video-only frames."
    - "Do not use oversized card-heavy marketing sections for operational SaaS pages."
    - "Do not create long pinned scroll segments without skip/fallback behavior."

caseStudy:
  source: "Awwwards Dayos Site of the Day, May 29 2025"
  url: "https://www.awwwards.com/sites/dayos"
  analysis: "The source case frames enterprise productivity and multi-cloud operational AI with scroll scrubbed video, form transition, storytelling, services, and CTA highlights. This resource extracts the reusable pattern: visible product state, operational panels, restrained dark surfaces, and motion used to clarify causality."
---

# Dayos AI Ops Interface

Use this design system for enterprise AI, productivity automation, operational dashboards, multi-cloud orchestration, AI workflow builders, and technical SaaS pages that need to make abstract capability visible.

The system is dark, dense, and inspectable. It should feel like a mission-control surface for AI operations: precise panels, thin borders, cyan-green signals, compact telemetry, and scroll-ready product frames. Motion is allowed, but it must explain state changes. Static content must remain complete when motion is reduced or unavailable.

## Overview

The core idea is visible AI causality. A page using this system should make the hidden parts of AI operations feel inspectable: intent capture, policy checks, routing confidence, queue status, execution logs, and completion evidence. The first viewport must show a real product or operational object such as a UI frame, system map, telemetry panel, workflow state, or service diagram.

This is not a generic dark SaaS skin. The dark canvas creates focus, but the interface earns trust through labels, numbers, fine dividers, state chips, and motion that explains why something changed. If the animation is removed, the product story must still be understandable.

## Colors

### Brand & Accent

- `primary` (#7cf7d4) is the cyan-green operational signal. Use it for primary actions, selected state, live route indicators, focus, and success-adjacent system health.
- `primary-hover` (#a5ffe7) is reserved for hover or active emphasis on the primary action.
- `data-cyan`, `data-lime`, and `data-violet` can differentiate streams, agents, or workflow lanes. Do not turn them into decorative confetti.

### Surface

- `canvas` (#030504) is the primary dark floor.
- `canvas-soft` (#080b09), `surface-1` (#101411), `surface-2` (#151b17), and `surface-3` (#1d251f) create stacked operational panels.
- `glass` (#101a16) is for transition panels, overlays, and form-state modules that need a slightly translucent feel without becoming decorative glassmorphism.

### Text

- `ink` (#f1f3ec) is for primary copy and headings.
- `ink-muted` (#c8cec4) is for body copy.
- `ink-subtle` (#8d968e) and `ink-tertiary` (#5f6962) are for metadata, timestamps, helper text, and disabled states.

### Hairlines & Borders

- `hairline` (#26302a) is the default divider.
- `hairline-strong` (#3b4a40) is for active product frames, focused telemetry panels, and important grid boundaries.

### Semantic

- `semantic-success` mirrors the primary signal for verified or healthy states.
- `semantic-warning` (#f5d76b) indicates review, partial block, or queue attention.
- `semantic-danger` (#ff7b7b) indicates failed validation, risky route, or blocked execution.

## Typography

### Font Family

Use a precise modern sans stack for interface copy and a mono stack for data. Geist, Inter, and JetBrains Mono are good matches when available; otherwise use system sans and `ui-monospace` fallbacks with similar metrics.

### Hierarchy

- `display-xl`: 76px/0.98 for high-confidence hero statements.
- `display-lg`: 54px/1.04 for section-level storytelling.
- `display-md`: 38px/1.12 for compact hero or feature headings.
- `headline`: 28px/1.16 for panel groups.
- `card-title`: 20px/1.24 for operational cards.
- `body`: 15px/1.55 for readable explanations.
- `caption`: 11px uppercase metadata labels.
- `mono`: 12px/1.45 for logs, IDs, metrics, queue state, timestamps, and confidence values.

### Principles

Keep letter spacing at `0` for most text. Use uppercase tracking only for compact labels and system tags. Large headings should feel precise rather than loud; avoid extra-heavy weights that make the system feel like gaming or crypto UI.

### Note on Font Substitutes

If Geist or JetBrains Mono is unavailable, use system UI and `ui-monospace`. Preserve line height, tabular numerals where possible, and the contrast between narrative sans and operational data.

## Layout

### Spacing System

Use an 8px-based rhythm for panels and a wider 56px to 96px rhythm for storytelling sections. Dense UI can sit inside panels; page sections still need air so the product narrative remains readable.

### Grid & Container

Use a 12-column desktop grid with telemetry panels spanning 3, 4, 6, or 12 columns. Collapse to two columns on tablet and one column on mobile. The hero should be full-width but still reveal a product frame or system map in the first viewport.

### Whitespace Philosophy

Whitespace is used to separate operational chapters, not to create a luxury landing-page mood. Inside panels, density is acceptable when labels, dividers, and mono data make the information scannable.

## Elevation & Depth

Depth comes from surface stacking, border contrast, soft shadow around major product frames, and subtle glow only around live system signals. Avoid heavy card shadows, frosted-glass decoration, and blurry gradient orbs.

## Shapes

Small operational controls use 4px to 8px radius. Telemetry cards and panels use 8px to 10px. Large product frames can use 14px. Fully rounded pills are allowed for state chips and compact filters only.

## Components

### Buttons

Primary buttons use the cyan-green signal with dark text. Secondary buttons sit on `surface-1` with a hairline border. Avoid multiple primary actions in the same viewport.

### Cards & Containers

Use `ops-panel`, `telemetry-card`, and `story-frame` components to distinguish operating surfaces from narrative sections. Panels should include labels, values, and state, not generic marketing blurbs.

### Inputs & Forms

Form transition panels should show intent capture, validation, routing, and completion as explicit states. Never hide validation inside animation alone.

### Navigation

Navigation can be compact and low-contrast, but current location and selected state must be visible through accent, border, or state chip. Do not rely on scroll choreography as the only navigation.

### Signature Components

Signature modules include workflow maps, routing confidence cards, telemetry grids, execution logs, policy checklists, and scrub-ready story frames with static poster states.

## Do's and Don'ts

### Do

- Start the first viewport with a real product object, operational state, workflow map, telemetry panel, or service diagram.
- Use the primary accent only for operational signals, focus, selected state, and primary action.
- Use compact metadata labels and mono numbers to make dense information scannable.
- For scroll-story sections, write the section question before implementing the animation.
- Provide `prefers-reduced-motion` fallbacks for scrubbed video, canvas, and stepped transitions.

### Don't

- Do not use abstract gradients as the only hero signal.
- Do not hide product value inside video-only frames.
- Do not use oversized card-heavy marketing sections for operational SaaS pages.
- Do not create long pinned scroll segments without skip, static, or reduced-motion behavior.
- Do not apply cyan-green to every decorative edge; it must keep system meaning.

## Responsive Behavior

### Breakpoints

- Above 1180px: use the full 12-column system and side-by-side product frame storytelling.
- Below 960px: collapse story/product pairings into stacked sections and preserve panel ordering.
- Below 720px: use a single column, reduce display sizes, keep touch targets at least 40px, and avoid scroll-jacked sections.

### Touch Targets

Buttons, filters, and step controls should keep a minimum 40px hit area. Dense telemetry can shrink visually, but interactive controls cannot.

### Collapsing Strategy

Collapse dense grids by priority: live state first, risk next, logs and supporting metadata later. Never make the mobile page begin with abstract background art while the product object appears below the fold.

### Image Behavior

Product frames, scrubbed videos, and diagrams should preserve readable UI details. Use static poster states for reduced motion and for browsers that cannot run the intended animation.

## Iteration Guide

When generating a page from this resource, first define the operational object and the state transitions it must explain. Then choose the frame: dashboard, workflow builder, incident review, AI routing map, or service automation. Build tokens around the object, not around generic dark decoration.

Review the page with three questions:

1. Can a user identify the product object in the first viewport?
2. Can each animated transition be explained as state, routing, validation, or result?
3. Does the reduced-motion version preserve the same information path?

## Known Gaps

- The exact source typography and animation easing are inferred from observable patterns, not from proprietary implementation files.
- Mobile behavior is derived from public case evidence and interface principles; verify with real product content before shipping.
- The light preview is an intentional alternate polarity for reuse in mixed admin products, not proof that the original case shipped a full light mode.