Framework-Agnostic · Tailwind v4.2 · CSS-first
ChroniclefieldsDesign System
Cinematic tokens and components using Tailwind v4's @theme API. One stylesheet, any framework.
Tailwind v4.2
CSS-first @theme
Angular · React · Vue
Architecture
How It Works
Tailwind v4 eliminates tailwind.config.js.
Design tokens live in CSS via @theme,
component classes in @layer components.
The same stylesheet works in any framework — just import it.
/* theme.css — Tailwind v4 CSS-first configuration */
@theme {
--color-cf-gold : #d4af37 ; /* → bg-cf-gold, text-cf-gold */
--color-cf-primary : var(--color-cf-gold) ; /* semantic alias */
--font-serif : "Cormorant Garamond", serif ;
--font-sans : "Inter", sans-serif ;
}
/* Import in your app */
@import "@chroniclefields/design-system/styles.css" ;
/* Or import layers individually */
@import "@chroniclefields/design-system/theme.css" ;
@import "@chroniclefields/design-system/base.css" ;
@import "@chroniclefields/design-system/components.css" ;
Design Tokens
Colors
Background / Surface (glassmorphism)
cf-surface-elevated
white/8%
Primary — Cinematic Gold
cf-gold / cf-primary
#d4af37
Secondary — Magic Orange & Atmospheric Blue
cf-accent / cf-secondary
#ff4e00
Text / Border
cf-text-secondary
white/60%
Design Tokens
Typography
7.5rem / 300
Discover
3rem / 300
Popular Chapters
1.5rem / 400
The Last Chronicle
1.25rem / italic
Where every story finds its field
11px / 700 UPPER
Get Started
base / 300
A platform that specializes in creating compelling, data-driven chronicles and storytelling experiences.
sm / italic
Our experts curate amazing narratives for you to explore and discover.
/* Tailwind utility classes from @theme */
<h1 class="font-serif text-5xl font-light" > Heading</h1>
<p class="font-sans text-cf-text-secondary font-light" > Body</p>
/* Serif: font-serif → Cormorant Garamond */
/* Sans: font-sans → Inter */
/* Mono: font-mono → JetBrains Mono */
Design Tokens
Border Radius
Design Tokens
Shadows
elevated
shadow-cf-elevated
gold-lg
shadow-cf-gold-lg
Icons — Lucide
Icon System
Framework-agnostic SVG icons via
Lucide .
Wrap in
.cf-icon for sizing, use
currentColor for theming.
// TS import
import { Play, Search } from '@chroniclefields/design-system/icons' ;
element.innerHTML = `<span class="cf-icon cf-icon-gold">${Play}</span>` ;
<!-- HTML -->
<span class="cf-icon cf-icon-lg cf-icon-gold" > …svg…</span>
Components
Navbar
Default
Glassmorphism — .cf-navbar-glass.is-scrolled
Components
Buttons
Variants
Primary
Gold
Secondary
Ghost
/* Compose: base + variant + size */
<button class="cf-btn cf-btn-primary cf-btn-md" > Get Started</button>
<button class="cf-btn cf-btn-gold cf-btn-lg" > Subscribe</button>
<button class="cf-btn cf-btn-secondary cf-btn-sm" > Settings</button>
/* Variants: primary | gold | secondary | ghost | icon */
/* Sizes: sm (36px) | md (48px) | lg (56px) */
Components
Tabs
Stories
Fields
Archives
All
Trending
New
Components
Chips
Featured
Trending
Historical
Nature
New
<span class="cf-chip cf-chip-filled" > Featured</span> /* gold solid */
<span class="cf-chip cf-chip-gold" > Trending</span> /* gold outline */
<span class="cf-chip cf-chip-white" > Nature</span> /* white ghost */
Components
Media Cards
The Last Chronicle
Featured 12 chapters
Fields of Memory
Series 8 parts
Origin Stories
Adventure 5 chapters
Components
Feature Cards
Immersive Stories
Experience narratives brought to life with rich media and cinematic transitions.
Connected Fields
Explore locations tied to each chronicle through geospatial mapping.
Studio Tools
Create and publish chronicles with a visual editor built for storytellers.
Components
Section Heading
Explore Our Chronicles
Dive deep into stories that matter
Components
Hero
Chroniclefields presents
The Art ofStorytelling
Where every story finds its field
A cinematic platform for discovering, creating, and sharing narratives that transcend the ordinary.
Get Started
Browse Stories
<section class="cf-hero" >
<p class="cf-hero-subtitle" > Subtitle</p>
<h1 class="cf-hero-title" > Heading <em> Gold</em></h1>
<p class="cf-hero-byline" > Serif italic byline</p>
<p class="cf-hero-desc" > Description</p>
<div class="cf-hero-actions" > …</div>
</section>
Components
CTA Banner
Subscribe to stay inspired
Get the latest chronicles and storytelling insights delivered to your inbox.
Utilities
Effects & Surfaces
.cf-glass
Frosted glass surface
.cf-glass-accent
Gold-tinted glass
Gold Gradient
.cf-text-gradient
Gold Glow
.cf-gold-glow
White Glow
.cf-text-glow
.cf-bento
Hover for gold border
/* Surface utilities */
<div class="cf-glass" > Frosted surface</div>
<div class="cf-glass-accent" > Gold-tinted</div>
<div class="cf-bento" > Bento card with hover</div>
/* Text effects */
<h1 class="cf-text-gradient" > Gold shimmer</h1>
<h2 class="cf-gold-glow" > Gold text shadow</h2>
<h2 class="cf-text-glow" > White text shadow</h2>
/* Other */
<div class="cf-atmosphere" ></div> /* fixed radial bg */
<div class="cf-mask-fade" ></div> /* top/bottom fade mask */
<div class="cf-noise" ></div> /* cinematic grain overlay */
<div class="cf-glow" ></div> /* gold box-shadow */
<div class="cf-glow-lg" ></div> /* gold box-shadow large */
Utilities
3D Transforms
Cards that tilt in 3D space and flatten + scale on hover.
Story Mode
Cinematic parallax transitions.
Timeline Editor
Drag-and-drop scene composition.
World Builder
Interactive maps and lore.
<div class="cf-perspective-3d" > /* parent: enables 3D space */
<div class="cf-card-3d-rotate" > /* child: tilts, flattens on hover */
…
</div>
</div>
Components
Animations & Accessibility
Class Purpose Notes
.cf-fade-in Fade in 700ms, ease-cf .cf-slide-up Slide up + fade 1000ms cinematic .cf-sr-only Screen reader only Visually hidden .cf-focus-ring Focus indicator 2px gold outline
Components
Layout
Class Purpose CSS
.cf-container Max-width container max-width: 80rem; margin-inline: auto .cf-section Vertical spacing padding-block: 8rem .cf-stack Vertical flex flex-direction: column; gap: 1rem .cf-cluster Horizontal wrap flex-wrap: wrap; gap: 1rem
Reference
Complete Class Index
Category Classes
Navbar .cf-navbar · .cf-navbar-glass · .cf-navbar-brand · .cf-navbar-brand-icon · .cf-navbar-links · .cf-nav-link · .cf-navbar-actions · .cf-search-btn Buttons .cf-btn · .cf-btn-primary · .cf-btn-gold · .cf-btn-secondary · .cf-btn-ghost · .cf-btn-icon · .cf-btn-sm · .cf-btn-md · .cf-btn-lg Tabs .cf-tabs · .cf-tab Cards .cf-card · .cf-card-image · .cf-card-image--portrait · .cf-card-overlay · .cf-card-title · .cf-card-meta · .cf-card-badge · .cf-card-play · .cf-feature-card · .cf-feature-card-icon · .cf-feature-card-title · .cf-feature-card-desc Inputs .cf-input-wrap · .cf-input · .cf-input-on-light · .cf-input-suffix Chips .cf-chip · .cf-chip-filled · .cf-chip-gold · .cf-chip-white Hero .cf-hero · .cf-hero-title · .cf-hero-subtitle · .cf-hero-byline · .cf-hero-desc · .cf-hero-actions · .cf-hero-pattern CTA .cf-cta-banner · .cf-cta-content · .cf-cta-title · .cf-cta-subtitle · .cf-cta-action Sections .cf-section-heading Layout .cf-container · .cf-section · .cf-stack · .cf-cluster Animation .cf-fade-in · .cf-slide-up A11y .cf-sr-only · .cf-focus-ring Icons .cf-icon · .cf-icon-xs · .cf-icon-sm · .cf-icon-md · .cf-icon-lg · .cf-icon-xl · .cf-icon-gold · .cf-icon-muted Surfaces .cf-glass · .cf-glass-accent · .cf-bento Effects .cf-atmosphere · .cf-text-glow · .cf-gold-glow · .cf-glow · .cf-glow-lg · .cf-mask-fade · .cf-noise · .cf-text-gradient 3D .cf-perspective-3d · .cf-card-3d-rotate
Reference
Semantic Aliases
Alias Resolves To Usage
--color-cf-primary var(--color-cf-gold) bg-cf-primary, text-cf-primary --color-cf-secondary var(--color-cf-accent) bg-cf-secondary, text-cf-secondary
/* Theme aliases — use whichever name fits your context */
bg-cf-gold /* identical to */ bg-cf-primary
text-cf-accent /* identical to */ text-cf-secondary
/* TypeScript */
import { colors } from '@chroniclefields/design-system/tokens' ;
colors.primary // '#d4af37'
colors.secondary // '#ff4e00'
Chroniclefields
Design System · Tailwind v4.2 · Angular · React · Vue