Use the prompts and CSS below in Webflow: with the AI assistant for layout and copy, or in Custom Code / embed for global tokens. The Shizen palette and spacing scale keep the look consistent across sections.
When generating sections or pages with Webflow’s AI, paste this style block so the output uses the same tokens.
Add these to your site’s Custom Code (head) or to a global embed so every page can use the variables. Then set background, text, and accent on body or wrapper divs to the Shizen tokens.
:root {
/* Shizen Wabi-Sabi */
--shizen-bg: #F5F0E8;
--shizen-text: #2C2C2C;
--shizen-accent: #8B7355;
--shizen-muted: #6B6B6B;
--shizen-border: #D4CFC4;
/* Spacing (ma-ratio) */
--shizen-space-1: 4px;
--shizen-space-2: 8px;
--shizen-space-3: 16px;
--shizen-space-4: 32px;
--shizen-space-5: 64px;
}Example: set the body background to var(--shizen-bg), text color to var(--shizen-text), and button/link color to var(--shizen-accent). Use the spacing variables for margin and padding (e.g. var(--shizen-space-3) for 16px).
For Shinto (vermillion + gold), Sakura (spring pastels), or Yoru (dark), use the Shizen Prompt Builder: choose “Webflow AI” as platform and pick the aesthetic. You’ll get a ready-to-paste prompt and can copy the token values from the free Wabi-Sabi pack or the builder’s code example.
All platforms: Prompt Builder · Spec · Japanese UI principles guide
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.