Yubild - You build, it ships.

Export Options Overview

YuBild provides multiple ways to get your generated theme code into your project, from quick copy-paste for a single file to comprehensive multi-format downloads.

Method	How	Best For
Copy from Code Lab	Click copy button on any file tab	Grabbing a single file quickly
Export Dialog	Click Export in toolbar	Downloading all files at once
PDF Documentation	Export → PDF option	Sharing with designers/stakeholders
Setup Guide Copy	Per-step copy buttons in Setup Guide	Step-by-step integration

CSS Variables Export

The most universal format. Works with any framework, any library, any project. The generated file defines all tokens as CSS custom properties on :root:

design-tokens.css

:root {
  /* Colors */
  --color-primary: #0D7C66;
  --color-primary-foreground: #ffffff;
  --color-secondary: #6366f1;
  --color-accent: #f59e0b;
  --color-destructive: #ef4444;
  --color-background: #ffffff;
  --color-foreground: #1e293b;
  --color-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-ring: #0D7C66;

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing (normal scale, base = 4px) */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Border Radius */
  --radius-base: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Motion */
  --transition-duration: 200ms;
  --transition-easing: ease-in-out;

  /* Effects */
  --blur-radius: 8px;
  --opacity-disabled: 0.5;
  --opacity-hover: 0.08;
  --opacity-backdrop: 0.8;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;

  /* Z-Index */
  --z-base: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 500;
  --z-popover: 700;
  --z-toast: 800;
  --z-tooltip: 9999;
}

Using CSS Variables in Your Project

Save the file as design-tokens.css in your project
Import it in your main CSS or layout file
Reference tokens anywhere with var(--color-primary)

styles.css

@import './design-tokens.css';

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: var(--radius-base);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-body);
  transition: all var(--transition-duration) var(--transition-easing);
  box-shadow: var(--shadow-sm);
}

.button-primary:hover {
  box-shadow: var(--shadow-md);
}

.button-primary:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ring);
  outline-offset: var(--focus-ring-offset);
}

.button-primary:disabled {
  opacity: var(--opacity-disabled);
}

Tailwind CSS Export

Generates a tailwind.config.ts theme extension. Merge this with your existing Tailwind config to use your tokens as utility classes:

Usage in JSX

<!-- Your tokens as Tailwind classes -->
<button class="bg-primary text-primary-foreground rounded-base
               px-4 py-2 shadow-sm hover:shadow-md
               transition-all duration-DEFAULT">
  Click me
</button>

<div class="bg-muted text-muted-foreground p-6 rounded-lg
            border border-border">
  Card content
</div>

Tip

If your project already has a tailwind.config.ts, merge the generatedtheme.extend values into your existing config rather than replacing it entirely.

Framework Integration Files

React: ThemeProvider + useDesignTokens

The React integration generates two files:

ThemeProvider.tsx — A React Context provider that injects your tokens as CSS variables on mount and makes them accessible via context. Wrap your app with it:

app/layout.tsx

import { ThemeProvider } from './ThemeProvider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

useDesignTokens.ts — A hook to access token values programmatically:

Component.tsx

import { useDesignTokens } from './useDesignTokens';

function MyComponent() {
  const tokens = useDesignTokens();

  return (
    <div style={{
      backgroundColor: tokens.colorPrimary,
      borderRadius: tokens.radiusBase,
      padding: tokens.spacing4,
    }}>
      Dynamic themed content
    </div>
  );
}

Vue: YubildTheme + useDesignTokens

Similar pattern for Vue: a wrapper component and a composable.

App.vue

<template>
  <YubildTheme>
    <router-view />
  </YubildTheme>
</template>

<script setup>
import YubildTheme from './YubildTheme.vue';
</script>

Angular: SCSS + Service

Angular gets two files: SCSS variables/mixins for component styles and an injectable service for TypeScript access.

component.scss

@use '../_yubild-tokens' as tokens;

.my-component {
  background-color: tokens.$color-primary;
  border-radius: tokens.$radius-base;
  padding: tokens.$spacing-4;
}

PDF Export

Generate a shareable PDF of your design system documentation. The PDF includes:

Color palette — All colors with hex values, HSL values, and contrast ratios
Typography specimens — All heading levels, body text, and monospace samples with your chosen fonts
Spacing reference — Visual representation of your spacing scale
Component examples — Key UI patterns rendered with your tokens
Token values table — Complete list of all token values in a tabular format

Note

PDF export is great for design handoffs, stakeholder reviews, and documentation archives. It captures the current state of your design system as a static document.

Integration Best Practices

1. Version Your Tokens

Commit the exported files to your repository. This lets you track changes over time with git diffs and roll back if needed.

2. Use a Single Source of Truth

Pick one primary format (usually the library-specific theme) and derive everything else from it. Don't manually edit the CSS variables file and the Tailwind config — they should both come from YuBild.

3. Regenerate, Don't Patch

When you update tokens, re-export all files. Since generators are deterministic, this is always safe. Don't manually edit generated files — your changes will be lost on next export.

4. Use CSS Variables for Custom Components

Even when using a library-specific theme, reference CSS variables (var(--color-primary)) in your custom components. This ensures they stay in sync with your design system without importing library-specific code.

5. Test Both Themes

Most generators include dark mode variants. Test your application in both light and dark themes before shipping to catch contrast issues.

Exports