Hikari

The Frontend of Everything

Website | Quick Start | Examples | Architecture

A modern Rust UI framework blending traditional Chinese aesthetics with futuristic sci-fi design

Hikari (光 - "Light") is a comprehensive UI framework built with Dioxus, featuring a unique design system inspired by Arknights' clean aesthetics, FUI (Futuristic User Interface) elements, and a rich palette of traditional Chinese colors. The name "Hikari" comes from the rhythm game Arcaea.

Vision

Hikari embodies three core design philosophies:

• Arknights Flat Design - Clean lines, clear information hierarchy, high contrast, and refined simplicity
• FUI Sci-Fi Aesthetics - Subtle glow effects, dynamic indicators, precise borders, and geometric patterns
• Chinese Traditional Colors - 500+ authentic historical colors for cultural depth and visual richness

The result is a UI framework that feels both ancient and futuristic, professional yet approachable, with a distinctive visual identity that stands out from conventional component libraries.

Tech Stack

• Frontend: Dioxus 0.7 (WebAssembly)
• Styling: Grass (SCSS compiler) + SCSS
• Server: Axum 0.8 (optional SSR support)
• Language: Rust 1.52+
• Build System: Justfile
• Tooling: Python 3.11+ (formatting and linting)

Features

hikari-palette

• 500+ traditional Chinese colors
• Rich color metadata (hex, RGB, CMYK, historical notes)
• Pre-defined palettes for different design systems
• Type-safe color constants with Chinese names

hikari-theme

• Theme context and provider
• CSS variables system
• Multiple built-in themes (Primary, FUI Dark, Arknights, Fresh)
• SCSS mixins and utilities
• Responsive design utilities

hikari-components

• Layout System: Layout, Header, Aside, Content, Container, Grid, Row, Col, Section, Spacer
• Basic Components: Button, Input, Card, Badge
• Feedback: Alert, Toast, Tooltip
• Navigation: Menu, Tabs, Breadcrumb
• Data Display: Table (modular with pagination, sort, filter, selection)
• Data Display: Tree (modular with virtual scroll, drag-drop, collapse)

hikari-extra-components

• Node Graph System: Canvas, nodes, ports, connections, minimap, context menu
• Advanced Utilities: Collapsible, DragLayer, ZoomControls
• Perfect for visual editors, workflow builders, and data visualization

hikari-render-service

• Server-Side Rendering support
• Easy Axum integration
• Static asset serving
• Type-safe router builder
• Production-ready error handling
• Style service with CSS injection

Quick Start

Installation

Add Hikari to your Cargo.toml:

[dependencies]
hikari-palette = "0.1.0"
hikari-theme = "0.1.0"
hikari-components = "0.1.0"

Basic Usage

use dioxus::prelude::*;
use hikari_theme::ThemeProvider;
use hikari_components::Button;

fn app() -> Element {
    rsx! {
        ThemeProvider { palette: "arknights".to_string(),
            div { class: "container",
                h1 { "Welcome to Hikari" }
                p { "A fusion of tradition and technology" }

                Button {
                    variant: ButtonVariant::Primary,
                    onclick: |_| println!("Clicked!"),
                    "Get Started"
                }
            }
        }
    }
}

With Chinese Colors

use hikari_palette::{石青, 朱砂, 藤黄};

fn customize_theme() {
    let primary = 石青;
    let secondary = 朱砂;
    let accent = 藤黄;

    println!("Primary: {} ({})", primary.name, primary.hex);
    // Output: Primary: 石青 (#1759A8)
}

Package Structure

hikari/
├── packages/
│   ├── hikari-palette/          # Chinese color system
│   ├── hikari-theme/            # Theme system + SCSS
│   ├── hikari-components/       # Basic components
│   ├── hikari-extra-components/ # Advanced components
│   └── hikari-render-service/   # SSR + style service
│
├── examples/
│   ├── website/                 # Comprehensive website
│   ├── table-demo/              # Table component demo
│   ├── tree-demo/               # Tree component demo
│   ├── node-graph-demo/         # Node graph demo
│   └── ssr-demo/                # SSR example
│
├── docs/
│   ├── ARCHITECTURE.md          # Architecture overview
│   └── CONTRIBUTING.md          # Contributing guidelines
│
├── Cargo.toml                   # Workspace configuration
├── PLAN.md                      # Implementation plan
└── README.md                    # This file

Examples

Layout Component

use hikari_components::layout::{Layout, Header, Aside};

rsx! {
    Layout {
        header: rsx! {
            Header {
                h1 { "My Application" }
            }
        },
        aside: rsx! {
            Aside {
                nav {
                    a { "Home" }
                    a { "About" }
                    a { "Contact" }
                }
            }
        },
        main {
            p { "Main content goes here..." }
        }
    }
}

Button Component

rsx! {
    Button {
        variant: ButtonVariant::Primary,
        size: ButtonSize::Large,
        onclick: |_| println!("Clicked!"),
        "Click Me"
    }

    Button {
        variant: ButtonVariant::Ghost,
        icon: rsx! { Icon { name: "search" } },
        "Search"
    }

    Button {
        variant: ButtonVariant::Danger,
        loading: true,
        "Processing..."
    }
}

Theme Provider

rsx! {
    ThemeProvider {
        palette: "fui-dark".to_string(),
        // All components automatically use the FUI Dark theme
        Button { "FUI Button" }
    }
}

SSR Integration

use hikari_render_service::HikariRenderServicePlugin;

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    let app = HikariRenderServicePlugin::new()
        .add_route("/api/health", health_handler)
        .static_assets("./dist")
        .build()?;

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await?;
    axum::serve(listener, app).await?;
    Ok(())
}

Design Philosophy

Arknights Flat Design

• Clean, sharp lines and edges
• Clear information hierarchy
• High contrast for readability
• Minimalist without being boring

FUI Sci-Fi Aesthetics

• Subtle glow effects (box-shadow, text-shadow)
• Dynamic indicators (breathing lights, pulse animations)
• Fine 1px semi-transparent borders
• Geometric patterns (hexagons, grids)

Animation Principles

• Subtle transitions (150ms ease)
• Functional animations over decorative
• Smooth, natural motion curves
• No jarring or distracting effects

Chinese Color System

• Primary Colors: Stone Cyan (石青), Cinnabar (朱砂), Vine Yellow (藤黄), Indigo (靛蓝)
• Neutral Colors: Moon White (月白), Ink Black (墨色), Silk Gray (缟色)
• Functional Colors: Scallion Green (葱倩 - success), Goosling Yellow (鹅黄 - warning), Cinnabar (朱砂 - danger)

Each color carries historical significance, adding cultural depth to your applications.

Development

Prerequisites

• Rust 1.52+
• Python 3.11+ (for tooling scripts)
• Just (command runner)

Build Commands

# Install just
cargo install just

# Build all packages
just build

# Run tests
just test

# Format code
just fmt

# Run linter
just lint

# Start development server
just dev

Package Status

• hikari-palette - Complete
• hikari-theme - Complete
• hikari-components - Basic components complete
• hikari-extra-components - In progress
• hikari-render-service - Core features complete

See PLAN.md for detailed implementation status.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Documentation

• Architecture Overview
• Contributing Guidelines
• hikari-palette Documentation
• hikari-theme Documentation
• hikari-components Documentation
• hikari-extra-components Documentation
• hikari-render-service Documentation

License

Hikari is dual-licensed under:

• MIT License (LICENSE-MIT or https://opensource.org/licenses/MIT)
• Apache License, Version 2.0 (LICENSE-APACHE or https://www.apache.org/licenses/LICENSE-2.0)

You may choose either license for your use.

Acknowledgments

Inspired by and built upon:

• Dioxus - The Rust UI framework
• Arknights - Design language inspiration
• ChineseColors - Traditional color palette
• tairitsu - Architecture patterns
• akasha - Node graph system reference

Name

"Hikari" (光) means "light" in Japanese, representing:

• Illumination through knowledge and culture
• The fusion of tradition (ancient wisdom) and technology (future innovation)
• Bringing clarity and beauty to user interfaces

Let Hikari illuminate your applications with the perfect blend of tradition and technology.