Design system, dark theme, Tailwind CSS, responsive iframe layout, and accessibility guidelines for Insolitum Universe modules.

UI & Design Guidelines

Modules should provide a consistent visual experience within the Universe Shell. Follow these guidelines for a cohesive look.

Dark Theme

Universe Shell uses a dark theme by default. Your module must support dark mode:

<html lang="pl" className="dark">
  <body className="bg-gray-900 text-white min-h-screen">

Color Palette

Token	Value	Usage
`bg-gray-900`	`#111827`	Page background
`bg-gray-800`	`#1f2937`	Card / panel background
`bg-gray-800/50`	semi-transparent	Elevated surfaces
`border-gray-700`	`#374151`	Borders, dividers
`text-white`	`#ffffff`	Primary text
`text-gray-400`	`#9ca3af`	Secondary text
`text-gray-500`	`#6b7280`	Muted text

Accent Colors

Use these for interactive elements and status indicators:

Color	Class	Usage
Purple	`text-purple-400` / `bg-purple-500`	Primary actions, branding
Blue	`text-blue-400` / `bg-blue-500`	Links, info
Green	`text-green-400` / `bg-green-500`	Success, active
Yellow	`text-yellow-400` / `bg-yellow-500`	Warnings
Red	`text-red-400` / `bg-red-500`	Errors, destructive
Cyan	`text-cyan-400` / `bg-cyan-500`	Telemetry, data

Tailwind CSS

The module-starter uses Tailwind CSS v3.4 with these defaults:

tailwind.config.ts

import type { Config } from 'tailwindcss';
 
const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};
 
export default config;

Layout Patterns

Card Layout

<div className="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
  <h3 className="text-lg font-medium text-white mb-2">Title</h3>
  <p className="text-gray-400">Description text</p>
</div>

Stats Grid

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  {stats.map((stat) => (
    <div className="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
      <p className="text-sm text-gray-400">{stat.label}</p>
      <p className="text-2xl font-bold text-white mt-1">{stat.value}</p>
    </div>
  ))}
</div>

<div className="p-6">
  <h1 className="text-2xl font-bold text-white flex items-center gap-3">
    <LayoutDashboard className="w-7 h-7 text-blue-400" />
    Module Dashboard
  </h1>
  <p className="text-gray-400 mt-1">
    Welcome back, {user?.email}
  </p>
</div>

Icons

Use Lucide React for icons (included in module-starter):

import { LayoutDashboard, Users, Settings, BarChart3 } from 'lucide-react';
 
<LayoutDashboard className="w-5 h-5 text-blue-400" />

Responsive Design

Your module renders inside an iframe. The available width depends on the Shell's layout (sidebar open/closed). Design for:

Minimum width: 768px (sidebar open on desktop)
Maximum width: 100% of viewport minus sidebar
Mobile: Shell may hide sidebar, giving full width

Use Tailwind responsive prefixes: sm:, md:, lg:.

Internationalization (i18n)

Modules should support at minimum Polish and English:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
 
i18n.use(initReactI18next).init({
  resources: {
    pl: { translation: { dashboard: 'Panel glowny', settings: 'Ustawienia' } },
    en: { translation: { dashboard: 'Dashboard', settings: 'Settings' } },
  },
  lng: 'pl',
  fallbackLng: 'en',
});

Accessibility Checklist

Use semantic HTML elements (<main>, <nav>, <section>)
All images have alt attributes
Interactive elements are keyboard-accessible
Color contrast ratio >= 4.5:1 for text
Focus states are visible
Form inputs have labels

UI & Design Guidelines

UI & Design Guidelines

Dark Theme

Color Palette

Accent Colors

Tailwind CSS

Layout Patterns

Card Layout

Stats Grid

Page Header

Icons

Responsive Design

Internationalization (i18n)

Accessibility Checklist

On this page