Veil Theme Setup

Apply Veil theme tokens and update button, card, input, and textarea primitives for consistent UI styling.

Theme Quickstart

Add the Veil tokens to your global stylesheet (for example app.css or globals.css) so all Veil primitives resolve color, border, focus ring, and typography consistently.

globals.css
[data-theme="veil"] .theme-container {
	--radius: 0.625rem;

	--background: oklch(0.9779 0.0042 56.38);
	--foreground: oklch(0.3421 0.0379 61.15);

	--card: var(--color-white);
	--card-foreground: oklch(0.3421 0.0379 61.15);

	--popover: var(--color-white);
	--popover-foreground: oklch(0.3421 0.0379 61.15);

	--primary: oklch(0.5967 0.0558 61.59);
	--primary-foreground: oklch(0.1448 0 0);

	--secondary: --alpha(var(--primary)/15%);
	--secondary-foreground: oklch(0.3421 0.0379 61.15);

	--muted: --alpha(var(--foreground)/5%);
	--muted-foreground: oklch(0.4563 0.0061 48.59);

	--accent: oklch(0.9068 0.0112 89.73);
	--accent-foreground: oklch(0.3467 0.0231 86.12);

	--destructive: var(--color-red-600);
	--destructive-foreground: var(--color-white);

	--border: --alpha(var(--foreground)/7.5%);
	--input: --alpha(var(--foreground)/20%);
	--ring: var(--primary);

	--font-family: "Geist", sans-serif;
	--font-serif: "Asar", serif;

	@variant dark {
		--background: oklch(0.1448 0 0);
		--foreground: oklch(0.9027 0.0137 60.56);

		--card: oklch(0.1924 0.0016 17.3);
		--card-foreground: oklch(0.9027 0.0137 60.56);

		--popover: var(--color-white);
		--popover-foreground: oklch(0.9027 0.0137 60.56);

		--primary-foreground: var(--color-white);
		--secondary: --alpha(var(--primary)/10%);
		--secondary-foreground: oklch(0.9027 0.0137 60.56);

		--muted: var(--background);
		--muted-foreground: oklch(0.7262 0.0037 67.77);

		--accent: var(--color-zinc-700);
		--accent-foreground: var(--color-white);

		--input: --alpha(var(--foreground)/15%);
	}

	@apply *:text-foreground selection:bg-muted selection:text-primary;
}

Veil Theme uses Geist, Asar font.

Gesit Font : Geist on Google Fonts

Asar Font : Asar on Google Fonts

Apply Theme

Ensure your root body includes theme-container so the selected theme scope is applied across the application.

src/app.html
<body data-theme="veil" class="theme-container">
	<!-- Your Application -->
</body>

Required Components

After theme tokens are configured, update these four Veil primitives in your app.

Component Import Path Update Scope
Button $lib/components/ui/veil/button Variant and size classes, anchor/button rendering
Card $lib/components/ui/veil/card Root variants and all card composition primitives
Input $lib/components/ui/veil/input Field styling, file input branch, focus/error states
Textarea $lib/components/ui/veil/textarea Multiline field sizing, focus/error/disabled states

Button Component

Veil button uses rounded-full geometry, compact sizing, and contrast-aware variants.

Usage

button-usage.svelte
<script lang="ts">
	import { Button } from "$lib/components/ui/veil/button";
</script>

<Button variant="default">Default Button</Button>
<Button variant="outline">Outline Button</Button>
<Button size="lg">Large Button</Button>

Source

Card Component

Veil card supports four variants: default, soft, mixed, and outline, with composition primitives for header/content/footer layouts.

Usage

card-usage.svelte
<script lang="ts">
	import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/veil/card";
</script>

<Card variant="default">
	<CardHeader>
		<CardTitle>Default Card</CardTitle>
	</CardHeader>
	<CardContent>...</CardContent>
</Card>

<Card variant="outline">
	<CardHeader>
		<CardTitle>Outline Card</CardTitle>
	</CardHeader>
	<CardContent>...</CardContent>
</Card>

Source

Input Component

Veil input covers standard and file fields while preserving unified focus and invalid states.

Usage

input-usage.svelte
<script lang="ts">
	import { Input } from "$lib/components/ui/veil/input";
</script>

<Input type="email" placeholder="you@example.com" />
<Input aria-invalid="true" placeholder="Invalid state" />
<Input type="file" />

Source

Textarea Component

Veil textarea shares input tokens, adds multiline sizing, and keeps focus/validation states aligned with other form controls.

Usage

textarea-usage.svelte
<script lang="ts">
	import { Textarea } from "$lib/components/ui/veil/textarea";
</script>

<Textarea placeholder="Enter details..." />
<Textarea aria-invalid="true" placeholder="Invalid state" />

Source

Setup Complete

Veil theme setup is now complete. Your app is ready to start using Veil components and build warm, elegant product interfaces.

Use primitives from $lib/components/ui/veil/* or explore the Veil components collection to start composing screens.