Design system

The Vyuh website uses the same components across the homepage and documentation. This page renders those components directly, so the examples stay aligned with the site.

Color

White gives the content room to breathe. The Vyuh logo’s indigo, #5856D6, marks links, borders, and emphasis. Primary actions use dark ink. Flutter and Dart keep their blue identities.

White#FFFFFF

Vyuh indigo#5856D6

Ink#202139

Flutter blue#1684D8

Dart blue#1684D8

Dark mode uses the same hierarchy with lighter text and indigo accents. Use the navigation’s appearance control to preview it.

Typography

Role	Typeface	Treatment
Headings	DM Sans	Medium or semibold; bold for Flutter in the hero
Body	DM Sans	18px default, relaxed line height
Captions and controls	DM Sans	Smaller, with sufficient contrast
Hero emphasis	Lora	Italic, used sparingly
Diagram annotations	Kalam	Handwritten labels
Code	JetBrains Mono	Used only for code and file names

Readers can choose a comfortable size in the documentation. The control below is the same one shown above every article.

Reading sizeCompactComfortableLarge

Actions

Dark buttons carry primary actions. Text links carry secondary actions. Arrows move toward the destination on hover and keyboard focus, using a 180ms transition. Reduced-motion preferences keep the arrows stationary.

Build your first featureExplore the conceptsVyuh Technologies

<ActionLink href="/docs/intro/get-started" variant="primary">
  Build your first feature
</ActionLink>
<ActionLink href="/docs/concepts/">Explore the concepts</ActionLink>
<ActionLink href="https://vyuh.tech" external>Vyuh Technologies</ActionLink>

Architecture blocks

The foundational capabilities sit at the bottom. Features use those capabilities. Apps compose the features. Each layer includes concrete examples and its role in the product.

03AppsCompose a product

Customer appTeam app

Different experiences. The features each app needs.

↑

02FeaturesOwn a slice of your product

CatalogAccountCheckout

Routes, state, UI, and contributions in portable packages.

↑

01PluginsShare capabilities

LoggingTelemetryStorageNetwork

One capability can support many features.

Plugins support features. Features compose apps.

Sketch diagrams

Documentation diagrams use one renderer, with handwritten labels, sketch borders, the site palette, and accessible labels. Diagrams load when near the viewport and update with the selected theme.

How the pieces fit together

Write a fenced mermaid block to use this renderer. Edit the diagram source directly in the page’s Markdown. The page renders only the SVG diagram.

Code blocks

Dart examples use the documentation’s syntax highlighter, including the homepage. This is the same first-app example used there.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:vyuh_core/vyuh_core.dart' as vyuh;

void main() {
  vyuh.runApp(
    initialLocation: '/',
    features: () => [
      vyuh.FeatureDescriptor(
        name: 'hello',
        title: 'Hello',
        routes: () => [
          GoRoute(
            path: '/',
            builder: (_, _) => const Scaffold(
              body: Center(child: Text('Hello, Vyuh.')),
            ),
          ),
        ],
      ),
    ],
  );
}

Footer and brand

The shared footer below appears on the homepage and documentation. It includes the tagline, copyright, website, design system link, GitHub, and Twitter / X. The small brand mark uses the existing Vyuh Rive asset, with a static logo fallback. Playback pauses offscreen and when the page is hidden; reduced-motion users see the static logo.