Overview

This section defines the shared visual foundations used across all yuuvis® client applications. It ensures that icons, typography, and design libraries remain consistent between design and development.

---

Icon System

yuuvis® shell applications use the Material Symbols icon set as a unified system across Figma and Frontend.

Material Symbols Plugin for Figma

Material Symbols Web-App

Usage

Design Source

Integrated via the Material Symbols Plugin for Figma. as components in yuuvis Material Design Library.

Frontend Implementation

Implemented via Angular Material using the mat-icon component and a fixed instance of the Material Symbols variable font.

Fixed Instance

sharp
weight 400
optical size 24
fill 0
grade 0

Icon Sizes

small = 20×20 px (ymt-sizing-s)
medium (default) = 24×24 px (ymt-sizing-m)

Accessibility

Provide aria-label or equivalent text for functional or informative icons. Decorative icons should be marked with aria-hidden="true".

Configuration

Font Family

Load variable font: Sharp, Outlined, or Rounded

Variable Font Settings

Each variant is configured through font-variation-settings for fill, weight, grade, and optical size.

Colors

Use semantic tokens such as on-surface, primary, or on-surface-subtle for color.

Integration

Fonts can be loaded via Google Fonts or local asset imports.

Icon Consistency

Consistent icon usage reinforces visual clarity and recognition. Use the same icon for identical functions across all applications.

Customization and Extensibility

The icon font can be adjusted to another variant (e.g. switching from Outlined to Rounded), as long as consistency across the application ecosystem is maintained.

Always select icons from the Material Symbols library first. Technically, custom SVG icons can be integrated if required by specific use cases. Only use custom SVG icons when no suitable symbol exists — and ensure they follow the same visual weight, size, and stroke style to maintain visual coherence across the interface.

The Material Symbols font must always be loaded globally in your shell client, even if custom SVGs are used.

Typography & Fonts

Google Font Mulish

Font System

Font Family

Mulish — the sans-serif font family used for all text elements across yuuvis® shell applications.

Font Sizes

Type scale: Major Second (≈1.125). Base size: 14px.

Font Weights

500 (regular), 700 (medium), 800 (bold).

Theming

See Theming for configuration.

Font Hosting

The Mulish font can be loaded via Google Fonts or hosted locally within the application’s asset bundle.

Design Libraries (Figma Resources)

The design resources are managed in Figma and structured as shared libraries for reuse across all yuuvis® products. They include component libraries, token collections, and shared visual assets.

Current Status

The design library tooling in Figma is currently being set up and refined. Library structures, component references, and token integrations are in development.

The goal is to establish a unified design-to-code workflow across all applications.

yuuvis® Token

yuuvis® Material Components

yuuvis® Components

Library Overview

yuuvis® Token

Defines the design tokens and global variables (colors, typography, sizing, spacing). Forms the foundation for all components.

yuuvis® Material Components

Based on Angular Material components. Configured and themed using the default token set to reflect yuuvis® design language.

yuuvis® Components

Extended, application-level components such as Shell, Framework, and Client Material wrappers built upon the Material base.

Access & Maintenance

Figma Workspace

All libraries are part of the yuuvis® material project in Figma.

Availability

All libraries are published team-wide within the Optimal Systems team yuuvis and are available to all team members to use them in their design files.

Developers

Developers can explore and inspect tokens and components using Figma Dev Mode.

Best Practice

Use the official design libraries once they are published to ensure consistent components and tokens across all Figma files. Avoid duplicating or detaching library elements.