Back to Terminal
Supacomp Design System v1.1
Supacomp
Supacomp

Neural &
Native.

var(--color-iris)

IRIS

#5b5bd6

PRIMARY ACTION
var(--color-grass)

GRASS

#203c25

DEEP CONTRAST
var(--color-lime)

LIME

#bdee63

SIGNAL / ACTIVE
var(--color-sage-3)

SAGE

#eef1f0

NEUTRAL SURFACE
var(--color-foreground)

SLATE

#1c2024

NEUTRAL TEXT
var(--color-pink)

PINK

#d6409f

SENTIMENT

12-Step Scales

Each color is defined as a 12-step scale, designed for specific use cases from backgrounds to high-contrast text.

Border System

--border-structural
Use for: Section wrappers, full-width dividers, main grid structure
Tailwind: border-black/20
Border Rules
  • Sections: Never add border-b to section components
  • Dividers: Only full-width dividers between sections
  • Wrappers: Use border-l and border-r on section wrappers
  • Internal: Use borders freely inside sections

Methodology

Radix ColorsOpen Source
iris
BG
UI
BD
SLD
TXT
grass
BG
UI
BD
SLD
TXT
lime
BG
UI
BD
SLD
TXT
pink
BG
UI
BD
SLD
TXT
slate
BG
UI
BD
SLD
TXT
sage
BG
UI
BD
SLD
TXT

Shadows, highlights, and overlays

1
2
3
4
5
6
7
8
9
10
11
12
Black
White

Design
Principles

Our system leverages Radix UI's accessible color methodology to ensure consistency, clarity, and beauty.

01.

Accessibility

Text colors are guaranteed to pass target contrast ratios against backgrounds.

02.

Automatic Dark Mode

Switching scales is as simple as applying a class. It just works.

03.

Transparent Variants

Matching alpha variants for UI components that need to blend.

04.

APCA Contrast

Contrast targets based on modern algorithms for human perception.

05.

P3 Gamut

Support for wide gamut spaces enabling the brightest yellows and reds.

06.

User Interfaces

Each step designed for specific use cases: backgrounds, hover, text.

Aa
Primary Font Family

Instrument Sans

A variable sans-serif built for high-legibility interfaces and dense information displays.

Alphabet

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz

Numerals

0123456789

Bb
Secondary / Display Font

Instrument Serif

A contemporary serif for editorial moments, headlines, and establishing visual hierarchy.

Alphabet

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz

Usage

Hero Headers, Blockquotes, Editorial Sections

Composition

Swiss Style &
Structure.

Our layout philosophy sits at the intersection of Swiss International Style and Digital Brutalism. We prioritize content density, visible structure, and mathematical precision.

  • 01
    Visible GridStructure is not hidden; it is celebrated. We use 1px borders to delineate content areas, creating a "bento box" effect that organizes complex data.
  • 02
    Density & WhitespaceWe embrace high information density for tools (Brutalist) while maintaining airy whitespace for reading (Swiss). The tension between these two creates our signature look.
  • 03
    The 4px BaselineEvery dimension—margin, padding, height, font-size—is a multiple of 4. This creates a subconscious sense of rhythm and trust.
12-Column Grid Visualization
1
2
3
4
5
6
7
8
9
10
11
12
3 COL
9 COL
4
4
4
4px

Alignment

Grid System
12COL
Base Unit
4PX
Interaction
LIME
Icon Set
LUCIDE
System Icons

Lucide
React.

A consistent, clean, and flexible icon set that aligns perfectly with our 4px baseline grid.

24px / 1.5px Stroke
Loading State Concepts
Neural CoreInitializing...
Sync NodeEstablishing...
Sync NodeRotating...
Neural CoreReifying...

Bespoke loading sequences designed for our 'Neural & Native' paradigm. Built on the 4px baseline grid.

NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •NEURAL & NATIVE • DESIGN SYSTEM v1.1 • SWISS GRID • RADIX SCALES •