Somnia Design System

One system for the platform site and the explorer

Tokens, tones and React components extracted from somnia.network and the Somnia Explorer, plus the explorer sidebar that every product page embeds.

Get started Explorer sidebar

globals.css

css

@import "tailwindcss";
@import "@somnia-chain/ui/theme.css";

layout.tsx

tsx

import { ExplorerShell } from "@somnia-chain/explorer-sidebar"
import "@somnia-chain/explorer-sidebar/styles.css"

@somnia-chain/ui33 documented components, the paper, ink and violet tones, and the light and dark app themes.@somnia-chain/explorer-sidebarThe explorer's sidebar, chain picker, top bar and shell, self-styled so any product app can embed it.This siteEvery preview below is a real file under design/examples, rendered live and shown as source.

Get started

Four steps

01
Install
Both packages live in this repo's npm workspace. Product repos install them the same way once they're published.
bash
```
npm install @somnia-chain/ui @somnia-chain/explorer-sidebar
```
02
Import the theme
After Tailwind, in your global stylesheet. It adds the tokens, tones and utilities, and points Tailwind at the components' classes.
css
```
@import "tailwindcss";
@import "@somnia-chain/ui/theme.css";
```

Set fonts and theme in the root layout

The theme reads --font-inter, --font-inter-tight and --font-source-code. ThemeBootstrap applies the saved light or dark choice before first paint.

tsx

import { ThemeBootstrap } from "@somnia-chain/ui"
import { Inter, Inter_Tight, Source_Code_Pro } from "next/font/google"

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
// …Inter_Tight as --font-inter-tight, Source_Code_Pro as --font-source-code

<html data-theme="light" suppressHydrationWarning className={inter.variable /* + the others */}>
  <head>
    <ThemeBootstrap />
  </head>

Use components

Import from @somnia-chain/ui/next in Next.js apps so internal links use next/link; @somnia-chain/ui works anywhere React does.

tsx

import { Button, Panel, PanelHeader, StatBand } from "@somnia-chain/ui/next"

<Panel>
  <PanelHeader eyebrow="Oracle" title="Questions" />
  <StatBand stats={[{ label: "Resolved", value: "66,585", tone: "up" }]} />
</Panel>

Foundations

Color, type, tone and size

ColorScales, semantic tokens and how tones redefine them.TypographyInter, Inter Tight and Source Code Pro, and the type utilities.TonesThe five section backgrounds and how they behave in each theme.MotionOne easing, three durations and the motion utilities every transition uses.Text sizeA viewer's text size, the zoom behind it, and the viewport utilities full-height frames use.

Components

33 components, one API

The site and the explorer each had their own Button, FeatureGrid, CodeBlock and LiveDot. Each pair is now one component with a size or density switch.

Actions

ButtonA link styled as a button, in five variants and three sizes: md for marketing pages, sm for the console, xs for dense console panels. danger is for destructive actions, such as a stop switch. External links open in a new tab and get an up-right arrow.TextLinkInline accent link with an arrow, for 'see all' style actions beside headings.InputThe console's text field, in the heights of the console buttons: sm (36px) beside an sm button, xs (28px) beside an xs one. inputClass() styles a <select> or any other field the same way.

Status

BadgeCompact mono label for statuses in tables and headers. StatusBadge picks the tone from a lifecycle word such as resolved, pending or failed.Tag and StatusTagTag is a quiet outlined category label, e.g. an article type. StatusTag is the small accent pill for 'Coming soon' in menus and beside page titles.LiveDotPulsing status dot. halo adds the soft ring used next to live data sources on the marketing site; pulse={false} holds it still for a status that isn't live.

Layout

SectionA full-width band in one of the tones, with the page container inside. Tones redefine the semantic colors for their subtree, so everything inside just works.PanelThe console's bordered surface, with an optional header for eyebrow, title, description and actions.PageHeroMarketing page hero on the ink tone with a grid backdrop and violet glow. With a subtitle, the title becomes a mono kicker and the subtitle the headline.PageHeaderConsole page header: breadcrumb, icon, title and status, a one-line summary, actions and sub-page tabs. Every product page in the explorer starts with one.TabsUnderlined sub-page tabs. Pass the current pathname, or use NavTabs from @somnia-chain/ui/next to read it from the router.SidebarThe console's sidebar: logo, nav sections with icons, a meta slot and status tags per row, nested sub-links, and a drawer below lg. Compose it with Topbar in an AppShell; the Explorer's sidebar specializes it.

Data