D
Dehlya Studio
Creative development
light mode · 2026

DATA CYCLE

Engineering docs with opinions

For the technical writer who treats documentation as architecture. Warm cream canvas, sharp zero-radius edges, monospace labels announcing themselves in uppercase, a thin forest-green topline reminding you someone cared. Medallion architecture — bronze to silver to gold — without the dashboard cliche.

Designer
Dehlya Studio
Year
2026
Mode
LIGHT
ID
datacycle

Overview

Inspiration

Medallion data architecture, Stripe docs, Linear changelogs, engineering whitepapers, HES-SO technical reports.

Key Features
  • Warm cream + black ink
  • Sharp rectangular edges
  • Monospace UI labels
  • Bronze/silver/gold medallion accent
Use Cases
  • Data project docs
  • Engineering portfolios
  • Technical case studies
  • Internal dashboards
About this theme

This theme is part of AuraFlow CSS — a collection of drop-in design systems by Dehlya Studio. Each theme is a complete set of CSS custom properties you can install via npm install auraflowor drop in from unpkg. Pure CSS, zero runtime, framework-agnostic.

Color System

The color palette for Data Cycle is designed to create a cohesive and visually appealing experience. Each color has been carefully selected to work harmoniously together and convey the theme’s unique personality.

Primary Action
Secondary Action
Accent Elements
Text Colors
Primary Text
Secondary Text
Muted Text

Typography

Typography is a fundamental element of the Data Cycle theme. The font choices, sizes, and styles work together to create a distinctive visual hierarchy and reading experience.

Display

Bold, impactful headings for maximum visual impact.

Font
Inter
Weight
800
Size
4.5rem
Line height
1
Tracking
-0.02em
Display
Heading

Section headers with distinctive character.

Font
Inter
Weight
700
Size
2rem
Line height
1.15
Tracking
-0.01em
Heading
Body

Clean, readable text for content.

Font
Inter
Weight
400
Size
1rem
Line height
1.6
Tracking
0.01em
The path to enlightenment is paved with bold design choices.
Mono

Monospaced text for code and metadata.

Font
Roboto Mono
Weight
500
Size
0.875rem
Line height
1.5
Tracking
0
const theme = "auraflow"

Components

A small library of common UI components rendered with Data Cycle’s tokens — buttons, form fields, cards, badges. Drop-in preview of how your interface would feel.

Buttons
Form Inputs
Checkbox
Card
Card title
Nested card using the surface-alt token. Swap themes and it re-skins automatically.
Badges & counters
newprobetaalpha
01

Real-world Previews

See what Data Cycle looks like on real product surfaces. Each preview is rendered entirely with this theme’s design tokens — swap themes and the same layouts re-skin automatically.

preview.datacycle.dashboard.local
⌘K
DH
Wednesday · April 12, 2026

Good morning, Dehlya

Revenue
$24.8k
+12.4%
Orders
1,284
+4.2%
Churn
2.1%
-0.3%
NPS
71
+3
Revenue trend
Last 14 days
Apr 1Apr 7Today
Activity
  • M
    Maya R. shipped a new release
    2m ago
  • K
    Kenji resolved 4 bug reports
    12m ago
  • L
    Léa closed the Q2 retro
    1h ago
  • O
    Omar flagged the auth middleware
    3h ago
Active projects
ProjectStatusProgressDue
Auth rewriteactive
82%
Apr 22
Billing v2active
45%
May 03
Onboarding revampreview
95%
Tomorrow
Search relevanceplanning
20%
May 10
Every pixel above is driven by CSS variables. Nothing is hardcoded.