← Back to CSSKitsune

Defold GUI Styling — Shizen Token System

Color and spacing tokens for Defold GUI scenes and scripts.

Defold’s GUI uses nodes, materials, and scripts. You can drive colors and layout from a small set of Shizen tokens so menus, HUDs, and dialogs share a consistent Japanese minimal look. This page gives hex values, Lua-friendly numbers where useful, and a prompt for AI when generating or refactoring GUI.

Wabi-Sabi palette (hex and 0–1)

Use these in GUI scripts or materials. Defold often expects colors as vmath.vector4(r, g, b, a) with 0–1 components; hex is handy for reference and for tools that accept it.

-- Shizen Wabi-Sabi (hex)
local shizen = {
  bg     = vmath.vector4(0.96, 0.94, 0.91, 1),   -- #F5F0E8
  text   = vmath.vector4(0.17, 0.17, 0.17, 1),   -- #2C2C2C
  accent = vmath.vector4(0.55, 0.45, 0.33, 1),   -- #8B7355
  muted  = vmath.vector4(0.42, 0.42, 0.42, 1),   -- #6B6B6B
  border = vmath.vector4(0.83, 0.81, 0.77, 1),   -- #D4CFC4
}

Spacing (ma-ratio)

Use 4, 8, 16, 32, 64 as pixel margins or gaps between GUI elements. Scale by your reference resolution if you use dynamic scaling.

-- Spacing constants (px)
local space = { 4, 8, 16, 32, 64 }

Prompt for AI (Cursor / Claude)

When generating or editing Defold GUI Lua, paste this so the style stays consistent.

For Defold GUI: Japanese minimal (wabi-sabi). Colors: bg #F5F0E8, text #2C2C2C, accent #8B7355, muted #6B6B6B. Spacing 4/8/16/32/64px. Light weight text where possible. Flat or 1px shadow; no gradients.

Yoru (night) — dark GUI

For dark menus or HUDs:

-- Yoru palette (0–1)
local yoru = {
  bg     = vmath.vector4(0.12, 0.16, 0.23, 1),   -- #1E2A3A
  text   = vmath.vector4(0.96, 0.94, 0.91, 1),   -- #F5F0E8
  accent = vmath.vector4(0.48, 0.61, 0.69, 1),   -- #7B9BB0
  border = vmath.vector4(0.23, 0.29, 0.35, 1),   -- #3A4A5A
}

More palettes: Use the Shizen Prompt Builder and select “Defold” to get a prompt for Shinto, Sakura, or Edo Ink. Full token list in the spec.

Shinto Wisdom app icon
Free App · No Ads · Offline

Shinto Wisdom Daily Practice

by 10k Game Studio

Every day, one teaching. One moment of stillness.
Kanji, meaning, and a quiet reflection — rooted in the philosophy behind Japan's forests, seasons, and sacred silences.

結び Musubi 清め Harae 自然 Shizen 間 Ma 誠 Makoto + 45 more
Get it on Google Play