SpacematterAppsSpacematterApps
Book a callBook a call →
Design System v3.3Core Tokens & Components
Theme Mode:

Design System

Pure CSS architecture with Light & Dark mode support. Built on the 1080px grid, Basement pitch-black framing (#000000), thick Geist display headlines, and continuous-curvature Presto squircles.

Color System

3-Tier Surface-Context Architecture (Apple HIG & Linear Model). Components NEVER declare raw hex values; they consume Tier 2 Semantic Tokens which compute automatically according to their enclosing Tier 3 Scoped Surface.

1.1 Tier 1: Brand & Status Primitives

Fixed Canonical Hues
Primary (Electric Iris)#7B61FFPrimary CTA, links, focus rings
Accent (Cadmium Amber)#F5A623Warning, highlighting, status tags
Success (Emerald)#10B981Deliverable active, milestones
Alert (Rose)#EF4444Bottlenecks, critical callouts
Link (Cobalt Blue)#4A90E2External anchors & docs

1.2 Tier 2: Universal Semantic Roles (Component Vocabulary)

Components Consume These Exclusively
Surfaces & Layers
var(--bg-canvas)Base sheet, modal body, or section canvas
var(--bg-surface)Contained cards, panels, and floating tiles
var(--bg-subtle)Recessed areas: TL;DR box, appendix floor, table zebra
var(--bg-hover)Interactive hover overlay on buttons and rows
Typography (4-Step Contrast)
var(--text-primary)100% contrast · Headlines, card titles, table headers
var(--text-body)~85% contrast · Narrative prose, reading text
var(--text-secondary)~60% contrast · Captions, timestamps, author lines
var(--text-tertiary)~40% contrast · Hotkeys ([ESC], [T]), colophons, tags
Borders & Lines
var(--border-hairline)Crisp 1px structural outer border
var(--border-subtle)Faint inner row separators, dashed floor dividers
var(--border-strong)Active / focused inputs, selected tab boundaries

1.3 Tier 3: Scoped Surface Contexts (Live Material Matrix)

Active Context Inheritance

Notice how identical components (card, primary title, body text, subtle badge, and close button) adapt automatically without custom CSS overrides when placed in each surface.

Dark Canvas (Obsidian)[data-surface="dark"]
#0D0D0F
Engineering Core

High-density dark studio master framework and marketing sections.

--bg-subtle
Light Canvas (Pitch White)[data-surface="light"]
#FFFFFF
Editorial Reading Sheet

Crisp article post layout with high-contrast text and zebra striping.

--bg-subtle
Tool-Bench Slate[data-surface="slate"]
#EBEDF0
First App & Website

Industrial inspection workbench canvas for mobile and web apps.

--bg-subtle
Editorial Bone[data-surface="bone"]
#F5F5F7
Why Us & Timeline

Warm, human, readable tone for studio philosophy and budget proof.

--bg-subtle
Warm Archival Paper[data-surface="paper"]
#F6F3EB
Vibe-Code Killer

Tactile drafting paper texture for bespoke engineering teardowns.

--bg-subtle
Graphite Carbon[data-surface="carbon"]
#121214
For Startups (MVP)

Deep-tech technical carbon surface for high-velocity venture teams.

--bg-subtle

1.4 Service & Milestone Hues

Domain Identifiers
Purple#6B55BDApp milestone & backend core
Gold#FDCF36Landing milestone & quick wins
Coral#EF6732Unstuck sprints & refactors
Terracotta#EA580CAcute bottlenecks & screening
Cobalt#1D63FFSystems & cloud infrastructure
Lilac#9061F9UX strategy & design systems

Typo

Exact typography tokens: Title (Geist 800/700 with -0.5px letter-spacing), Body (Geist 400), and Mono (JetBrains Mono for metrics and counters). No all-caps eyebrows.

2.1 Title Family (Geist Heavy/Bold • -0.5px Tracking)

titleMega40px (mobile 24px) • 800 / 1.08
We help early startups build the first app.
titleXXL28px • 800 / 1.15
Without wasting time, money, and headspace.
titleXL22px • 800 / 1.20
No corporate time waste. We move lean and fast.
titleL18px (mobile 16px) • 800 / 1.25
First-Milestone model: real working code you evaluate and keep.
titleM16px • 800 / 1.30
Curated visual assets, design systems, refined interaction details.
titleS14px • 700 / 1.35
Milestone 01 Scope & Technical Architecture Specification
titleXS12px • 700 / 1.40
CONFIRMED DELIVERABLE STATUS • SHIP READY

2.2 Body Family (Geist Regular 400 • Line Height 1.5–1.6)

bodyXXL24px • 400 / 1.50

We give your time back. We do not waste your money.

bodyXL20px • 400 / 1.50

Most importantly, you reclaim your headspace. Leave it to us.

bodyL18px • 400 / 1.55

We are a lean team of professional designers and engineers with more than 10 years of experience.

bodyM / body-md16px (mobile 15px) • 400 / 1.55

Some clients contact us in the morning, check the proposal in the evening, and get their first hands-on result by day three.

bodyS / body-sm14px • 400 / 1.50

Every milestone is a finished step. Shippable, usable, and yours to keep.

bodyXS12px • 400 / 1.45

© 2026 Spacematter Apps. Zero lock-in contracts.

2.3 Mono Family (JetBrains Mono • Numbers, Metrics & Counters Only)

monoXL22px • 700 (Large Metrics)
$1,200Full working MVP milestone
monoL18px • 700 (Standard Metrics)
$5007–14 Days
monoM15px • 600 (Tags & Prices)
starting from $200100/100 Lighthouse
monoS13px • 500 (Code / Hash)
#7B61FF • commit 4f9e12
monoXS / Counter10px • 500 (Superscripts)
Projects(7)Services(5)Apps(3)

2.4 Natural Case Badges (No All-Caps Eyebrow Style)

Badge SystemNatural sentence case
Studio milestone 01Available Q2Popular choiceDeliverable verifiedZero lock-in

2.5 Kicker Eyebrow (The Single All-Caps Exception • Single 12px Size)

.kicker12px • Mono 700 • +0.10em
DELIVERABLE ARCHITECTURETRANSPARENT PRICINGPOPULAR CHOICETECHNICAL SPECIFICATION

Squircle

Superellipse math based on presto_squircle: x(t) = r · sin^(2/n)(t), y(t) = r · cos^(2/n)(t). Adjust corner radius and exponent live to see continuous G2 curvature easing into the edge.

True Squircle (n=4.0) Smooth continuous G2 curvature
✦

Milestone Container

Continuous easing into straight edges without abrupt curvature breaks.

Standard border-radius (n=2.0) G1 circular arc discontinuity
●

Circular Corner

Curvature jumps instantly from 0 to 1/r at the tangent point.

Spacing & Corner Radius

Lean, mathematical scales following the s, m, l, xl hierarchy. Built on standard 4px/8px rhythm with progressive squircle curvature.

Spacing Scale (8px to 120px)

--space-xs8px • Icon gaps, chip internal padding, tight flex rows
--space-s / --space-sm12px • Compact card padding, element gaps
--space-m / --space-md16px • Base default (grid gutters, standard padding)
--space-l / --space-lg24px • Large card padding, column gap
--space-xl32px • Component block margins, module separation
--space-2xl48px • Standard section vertical rhythm
--space-3xl64px • Major section breaks & hero spacing
--space-4xl96px • Deep editorial canvas breaks
--space-5xl / --space-mega120px • Full hero section padding & macro gutters

Corner Radius Scale (Lean 5-Step System)

--radius-s / --radius-sm6px

Micro chips, task pills, nested elements

--radius-m / --radius-md12px

Standard cards, inputs, project tiles

--radius-l / --radius-lg16px

Primary surfaces, panels, tables

--radius-xl20px

Feature containers, large hero cards

--radius-full / --radius-pill9999px

Buttons, status pills, kicker chips

Canvas

Core background surfaces, WebGL GLSL shaders, superblur glassmorphism, micro-dot textures, and architectural materials.

1. WebGL GLSL Shaders

5 Live Compiled Shader Programs
prismpreset="prism"
#7B61FF, #EF6732, #F5A623 on #F5F5F7 (Bone) · GLSL airbrush stipple & polynomial smin
nordicpreset="nordic"
#0D5BFF, #05E593, #D2E7F7 on #EBEDF0 (Slate) · GLSL directional leading edge wave
terrapreset="terra"
#DE5D35, #E59E42, #7C9282 on #F6F3EB (Paper) · GLSL pebble SDF & smax cutout
obsidianpreset="obsidian"
#1D1738, #7B61FF, #38BDF8 on #000000 · Single-center right glow (Home Hero)
obsidian-cardpreset="obsidian-card"
#1D1738, #7B61FF, #38BDF8 on #000000 · Dual-center wide horizontal glow (Startup Card)

2. Superblur Glasses

Radial Iris Tint + 20px Backdrop Blur
Light Iris Frosted GlassNavbar Dropdowns
superblur-white.variant-white
#FFFFFF + radial-gradient(88% 50%, rgba(123,97,255,0.07), transparent) + backdrop-filter: blur(20px) + #E2E2E6 border
Dark Iris Superblur GlassAdditional Services Cards
superblur-dark.note-item
#141419 + radial-gradient(85% 15%, rgba(123,97,255,0.12), transparent) + backdrop-filter: blur(20px) + rgba(255,255,255,0.08) border

3. Glassy Tints (Reduced Opacity)

4 Semantic Palettes for Badges & Chips
primary-glass
primary-glass--color-primary-subtle
rgba(123, 97, 255, 0.12) + border: 1px solid rgba(123, 97, 255, 0.28) + text #A390FF
amber-glass
amber-glass--color-amber-subtle
rgba(245, 166, 35, 0.12) + border: 1px solid rgba(245, 166, 35, 0.28) + text #F5A623
★ Popular choice
cyan-glasschip-cyan / badge-cyan
rgba(2, 132, 199, 0.14) (dark) / #E0F2FE (light) + border: 1px solid rgba(56, 189, 248, 0.32)
neutral-glass
neutral-glasschip-neutral / badge-neutral
rgba(255, 255, 255, 0.08) (dark) / #F4F4F5 (light) + border: 1px solid rgba(255, 255, 255, 0.12)

4. Micro-Texture Frame

Top App Bar & Master Footer Frame
Active Status BeaconPure Pitch Black (#000000) Base
dot-matrix.bg-dot-matrix
#000000 + radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px) + background-size: 4px 4px

5. Architectural Material Surfaces

4 Physical Material Swatches
Drafting Paper
paper--bg-paper
Base #F6F3EB · Border #E6E1D3
Precision Slate
slate--bg-slate
Base #EBEDF0 · Border #DCDFE4
Bone Canvas
bone--bg-bone
Base #F5F5F7 · Border #E2E2E6
Deep Carbon
carbon--bg-carbon
Base #121214 · Border rgba(255, 255, 255, 0.10)

Buttons

Continuous squircle double-ring buttons with tactile depth and hover transitions.

Chips

Standardized into 4 distinct functional roles: PriceChip (13px Mono bold for monetary figures), Chip (11.5px Mono squircle for metadata & attributes), Badge (12px Geist Sans natural-case for status pills), and GlassChip (translucent frosted blur pill for shader cards & media overlays).

1. Monetary PriceChips (JetBrains Mono 13px • Squircle)
From $200From $5001st Milestone: $800–$1,200Track A: $350–$1,100 | Track B: Partner$100/ flow or feature
2. Metadata Chips (JetBrains Mono 11.5px / Medium 13px • 4 Fixed Color Palettes)
★ Popular choice⏱ 5–7 DaysStudio milestoneSingle-milestone setup⏱ 5–7 Days (Size M)
3. Natural-Case Status Badges (Geist Sans 12px • Natural Sentence Case)
Popular choiceFixed scopeDesign system v3.3100% Client ownershipNeutral outline
4. Frosted Glass Chips (Backdrop Blur 12px • Hairline Specular Stroke • Squircle Pill)
1.2K Ultraviolet GlowSub-orbital EngineFeatured Story

Fluent Emoji

Tactile 3D animated emoji primitives with sinusoidal floating physics, drop shadows, and standardized scale tokens.

1. Scale Tokens (sm • md • lg • xl • card)
3D Rocket
sm (32px)
3D Rocket
md (48px)
3D Rocket
lg (64px)
3D Rocket
xl (96px)
3D Rocket
card (108px)
2. Standard Brand Emoji Library (3D Animated)
3D Rocket
rocketRocket (Featured)
3D Robot
robotRobot (App / AI)
3D Lightning Bolt
lightningLightning (Speed)
3D Handshake
handshakeHandshake (Startup)
3D Compass
compassCompass (SME / Direction)
3D Thumbs Up
thumbs-upThumbs Up (Approval)
3D Crossed Swords
swordsSwords (Battle-tested)
3D Gear
gearGear (Engineering)
3D Mobile Phone
phonePhone (Mobile Product)
EXPERIMENTAL LAB

Designjoy-Style Footer & Friendly UFO Showcase

Compare Approach 1 (Interactive Vector SVG UFO) vs. Approach 2 (3D Fluent Clay UFO) with live interactive calendar slots. No location disclosure in basement.

Spacematter Spacematter

Scope your first milestone in 15 minutes.

Schedule a quick, 15-minute diagnostic tour directly with a senior builder. No sales friction.

October 2026
SUN MON TUE WED THU FRI SAT
Syncs directly with Google Calendar
Wed 21th
© 2026 Spacematter Apps · 100% Client IP & Code Ownership
Terms of Service · Privacy Policy

Cards

Collection of all card systems built across the platform: Brand Material Cards, Production Service Cards, and Colored Shader Cards.

1. Brand Material Cards (Architectural Surfaces)

Bone • Archival Paper • Cool Slate • Deep Carbon

Real-world legibility, optical hierarchy, and WCAG-verified contrast across the 4 physical material surfaces.

ON NEUTRAL BONEAAA 15.2:1

Your First App

The smallest useful working MVP release. Built to validate your product in 2 weeks.

Milestone 1 • $500
Start Milestone →
ON WARM PAPERAAA 14.1:1

The $100k Waste Trap

Mr. Knowles started with a $3,000 budget and ended up paying $100k to repair software he didn't need.

Acute Risk Solved
Pay 1 Step at a Time
ON COOL SLATEAAA 13.8:1

SME System Sync

Connecting offline POS inventory and custom cloud orders without replacing your current hardware.

SpaceDB CloudLive Sync
Inspect Workflow
ON DEEP CARBONAAA 17.1:1

Arfi Lifestyle Work

Custom headless eCommerce architecture shipping with 99% speed score across 4 languages.

●Live Studio Flagship
View Case Study →

2. Production Service Cards (WebGL Canvas + Scrim)

Encapsulated <ServiceCard /> Component

Production cards integrating live WebGL GLSL shaders, 3D Fluent Emojis, 12-stop silky upward diffusion scrims, squircle geometry, and monetary PriceChips.

Recommended to start

Your First Website

From $200
  • ✓Absolutely better than vibe-coding: respectable, trustworthy design
  • ✓You tell your idea, we take care of everything within 5–7 days
  • ✓Domain included with zero extra charges for your first year
View Full Scope→

Your First App

From $500
  • ✓Figure out your real v0.1: we cut the bloat so you don't burn savings
  • ✓Make it happen in 14–20 days with real devices, database & auth
  • ✓Professional design + senior engineering that actually works
View Full Scope→

For Funded Startups

Track A: $350–$1,100 | Track B: Partner
Track A: Fixed Milestones

Clickable pitch prototype for investors ($350–$700) or complete production MVP ($700–$1,100).

Track B: Studio Co-Builder

Fractional CTO & technical partner under hybrid equity/revenue-share models.

View Full Scope→

3. Colored Shader Cards (Style A Viewport & Style B Wash)

Architectural Surfaces + GLSL Canvas

Combining Bone, Paper, Slate, and Carbon surfaces with live WebGL shaders.

Style A: Visual Stage Layout (Top Shader Viewport + Structured Content)

Designjoy-inspired visual punch: Upper GLSL airbrush stipple stage with tactile floating badges and icons, paired with the studio's clean typographic grounding.

01 / YOUR FIRST APPFrom $500
📱

Your First App

The smallest useful working MVP release. Built to validate your product in 2 weeks.

Milestone 1 • $500
Start Milestone →
02 / WASTE TRAPAcute Risk
⚡

The $100k Waste Trap

Mr. Knowles started with a $3,000 budget and ended up paying $100k to repair software he didn't need.

Acute Risk Solved
Pay 1 Step at a Time
03 / SME SOLUTIONSCloud Sync
🛠️

SME System Sync

Connecting offline POS inventory and custom cloud orders without replacing your current hardware.

SpaceDB CloudLive Sync
Inspect Workflow
04 / FLAGSHIP WORK99% Speed
🚀

Arfi Lifestyle Work

Custom headless eCommerce architecture shipping with 99% speed score across 4 languages.

●Live Studio Flagship
View Case Study →

Style B: Atmospheric Background Layout (Full-Bleed Ambient Shader)

Subtle, luminous atmosphere: The GLSL shader with stipple noise disperses seamlessly behind the content with a protective contrast fog scrim.

ON NEUTRAL BONEAAA 15.2:1

Your First App

The smallest useful working MVP release. Built to validate your product in 2 weeks.

Milestone 1 • $500
Start Milestone →
ON WARM PAPERAAA 14.1:1

The $100k Waste Trap

Mr. Knowles started with a $3,000 budget and ended up paying $100k to repair software he didn't need.

Acute Risk Solved
Pay 1 Step at a Time
ON COOL SLATEAAA 13.8:1

SME System Sync

Connecting offline POS inventory and custom cloud orders without replacing your current hardware.

SpaceDB CloudLive Sync
Inspect Workflow
ON DEEP CARBONAAA 17.1:1

Arfi Lifestyle Work

Custom headless eCommerce architecture shipping with 99% speed score across 4 languages.

●Live Studio Flagship
View Case Study →

4. Technical Article Card (IDE Minimap Preview Rail)

Synthesized Wireframe • Draggable Viewport Slider • Hover Lens

Long-form article reader with a right-edge IDE minimap scrollbar. Supports direct click scrubbing, drag navigation, real-time scroll sync, and hover inspection.

TECHNICAL MEMORANDUM DOC-2026-MVP • 8 MIN READ
IDE MINIMAP PREVIEW

How Much Does an MVP Actually Cost in 2026?

A realistic breakdown of modern mobile and web development costs, distinguishing disposable AI demo code from scalable, production-grade foundation architecture.

01. Executive Summary

The False Economy of Disposable Code

In 2026, generating 500 lines of UI code with automated tools takes seconds. However, turning that raw output into stable software that handles authentication sessions, state reconciliation, payment rollbacks, and offline caching remains where 80% of project budgets either survive or dissolve.

STUDIO PHILOSOPHY

We never sell multi-month retainers without a working first milestone. You receive complete working source code by Day 14 to evaluate on real devices.

02. Production Cost Breakdown

Deliverable Matrix & Timeline

Below is the empirical breakdown of time, deliverable boundaries, and fixed-fee milestones for seed-stage platforms:

Phase Scope / Deliverable Milestone
Milestone 01 Interactive Core Flow, Auth & Database Architecture $800–$1,200
Milestone 02 Payment Processing, Webhooks & Edge API Deployment $500–$800
Milestone 03 App Store Release, CI/CD Pipeline & Monitoring $400–$600
03. Architectural Blueprint

Immutable First-Milestone Specification

Production resilience requires declarative architecture. State stores must handle reconnection gracefully with zero ghost hydration:

src/core/session-engine.ts TypeScript
// Immutable Session Reconciliation Engine
export async function reconcileSession(token: string): Promise<SessionResult> {
  const verification = await verifyCryptographicProof(token);
  if (!verification.valid) {
    return { status: 'unauthorized', retryAfter: 0 };
  }
  const store = await getLocalEdgeCache();
  return store.commitWithReplay(verification.payload);
}
04. Verification & Guarantee

Complete Source Ownership

Every repository built by Spacematter belongs completely to the client. No proprietary platform lock-in, no ongoing license fees, and zero hostage assets.

✓ 100% Client Ownership • Clean Git History • Zero Lock-in
SCROLL OR DRAG MINIMAP TO SCRUB 0% READ

5. Production Article Preview Cards (4 Variations)

Inline Chip • Compact Row • Minimal Bookmark • Editorial Standard

Modular article preview cards engineered for contextual citation, cross-linking, and editorial publishing across the platform.

Variation 1: Inline Citation Chip (Flows inside prose text)<ArticleCard variant="inline-chip" />

When planning product distribution, founders must choose between mobile store gatekeepers or browser agilitySpacematter Phone App vs. Web Link App to avoid burning through initial capital before proving customer traction.

Variation 2: Compact Horizontal Media Row (Flush Square Image)<ArticleCard variant="compact-row" />
Variation 3: Minimal Bookmark / Text Pull-Card (No Picture, Accent Notch)<ArticleCard variant="bookmark" />
Variation 4: Editorial Standard Card (Cover Artwork)<ArticleCard variant="standard" />

App Bar

Sticky app bar for service detail pages and long-form articles. Features responsive breadcrumbs on the left and a continuous squircle Close button with a physical 3D ESC keyboard keycap on the right.

Context 1: Service Detail Page (/services/first-website)
Context 2: Editorial Article (/blog/vibe-coding-killer)

Article System Components

The modular publishing system powering Spacematter long-form teardowns and App Stories. Built on a 900px sheet canvas, 540px strict prose reading measure, 720px editorial breakouts, and 100cqw infinity containers.

READING MEASURE540px max55–75 chars optimal
EDITORIAL BREAKOUTS720px (+180px)Photos & Tables
INFINITY CONTAINER100cqw Full-BleedTL;DR & Appendix
VERTICAL CADENCE40px / 64pxChunks / Sections
15 Modular Article Primitives (Zero Ad-Hoc Rule)Open Live Article Sheet
<ArticleHero /><ArticleTldr /><ArticleSection /><ArticleSubheading /><ArticleCallout /><ArticlePhoto /><ArticleTable /><ArticleQuote /><ArticleList /><ArticleDivider /><ArticleAppendix /><ArticleRecommendations /><ArticleFaq /><ArticleRelated /><ArticleCta />
BlogComponent Specimen & Layout Showcase
900px SHEET · 540px PROSEClose
SPECIMEN 01<ArticleHero />
6 min read•SpacematterApps

Why Custom Apps Are So Expensive

Five years before founding Spacematter Apps, a friend asked for help scoping a custom app for his family business. When the agencies sent their initial bids, the quotes ranged from $15,000 to over $60,000.

Custom App Engineering Realities

Photo 1.1: Full engineering team requirements for a production-grade application.

SPECIMEN 02<ArticleTldr /> · 100cqw Full Bleed
SPECIMEN 03<ArticleSection /> & <ArticleSubheading />

1. The Math Behind Agency Price Tags

When non-technical founders receive their first agency proposal, they assume they are being taken advantage of. But when you examine the actual engineering labor needed to ship reliable software, the economics reveal themselves.

The Three-Engineer Burn Rate

A production mobile app requires at least three distinct disciplines: a frontend mobile developer, a backend systems engineer, and a product designer. Even at conservative offshore rates of $2,500/month per engineer, a 3-month build burns $22,500 purely in raw salary overhead—before servers, QA, or compliance.

SPECIMEN 04<ArticleCallout />

Core Architecture Principle

Never accept code you cannot explain. Every dependency you introduce is an operational debt you will service for the entire lifespan of your company.

SPECIMEN 05<ArticlePhoto /> · 720px Breakout (+180px)
Design System Photo Frame Breakout Example
Photo 1.2: Canonical 720px editorial breakout frame with 40px vertical chunk cadence and 8px caption proximity.
SPECIMEN 06<ArticleTable /> · 720px Breakout

Comparative Development Models &amp; Risk Profiles

Build ModelTypical BudgetTime to MarketFailure Risk
Traditional Agency$15,000 – $60,000+3 – 6 MonthsHigh (Full Upfront Sunk Cost)
Solo GrindingSweat Equity ($0 cash)6 – 18 MonthsHigh (Burnout & Abandonment)
AI Vibe-Coding$20 – $100 / month1 – 2 WeeksExtreme (Zero Maintainability)
Spacematter Milestone$500 – $2,000 / step2 – 3 WeeksNear Zero (Smallest Testable Release)

Table 1.1: Cost, timeline, and structural risk breakdown across modern build strategies.

SPECIMEN 07<ArticleQuote /> & <ArticleList />
"AI says yes to everything, over-polishes unrequested areas, and argues with you daily. Fixing disposable AI garbage often takes longer than writing the architecture from scratch."
— Senior Engineering Guild Lead
  • 01Disposable Prototypes vs Production: Demos look impressive on Twitter, but lack database migrations, race-condition guards, and error boundaries.
  • 02Silent Dependency Poisoning: AI tools hallucinate outdated package versions and deprecated APIs that break silently in production.
  • 03Impossible Maintenance Handoff: When bugs arise, no human engineer can decipher the spaghetti dependencies without rewriting the codebase.
SPECIMEN 08<ArticleDivider />
SPECIMEN 09<ArticleAppendix /> · Continuous Recessed Floor

Interactive File Drawers

Physical file drawer metaphors with skeuomorphic cardstock, white tape tabs, and interactive document ejection.

Variation A: Physical 3D Perspective Drawer(A4 Cardstock, Seamless Vector Caddy & White Tape Ballpoint Tabs)
01. CALC ENGINE
PROVEN ENGINE // CALC-01 READY_TO_DEPLOY
ARCHIVE_REV.2026
f(x, y)TIER_CASCADEΣ DYNAMIC_TAX
High-Precision Calculation Engine Dynamic formula cascade & multi-tier pricing matrices
02. PREDICT
PROVEN ENGINE // PRED-02 READY_TO_DEPLOY
ARCHIVE_REV.2026
+42% HEURISTIC
Predictive & Forecasting Engine Real-time time-series extrapolation & demand heuristics
03. HEADLESS CMS
PROVEN ENGINE // CORE-03 READY_TO_DEPLOY
ARCHIVE_REV.2026
EDGEJSON: 28ms0-BLOAT MARKDOWN
In-House Headless CMS Core < 35ms JSON latency & instant cloud edge markdown sync
04. QR & TRACE
PROVEN ENGINE // TRACE-04 READY_TO_DEPLOY
ARCHIVE_REV.2026
VERIFIEDSITHAR_COFFEE_TRACE
QR & Real-World Verification Physical-to-digital serialized authentication & batch trace
05. AUTH SHIELD
PROVEN ENGINE // AUTH-05 READY_TO_DEPLOY
ARCHIVE_REV.2026
RBAC SHIELD100% AUDIT PASS
Deterministic Auth Shield Zero-leak multi-tenant enterprise RBAC & deterministic session
SPACEMATTER ARCHIVES BUILT-IN PRODUCTION ENGINES
Variation B: Horizontal Archival Tab Rack & Dossier Deck(Horizontal folder tabs, red classified stamp & technical showcase slot)
📂 SPACEMATTER ARCHIVE // REF: CALC-01
✓ Active in 30+ Production Apps ~6 Weeks Saved
FORMULA CASCADE

High-Precision Calculation Engine

Multi-variable pricing matrices, dynamic financial logic cascades, and real-time formula computation with zero rounding drift.

CORE ARCHITECTURAL SPECS:
  • ✦ Deterministic multi-tier pricing and discount cascade logic
  • ✦ Dual-layer execution: instantaneous client evaluation + strict server verification
  • ✦ Handles complex currency, tiered tax brackets, and volume thresholds without floating-point errors
ENGINE API SIGNATURE: fn computeMatrix(inputs: PricingVector): SafeDecimal { ... }
ASSET SLOT: CALC-01 READY FOR MEDIA
📊 High-Precision Calculation Engine Showcase

Plug in your architecture diagram, live dashboard screenshot, or mobile UI demo for High-Precision Calculation Engine.

PROPRIETARY IN-HOUSE ENGINE Day-1 Modular Plugin
Icon System48 × 48 Grid

7. Space Vector Icon System

A unified, custom-crafted 48×48 vector icon vocabulary based on Remix Icon filled silhouettes. Each icon features a three-tier depth structure: Cosmic Iris radial gradient body (specular to core shadow), Warm Amber Gold action accents, and floating Nova starlight sparkles.

TIER 1: BODY VOLUME
Cosmic Iris Radial Gradient
TIER 2: ACTION ACCENT
Warm Amber Gold Linear Gradient
TIER 3: SIGNATURE SPARKLE
Nova Star Quadratic Curve
Serviceri-layout-3-fillCatalog 01

First Website

Iris browser window canvas with amber diagonal launch beam & starlight nova.

<SpaceIcon name="first-website" size={48} />
Serviceri-smartphone-fillCatalog 02

First App

Tactile mobile hardware body with gold app star node and floating sparkle.

<SpaceIcon name="first-app" size={48} />
Serviceri-cpu-fillCatalog 03

SME Systems

Microchip computing core with gold circuit bus connectors and central data node.

<SpaceIcon name="sme-systems" size={48} />
Serviceri-rocket-fillCatalog 04

Startup Partner

Aerodynamic rocket fuselage with amber propulsion flame and orbital dashed trace.

<SpaceIcon name="startup-partner" size={48} />
Serviceri-shield-flash-fillCatalog 05

Vibe-Code Killer

High-performance fortress shield with amber lightning blade slicing through.

<SpaceIcon name="vibe-killer" size={48} />
EngagementMilestone SealDivider Anchor

First Milestone Planet

Signature shaded spherical globe with -20° tilted amber orbital ring and nova star.

<SpaceIcon name="planet" size={48} />
Engagementri-chat-voice-fill$150 / hr

Consultation

Strategic dialogue speech capsule with golden internal voice wavelengths.

<SpaceIcon name="consultation" size={48} />
Engagementri-scan-2-fill$100 / flow

UX Audit

Optical diagnostic scanner ring with golden target checkmark inside lens.

<SpaceIcon name="ux-audit" size={48} />
Engagementri-radar-fill$650

UX Research (Startup)

Parabolic discovery radar dish with pulsed amber validation wave vectors.

<SpaceIcon name="ux-research-startup" size={48} />
Engagementri-bar-chart-grouped-fill$2,000

UX Research (Corporate)

Tiered analytical data columns with ascending amber growth trajectory arrow.

<SpaceIcon name="ux-research-corporate" size={48} />
Engagementri-terminal-box-fill$180 / day

Engineering Solution

IDE terminal code window with golden command prompt chevron and cursor.

<SpaceIcon name="engineering-solution" size={48} />
PillarPillar: CraftMicro-Interactions

Craft & Precision

Dimensional 8-point faceted cosmic diamond star with overlapping gold spark.

<SpaceIcon name="craft" size={48} />
PillarLow-Risk GuaranteeZero Lock-in

Milestone Delivery

Low-risk hexagonal fortress shield with gold completion checkmark.

<SpaceIcon name="milestone-safe" size={48} />
Pillar100% IP TransferGit Access

IP & Code Ownership

Git repository commit branching tree paired with golden master ownership key.

<SpaceIcon name="code-ownership" size={48} />
Pillar100/100 CWVLaunch Velocity

Speed & Vitals

Supersonic 100/100 Core Web Vitals comet meteor with trailing warp streaks.

<SpaceIcon name="speed-vitals" size={48} />
Brand SignatureEdge-Hugging Cosmic Indicator

Glowing Purple Edge Bulb with Cometary Tail

Replaced all previous generic pills. Modeled directly from your reference: sits flush on the right edge, bulges inward with a white-hot apex, and radiates a soft diffused atmospheric blur into the dark canvas.

01

Scroll Box Demo

Atmospheric Blur

Scroll inside this box (or click and drag the glowing bulb directly) to test the edge-hugging movement, white-hot core, and multi-layer atmospheric blur.

[00:01] System initialized: Edge-hugging luminous bulb active
[00:02] Right boundary anchor: Flush against vertical right seam
[00:03] Inward protrusion: Organic teardrop curve pointing into dark canvas
[00:04] White-hot diamond core: Centered at apex of the inward bulge
[00:05] Multi-stage atmospheric blur: 14px outer violet bloom + 4px corona
[00:06] Cometary tail: Fades seamlessly above and below along the edge rail
[00:07] Pure hardware acceleration: Uses translateY on GPU compositor
[00:08] Click and drag the glowing bulb to scrub up and down directly
[00:09] Responsive to hover: Glow expands and corona brightens on cursor contact
[00:10] End of telemetry log. Ready for global rollout.

Anatomy of the Glow

Craft Details
1. White-Hot Diamond Core

High-luminance `#FFFFFF` anchor at the exact apex of the curve that commands visual attention.

2. Focused Corona Blur (3.5px)

Soft transitional electric violet halo that defines the organic shape without looking jagged or pixelated.

3. Wide Atmospheric Diffusion (9px)

Gaussian blur layer that softly bleeds into the deep pitch-black background, exactly as shown in your reference image.

4. Flush Edge Anchor

The right boundary is perfectly flat against the container seam, making it feel like light is organically emerging from the border.

Visual Ornament Cards

Live WebGL GLSL shader cards paired with the animated Fluent 3D rocket, designed for tactile brand expression.

Series 01 · Live WebGL GLSL Shaders

Original Shader Ornament Cards

Powered directly by our WebGL GLSL shader programs with mathematical signed-distance curves, real airbrush stipple noise dispersion, continuous squircle frames, and the 3D animated Fluent rocket.

01 · Nordic Kinetic (Pure Visual)
Animated 3D Fluent Rocket
02 · Prism Horizon (Iris Violet)
Spacematter Violet
Animated 3D Fluent Rocket
03 · Terra Sculpt (Amber & Clay)
Tuscan Amber
Animated 3D Fluent Rocket
04 · Obsidian Core (Deep Carbon)
Ultraviolet Glow
Animated 3D Fluent Rocket
Sub-orbital Engine
Series 02 · Drawn Organic Terrain

Drawn Vector Risograph Cards

Drawn organic dunes and pebble contours with airbrush stipple filters and tactile paper grain overlay.

Emerald Flow · Pure Visual
Animated 3D Fluent Rocket
Emerald Flow · Micro Badge
01 · Velocity
Animated 3D Fluent Rocket
Brand Iris Orbit
Orbital Violet
Animated 3D Fluent Rocket
Orbital Compute
Cadmium Amber Flare
Industrial Accent
Animated 3D Fluent Rocket

6. Brand Mark Explorations

Compact vector explorations comparing the original celestial token to modern architectural studio emblems.

Option 01

The "S" Monolith

Option 02

Celestial Coordinate

Option 03

Orbital Eclipse

Option 04

Heritage Streamlined

Archived Exploration

Bold White Gradient Studio Signature (Footer Grand Brand)

Original high-contrast white metallic gradient variant saved for reference.

Spacematter Apps EmblemSpacematter Apps

7. Agency Overhead UI Snippets

Isolated visual building blocks for representing traditional agency communication friction: simple meeting invite card, standalone chat bubble with avatar & timecode, and compact generic document tiles.

7.1 Meeting Invite Card

MAY
21
10:00 AM

Scope Alignment & Discovery Sync #4

Sarah AEDan PMMark Dev
+2
5 participants

7.2 Chat Bubbles (Portfolio v8 Style with Avatars & Tails)

Agency Account Manager

"Our PM is updating the scope matrix based on internal sync. Will share revised deck next week."

"Why? We already finalized and approved the scope last month."

Presto

7.3 Compact File Tiles (Google Slides, Docs & Web)

Google Slides
Scope Alignment Pitch.slides
Sep 15
Google Sheets
Scope Estimate Matrix.sheets
Nov 30
Google Docs
Requirements Draft v4.docx
Oct 22
Folder
Agency Deliverables Archive
Aug 16
Website
Client Scope Portal.web
Nov 30

* Google Slides, Google Sheets, and Google Docs are trademarks of Google LLC. Icons used for illustrative context.

7.4 Direct Maker Loop (Archived from Why Us Pillar 03)

Direct maker feedback loop showing founder idea inquiry paired with direct senior maker response.

Founder / Client

"We need wholesale tiered pricing for B2B distributors with custom margin tiers."

"Understood. Staging URL drops Wednesday afternoon."

Presto & Min