Cowork UI Kit — Hướng dẫn thực tế

# Trong 00-dev/
npx create-next-app@latest khi-studio --typescript --tailwind --app
cd khi-studio

cp ../../00-templates/ui-kit/tokens/tailwind.preset.js ./tailwind.preset.js

import type { Config } from "tailwindcss";
import coworkPreset from "./tailwind.preset.js";

const config: Config = {
  presets: [coworkPreset],
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
};
export default config;

// Warm aesthetic dùng Instrument Serif + Inter + Plus Jakarta Sans
// Dark aesthetic dùng Inter + IBM Plex Mono

import { Inter, Instrument_Serif, IBM_Plex_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
const serif = Instrument_Serif({ weight: "400", subsets: ["latin"], variable: "--font-serif" });
const mono  = IBM_Plex_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-mono" });

// Warm landing hero
<section className="bg-mesh-warm min-h-screen">...</section>

// Dark dashboard background
<div className="bg-dark-base text-dark-text min-h-screen">...</div>

# Vd cần landing warm
cp 00-templates/ui-kit/_previews/page-C-landing.html ./annhien/04-marketing/landing-may-2026.html

// functions.php của theme
function enqueue_cowork_tokens() {
  wp_enqueue_style('cowork-tokens', get_template_directory_uri() . '/cowork-tokens.css');
}
add_action('wp_enqueue_scripts', 'enqueue_cowork_tokens');

/* Custom CSS trong Elementor section */
.cta-button {
  background: var(--w-coral);
  color: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-3) var(--sp-6);
  box-shadow: var(--shadow-md);
}

.cta-button:hover {
  background: var(--w-coral-deep);
}

/* Elementor section custom class: mesh-warm đã có trong tokens.css */
/* Section settings → Advanced → CSS Classes: mesh-warm */