--------===++ LOADING WORLD ++===--------

Design System
Analysis of Igloo Inc.

A cold, cinematic monochrome: one grey-blue canvas, one monospace typeface (IBM Plex Mono), white-on-grey terminal text, zero corners and zero shadow — the restraint that frames a full WebGL world.

01 — Foundations

Colour Palette

02 — Foundations

Typography

One family does everything: IBM Plex Mono, loaded by the site in Regular and Medium. Hierarchy is built through size, the Regular-to-Medium weight gap, and letter-spacing used as a deliberate device — tight on display, wide and uppercased on labels.

03 — Components

Button Variants

button-primary
Solid near-black on grey, white uppercase mono label. The single high-contrast action.
button-dark
Same ink as primary — the system has no second colour, only value.
button-secondary
Transparent on canvas with a 1px ink outline. Hard corners, no fill.
button-pill
Even the "pill" stays square — radius collapses to zero across the system.
link · inline
StudioWorlds
Underlined ink links, monospace, no colour shift.
04 — Components

Cards & Surfaces

Surfaces are flat grey tints separated by 1px hairlines — no shadow, no lift. Imagery sits in hard-edged frames, the way a render preview reads inside a tool.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4/8 base stepped up to a generous 64px for sectioning, giving monospace content room to breathe.

07 — Foundations

Border Radius

There is none. Every tier collapses to 0px — corners are hard and screen-like, by intent.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The only separation method the site uses.
Level 1 — flat. No box-shadow appears anywhere in the rendered styles.
Level 2 — flat. All depth is reserved for the WebGL canvas, not the UI.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; ASCII loader and labels centred and reflowed; nav reduces to a menu glyph.
Tablet768–1023pxGrids drop to two tracks; type sizes hold at fixed label scale.
Laptop1024–1279pxFour-track grids return; 1200px max-width column engages.
Desktop≥ 1280pxWebGL canvas fills the viewport; monospace UI floats over it at fixed sizes.

Note: Igloo's true responsive story is the canvas scaling fluidly to any screen while the monospace interface stays label-sized on top — this column layout is a demonstration of the component patterns in that voice.

Engagement Tiers

Demonstration content — pricing patterns rendered in Igloo's monochrome, square-cornered, monospace system.

Explore
Free
Step inside the world and look around.
  • Full immersive experience
  • Public worlds gallery
  • Community channel
Studio+ Most engaged
$2.4k/ project
Build a custom world with the Igloo team.
  • Bespoke WebGL build
  • Art direction + sound
  • Launch & hosting
  • Priority pipeline
Partner
Custom
Long-term creative partnership.
  • Multi-world roadmap
  • Embedded team
  • IP & franchise support

Data Table

Demonstration content — a render-queue table styled in the system's flat, hairline-separated grid.

IDWorldOwnerStatusWhen
WLD-118Glacier HallStudio ALive2h ago
WLD-117Drift BasinStudio ARendering5h ago
WLD-115NorthwindPartner CoLiveYesterday
WLD-112Pale AtriumStudio BQueued2 days ago
WLD-109Frost IndexStudio BLive3 days ago
1–5 of 412
‹123›

Auth Forms

Demonstration content — sign-in patterns in the monochrome, square, monospace house style.

Sign in

Re-enter the world

OR
Create account

Request access

OR