Octagon OS Design System · 0.1

Everything a calm, beautiful dashboard is made of.

One system for every screen: the tokens, components, charts, motion and laws behind the Octagon OS dashboard — written in Svelte, so the live app can use every piece directly.

Principles

Calm glass

Soft gradient cards on a frosted panel. Depth from light, not from borders.

Numbers first

Big, light, tabular figures. Every number on screen adds up to the ones beside it.

Motion with a reason

Things arrive, slide and settle on one easing. Scrolling is smooth and never fights you.

Nothing for show

Every control does something. Every state is designed: loading, empty, error, filled.

Browse

Only finished pages are listed. Each phase adds its pages.

Colour

Foundations
Typography

Foundations
Space, radius, depth

Foundations
Icons

Foundations
Px laws

Foundations
Buttons

Components
Switchers

Components
Fields

Components
Menus & popovers

Components
Dialogs & drawers

Components
Feedback

Components
States

Components
Tables

Components
Data display

Components
Badges & status

Components
Cards

Components
Navigation

Components
Chart rules

Charts
Signature set

Charts
Rings & gauges

Charts
Time

Charts
Compare

Charts
Small charts

Charts
Page patterns

Layouts & blocks
Density

Layouts & blocks
Mobile

Layouts & blocks
Blocks

Layouts & blocks
New blocks

Layouts & blocks
Templates

Layouts & blocks
Octagon Assistant

AI
Branding

Brand & web
Banners

Brand & web
Emails

Brand & web
Quotes & invoices

Brand & web
Themes

Brand & web
Sign in & accounts

Brand & web
Website

Brand & web
Motion rules

Motion
Scroll

Motion
Text

Motion
Hover & micro

Motion
Popups & notifications

Motion
Transitions

Motion
Grain & surfaces

Motion
Catalogue

Motion

Build plan

Built in phases. Each phase is shown working before the next one starts.

  1. 1
    FoundationsColour, three themes, type, space, radius, depth, icons and the px laws
    Ready
  2. 2
    ComponentsButtons, switchers, badges and cards ready · fields, menus, tables, feedback, states and navigation next
    In progress
  3. 3
    ChartsThe signature set plus rings, timelines, compare charts and small charts
    Next
  4. 4
    MotionRules for scroll, popups, dropdowns, hover, notifications, transitions, grain — and a catalogue
    Next
  5. 5
    Layouts & blocksPage patterns, density, phone rules and ready-made sections
    Next
  6. 6
    Auth, branding, themes, websiteSign-in screens, brand rules, theme builder and the marketing site
    Next

Use it

Import a component, wrap the app once for smooth scrolling and themes.

<script>
  import '$ds/styles/tokens.css';
  import '$ds/styles/base.css';
  import { startSmoothScroll } from '$ds/motion/core.js';
  import Button from '$ds/components/Button.svelte';
  onMount(startSmoothScroll);
</script>

<Button variant="primary" icon="plus">New project</Button>