Mosaic Logo

Mosaic Tiles Demo

Design Tokens

DaSCH brand colors, typography, and neutral scale defined as CSS custom properties via Tailwind v4 @theme.

Examples

Color Scales

Semantic color tokens (50–950) derived from DaSCH brand values in OKLCH. Each row shows the full scale for one semantic color.

Colors are defined as CSS custom properties (e.g. var(--color-primary-500)) and are also available as Tailwind utilities (e.g. bg-primary-500).

primary#336790
50
100
200
300
400
500
600
700
800
900
950
secondary#74A2CF
50
100
200
300
400
500
600
700
800
900
950
success#31837B
50
100
200
300
400
500
600
700
800
900
950
danger#9E484D
50
100
200
300
400
500
600
700
800
900
950
warning#E39E22
50
100
200
300
400
500
600
700
800
900
950
info#74A2CF
50
100
200
300
400
500
600
700
800
900
950
accent#706DA6
50
100
200
300
400
500
600
700
800
900
950
neutral#3B4856
50
100
200
300
400
500
600
700
800
900
950
View Code
use leptos::prelude::*;

const STOPS: &[&str] = &[
    "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950",
];

const SCALES: &[(&str, &str)] = &[
    ("primary", "#336790"),
    ("secondary", "#74A2CF"),
    ("success", "#31837B"),
    ("danger", "#9E484D"),
    ("warning", "#E39E22"),
    ("info", "#74A2CF"),
    ("accent", "#706DA6"),
    ("neutral", "#3B4856"),
];

#[component]
fn ColorScale(name: &'static str, base_hex: &'static str) -> impl IntoView {
    let swatches = STOPS
        .iter()
        .map(|stop| {
            let var_name = format!("var(--color-{}-{})", name, stop);
            let is_light = matches!(*stop, "50" | "100" | "200" | "300");
            let text_color = if is_light { "#1a1a1a" } else { "#ffffff" };
            view! {
                <div
                    class="flex flex-col items-center justify-end p-2 rounded"
                    style:background-color=var_name
                    style:color=text_color
                    style:min-width="4rem"
                    style:min-height="4rem"
                >
                    <span class="text-xs font-mono">{*stop}</span>
                </div>
            }
        })
        .collect_view();

    view! {
        <div class="mb-6">
            <div class="flex items-baseline gap-2 mb-2">
                <span class="text-sm font-semibold">{name}</span>
                <span class="text-xs text-neutral-500 font-mono">{base_hex}</span>
            </div>
            <div class="flex gap-1">{swatches}</div>
        </div>
    }
}

#[component]
pub fn ColorsExample() -> impl IntoView {
    let scales = SCALES
        .iter()
        .map(|(name, hex)| {
            view! { <ColorScale name=*name base_hex=*hex /> }
        })
        .collect_view();

    view! {
        <div>
            <p class="text-sm text-neutral-600 mb-4">
                "Colors are defined as CSS custom properties (e.g. "
                <code class="text-sm bg-neutral-100 px-1 rounded">"var(--color-primary-500)"</code>
                ") and are also available as Tailwind utilities (e.g. "
                <code class="text-sm bg-neutral-100 px-1 rounded">"bg-primary-500"</code> ")."
            </p>
            {scales}
        </div>
    }
}

Typography

Font tokens: font-display (Lora) for headings and font-body (Lato) for body text, with fallback stacks.

font-display — Lora, Georgia, Times New Roman, serif

The quick brown fox jumps over the lazy dog

Heading level two in display font

Smaller heading in Lora with serif fallbacks

font-body — Lato, Helvetica Neue, Arial, sans-serif

Body text set in Lato. This is the default font for paragraph content, form labels, and UI elements. The fallback chain ensures readable sans-serif text even without web fonts loaded.

Smaller body text for captions, metadata, and secondary information.

View Code
use leptos::prelude::*;

#[component]
pub fn TypographyExample() -> impl IntoView {
    view! {
        <div class="space-y-8">
            <div>
                <h4 class="text-sm font-semibold text-neutral-500 mb-3">
                    "font-display"
                    <span class="font-normal text-neutral-400">
                        " — Lora, Georgia, Times New Roman, serif"
                    </span>
                </h4>
                <div style="font-family: var(--font-display)">
                    <p class="text-4xl mb-2">"The quick brown fox jumps over the lazy dog"</p>
                    <p class="text-2xl mb-2">"Heading level two in display font"</p>
                    <p class="text-lg">"Smaller heading in Lora with serif fallbacks"</p>
                </div>
            </div>

            <div>
                <h4 class="text-sm font-semibold text-neutral-500 mb-3">
                    "font-body"
                    <span class="font-normal text-neutral-400">
                        " — Lato, Helvetica Neue, Arial, sans-serif"
                    </span>
                </h4>
                <div style="font-family: var(--font-body)">
                    <p class="text-base mb-2">
                        "Body text set in Lato. This is the default font for paragraph content, form labels, and UI elements. The fallback chain ensures readable sans-serif text even without web fonts loaded."
                    </p>
                    <p class="text-sm text-neutral-600">
                        "Smaller body text for captions, metadata, and secondary information."
                    </p>
                </div>
            </div>
        </div>
    }
}