A Language for Spatial Logic

Design the world,
one statement
at a time.

Issue 01

Interior Design,
Humanized.

Swatch was born from the need for a simple, declarative way to describe the spaces we inhabit. While professional CAD software is powerful, it is often overkill for quick ideation and non-professional use. Swatch bridges the gap between drafting and living.

We believe that architectural logic should be human-readable and programmable. By providing a lightweight syntax for layouts and furniture, Swatch allows designers to focus on spatial relationships while leveraging the power of loops to create generative floor plans.

Built with modern compiler techniques, Swatch ensures that every blueprint is semantically sound. It transforms abstract code into structured spatial data, making the leap from imagination to execution effortless for architects and dwellers alike.

Logic Checks

The Rules of the Room.

The Swatch compiler performs rigorous semantic checks to ensure your design isn't just valid syntax, but logically sound space.

Scope & Identifier Integrity

Redeclaration prevention, definite declaration checks, and lexical shadowing rules for nested loops and components.

Strict Type Safety

Strong typing for all spatial operations, assignment compatibility with numeric promotion, and structural equality for complex types.

Operational Safety

Loop integrity for range bounds, contextual legality for break statements, and immutable constant enforcement.

Spatial Logic

The compiler calculates physical bounding boxes to prevent furniture from colliding with walls, ensuring every blueprint is structurally and physically possible.

Security & Output Integrity

Sanitized SVG generation to prevent XSS, coordinate validation to ensure geometric soundness, and memory-safe execution.

Gallery

Blueprint Examples

Component logic

01 / Modular Living

Demonstrating component definition and parametric loops to create a multi-piece sectional sofa.

Designer "Kate" Date "2026-03-18"

const STEEL = #7f8c8d;
const FABRIC = #2980b9;

component ModularSofa(x: float, y: float, pieces: float) {
  for p in 0 ..< pieces {
    place Section at [x + p * 50.0, y] [color: FABRIC];
  }
}

Layout "Modern Studio" size [500, 450] {
  // Perimeter Shell
  Wall North from [20, 20] to [480, 20] [thickness: 10];
  Wall East from [480, 20] to [480, 430] [thickness: 10];
  
  // South Wall with gap for the door
  Wall SouthLeft from [20, 430] to [380, 430] [thickness: 10];
  Wall SouthRight from [450, 430] to [480, 430] [thickness: 10];
  Wall West from [20, 20] to [20, 430] [thickness: 10];

  // Door Entry
  place Door at [415, 430] [color: #e67e22, width: 40];

  // Kitchenette (Top Right)
  Wall Counter from [350, 40] to [350, 150] [color: STEEL, thickness: 30];
  place Sink at [350, 85] [color: #3498db, width: 20];
  place Fridge at [420, 50] [color: #ecf0f1];

  // Sleeping Zone (Top Left)
  place Bed at [100, 100] [color: #f1c40f, width: 80];

  // Generative Seating (Bottom)
  ModularSofa(100.0, 300.0, 3.0);
  
  // Media Area
  Wall MediaBench from [100, 410] to [200, 410] [color: #333333, thickness: 12];
  place TV at [150, 410] [color: #000000];
}

Iteration

02 / Algorithmic Desk

Using variables and arithmetic logic to evenly space workstations in an office environment.

Designer "Facilities Manager" Date "2026-03-18"

const WIDTH = 1000;
const HEIGHT = 800;
const STEEL = #7f8c8d;
const GLASS = #3498db;

component Workstation(x: float, y: float) {
  place Desk at [x, y] [color: STEEL, width: 60];
  place Chair at [x, y + 55] [color: #2c3e50];
}

Layout "Corporate Office" size [WIDTH, HEIGHT] {
  // Perimeter Walls
  Wall North from [30, 30] to [970, 30] [thickness: 15];
  Wall East from [970, 30] to [970, 770] [thickness: 15];
  Wall SouthLeft from [30, 770] to [400, 770] [thickness: 15];
  Wall SouthRight from [600, 770] to [970, 770] [thickness: 15];
  Wall West from [30, 30] to [30, 770] [thickness: 15];

  // Glass Entryway
  Wall Entrance from [400, 770] to [600, 770] [color: GLASS, thickness: 5];

  // Employee Workstation Grid (Top)
  for i in 0 ... 2 {
    for j in 0 ... 1 {
      Workstation(250.0 + i * 250.0, 150.0 + j * 150.0);
    }
  }

  // Central Conference Zone
  place Table at [500, 500] [color: #f1c40f, width: 120, label: "Conference"];
  for c in 0 ... 3 {
    place Chair at [400.0 + c * 65.0, 440.0] [color: #333333];
    place Chair at [400.0 + c * 65.0, 560.0] [color: #333333];
  }

  // Executive Corner (Bottom Right)
  place Desk at [850, 650] [color: #7e5233, width: 80, label: "Executive"];
  place Chair at [850, 600] [color: #2c3e50];
  place Sofa at [750, 680] [color: #2980b9, width: 100, label: "Lounge"];

  // Storage / Utility Wall (West)
  Wall Storage from [80, 100] to [80, 700] [color: STEEL, thickness: 40];
  place Sink at [80, 400] [color: GLASS, label: "Coffee"];
}

Visual Installation

03 / Dynamic Display

Modular exhibition pedestals and structural partitions in a gallery setting.

Designer "Curator" Date "2026-03-18"

const WALL_COLOR = #e74c3c;
const STATUE_COLOR = #95a5a6;

component DisplayPedestal(x: float, y: float, label: string) {
  place Pedestal at [x, y] [color: #ecf0f1, width: 60];
  place Art at [x, y] [color: STATUE_COLOR, label: label];
}

Layout "Main Gallery" size [1200, 800] {
  // Main structural partitions
  Wall PartitionA from [400, 250] to [400, 600] [color: WALL_COLOR, thickness: 12];
  Wall PartitionB from [800, 250] to [800, 600] [color: WALL_COLOR, thickness: 12];

  // Generative installation along the north wall (shifted down to avoid clipping)
  for i in 0 ... 4 {
    let x_pos = 200.0 + i * 200.0;
    DisplayPedestal(x_pos, 150.0, "Exhibit " + (i + 1));
  }

  place Fountain at [600, 400] [color: #3498db, width: 80];
}

Arithmetic

04 / Symmetrical Entry

Nested loops and mathematical offsets allow for precise, balanced positioning of library stacks.

Designer "Chief Librarian" Date "2026-03-18"

const OAK = #7e5233;
const FELT = #27ae60;
const MARBLE = #ecf0f1;

component BookStack(x: float, y: float) {
  Wall Shelf from [x, y] to [x + 200.0, y] [color: OAK, thickness: 25];
}

component StudyNook(x: float, y: float) {
  place Table at [x, y] [color: FELT, width: 60];
  place Chair at [x, y + 55] [color: #333333];
}

Layout "Grand Library" size [1200, 1000] {
  // Complete Perimeter Shell
  Wall North from [30, 30] to [1170, 30] [thickness: 20];
  Wall East from [1170, 30] to [1170, 970] [thickness: 20];
  Wall SouthLeft from [30, 970] to [500, 970] [thickness: 20];
  Wall SouthRight from [700, 970] to [1170, 970] [thickness: 20];
  Wall West from [30, 30] to [30, 970] [thickness: 20];

  // The Stacks (Left Wing)
  for col in 0 ... 1 {
    for row in 0 ... 5 {
      BookStack(100.0 + col * 300.0, 150.0 + row * 120.0);
    }
  }

  // Reading Area (Right Wing)
  for i in 0 ... 1 {
    for j in 0 ... 3 {
      StudyNook(900.0 + i * 180.0, 150.0 + j * 180.0);
    }
  }

  // Reference & Checkout Desk
  Wall Checkout from [500, 850] to [700, 850] [color: OAK, thickness: 40];
  place Desk at [600, 900] [color: MARBLE, label: "Librarian"];
  place Chair at [600, 950] [color: #333333];
}

Primitives

05 / Structural Shell

Defining wall segments and islands to establish the professional layout of a culinary space.

Designer "Executive Chef" Date "2026-03-18"

const ACCENT = #e74c3c;
const WOOD = #7e5233;
const STEEL = #95a5a6;

component Station(x: float, y: float, type: string, col: color) {
  place type at [x, y] [color: col];
}

Layout "Commercial Kitchen" size [800, 800] {
  // Main Perimeter Walls
  Wall North from [30, 30] to [770, 30] [color: ACCENT, thickness: 15];
  Wall East from [770, 30] to [770, 770] [color: ACCENT, thickness: 15];
  Wall South from [30, 770] to [770, 770] [color: ACCENT, thickness: 15];
  Wall West from [30, 30] to [30, 770] [color: ACCENT, thickness: 15];

  // Continuous Perimeter Counter (U-Shape)
  Wall NorthCounter from [100, 70] to [700, 70] [color: STEEL, thickness: 45];
  Wall WestCounter from [70, 100] to [70, 700] [color: STEEL, thickness: 45];
  Wall SouthCounter from [100, 730] to [700, 730] [color: STEEL, thickness: 45];

  // Cooking Line (North)
  for i in 0 ... 3 {
    Station(200.0 + i * 150.0, 75.0, "Range", #c0392b);
  }

  // Cold Storage (South)
  for j in 0 ... 3 {
    Station(200.0 + j * 150.0, 725.0, "Fridge", #ecf0f1);
  }

  // Large Prep Island with Double Sinks
  Wall Island from [300, 400] to [500, 400] [color: WOOD, thickness: 80];
  place Sink at [350, 400] [color: #3498db];
  place Sink at [450, 400] [color: #3498db];

  // Pass-through Station (West)
  place Table at [125, 400] [color: STEEL, width: 60];
}

Advanced Generative

06 / Generative Logic

Showcasing while loops, nullish coalescing, and membership checks to create an algorithmic dot-grid installation.

Designer "Generative Artist" Date "2026-04-13"

const PRIMARY = #3498db;
const ACCENT = #e74c3c;

component Pattern(x: float, y: float, theme: color?) {
  // Use coalesce to provide a default theme color
  let c = theme ?? PRIMARY;
  
  let i = 0;
  while i < 3 {
    let radius = 10.0 + i * 10.0;
    i++; // Bumping operator
    place Dot at [x + radius, y] [color: c, width: 10];
  }
}

Layout "Generative Pattern" size [600, 600] {
  let x = 50.0;
  while x < 550.0 {
    let y = 50.0;
    while y < 550.0 {
      let isEdge = (x < 100.0 || x > 500.0);
      if (isEdge) {
        Pattern(x, y, #95a5a6);
      } else {
        Pattern(x, y, no color);
      }
      y = y + 150.0;
    }
    x = x + 150.0;
  }
  
  // Showcase break and collection loop
  for val in [100, 200, 300, 400, 500] {
    if (val > 300) { break; }
    Wall marker from [val, 580] to [val + 20, 580] [color: ACCENT];
  }
}

The Architect

Kate Galvin

Kate is a Computer Science student at LMU, with an interest in design and architecture. She believes code is one of the most versatile building materials in the world.

Follow the progress →

Design the world, one statement at a time.

Interior Design, Humanized.