Guide

Typography

Nebula Sans gives Weini products one recognizable voice. Display, interface, and code roles are mapped separately so the hierarchy stays consistent.

Change the font

Set one CSS variable after importing the theme. The new family applies to page text, components, font-sans, and font-display utilities. Load your chosen font with @font-face or your font provider first.

app.css

@import 'tailwindcss';
@import './assets/weini-theme.css';
@source './components/ui';

/* Replace Georgia with any installed or loaded font. */
:root {
  --weini-font-family: Georgia, serif;
}

Leave out weini-nebula-font.css to avoid bundling Nebula Sans when you use another font.

Type scale

Display

Make room for clarity.

Section title

A simple starting point

Body large

Readable text, familiar controls, and a consistent rhythm across the interface.

Label

Supporting detail stays quiet but clear.

Weights

Nebula Sans Book400

Nebula Sans Medium500

Nebula Sans Semibold600

Nebula Sans Bold700

Light (300) and Black (900), plus matching italics, are included too.

Use it

Example.vue

<template>
  <p class="text-label uppercase">Section label</p>
  <h1 class="font-display text-display">Your heading</h1>
  <p class="text-body-lg">Your content</p>
</template>

To keep the default, import weini-nebula-font.css and copy its fonts/nebula directory alongside the CSS. Nebula Sans is distributed under the SIL Open Font License. The bundled license includes the required copyright notice.