scillastudio Design System

v 2026-03-20

Lightweight, framework-agnostic design system for scilla.studio projects.

Logotype

ASCII-format logotype for use in terminals, code comments, footers, and text-only contexts.

( '–') ( *–') (˘_•̑ ) ('~' ) ( ■_■) (*◦* ) (•..•) (•̆_•̆ ) (^_^)(..•)

Colors

Brand Colors
blue-monday #0022FF
blue-monday-hover #0018CC
pink-moon #FFEBFF
purple-rain #2E2C86
purple-mountains #D8CEF2
red-right-hand #FF4040
coral-bracelet #FF8A80
yellow-submarine #FFDF49
blue-christmas #0082FC
blue-nile #D5DEFF
essex-green #44D362
green-river #B2E0D5
mint-car #E0F8EB
black-celebration #000000
black-tie-white-noise #F4F4F4
Greyscale
grey-950 #000000
grey-900 #282828
grey-800 #404040
grey-700 #585858
grey-600 #707070
grey-500 #888888
grey-400 #A0A0A0
grey-300 #B8B8B8
grey-200 #D0D0D0
grey-100 #F4F4F4
grey-50 #FAFAFA
grey-0 #FFFFFF

Typography

h1-hero · clamp(2rem, 6vw, 4rem) Heading Hero
h1 · clamp(2rem, 4vw, 2.625rem) Heading One
h2 · 1.75rem Heading Two
h3 · clamp(1.3125rem, 2vw, 1.4375rem) Heading Three
h4 / body · 1.125rem Heading Four / Body
h5 / nav · 1rem Heading Five / Nav
h6 / sm · 0.875rem Heading Six / Small
h7 / xs · 0.75rem Heading Seven / Extra Small

Spacing

xs · 0.5rem
sm · 1rem
md · 1.5rem
lg · 2rem
xl · 3rem
2xl · 4rem

Border Radius

sm
0.5rem
md
1rem
lg
1.5rem
xl
2rem
pill
9999px

Shadows

Soft
shadow-sm
shadow-md
shadow-lg
shadow-xl
Brutalist
brutalist-sm
brutalist-md
brutalist-lg

Components

Accordion

Scilla is a lightweight, framework-agnostic design system built for scilla.studio projects. It provides design tokens, reusable CSS components, and vanilla JavaScript behaviors.
Simply link the CSS files and import the JS modules. No build step required. Works with any framework or plain HTML.
Yes. All components use proper ARIA attributes, keyboard navigation, and respect prefers-reduced-motion.

Tabs

This is the first tab panel. It contains introductory content about the design system and how to get started.

Modal

Toast

Selector Chips

Radio mode
Checkbox mode

Viewport Animations

Scroll down to see these cards animate in.

Card 1

Fades in from below

Card 2

Fades in from below

Card 3

Fades in from below

Slide Deck

Click to advance slides. Use arrow keys or click the nav buttons.

scillastudio Design System

A lightweight toolkit for web projects

Key Features

Design tokens, components, and utilities.

Framework-agnostic vanilla JS.

Accessible by default.

Thank You