Blush & sage on plum dusk. A moonlit-garden MinimalMessage override with foliage textures, drifting pollen, and a stitched dashed glass card.
This is the STATIC version.
To customize, look at https://github.com/valdoix/vellum-engine/tree/main/lumithemes.
Palette
9 colours · 6 settings
dark
- Primary
#d98cab - Secondary
#8fbf7f - Background
#1a0e16 - Text
#f2dce7 - Danger
#d9708c - Success
#8fbf7f - Warning
#e8c07a - Speech
#d98cab - Thoughts
#c7a9ba
Theme controls
- Accent colour
- 336° · 50% · 70%
- Preferred mode
- dark
- Corner scale
- 1.67
- Glass surfaces
- Yes
- Type scale
- 1
- Character-aware colours
- Yes
Stylesheets
1 stylesheet
/* Vellum · Bloom — Pressed-Flower Garden — Vellum globalCSS (Layer 2) */
/* bundled web fonts (shipped as pack assets, not inlined) */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-600-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-700-normal.woff2) format('woff2');
}
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/eb-garamond-400-italic.woff2) format('woff2');
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/eb-garamond-400-normal.woff2) format('woff2');
}
:root{--vm-serif:'Cormorant Garamond',Georgia,serif;--vm-body:'EB Garamond',Georgia,serif;--lumiverse-bg:#1a0e16;--lumiverse-text:#f2dce7;--lumiverse-text-2:#c7a9ba;--lumiverse-accent:#d98cab;--lumiverse-accent-2:#8fbf7f;--glass-border:rgba(230,163,192,.14)}
body{--lumiverse-font-family:var(--vm-body,inherit)}
/* page field painted on the always-present body anchor */
html,body{background:
radial-gradient(1200px 600px at 78% -8%, rgba(217,140,171,.22), transparent 60%),
radial-gradient(1000px 700px at 8% 108%, rgba(143,191,127,.18), transparent 60%),
radial-gradient(520px 420px at 62% 44%, rgba(180,110,150,.12), transparent 66%),
radial-gradient(150% 130% at 50% 44%, transparent 52%, rgba(8,4,8,.7) 100%),
linear-gradient(160deg,#20111c 0%, #150a12 60%, #0c060b 100%) !important;}
/* let the themed body field show through the app shell */
#root,#root>*{background:transparent !important}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%238fbf7f' fill-opacity='0.12'%3E%3Cpath d='M30 40c26-14 52 0 52 26-26 6-50-6-52-26z'/%3E%3Cpath d='M170 60c-24-16-52-4-54 22 26 8 52-2 54-22z'/%3E%3Cpath d='M60 150c22 18 18 48-6 58-10-24-4-46 6-58z'/%3E%3Cpath d='M180 168c-20 16-16 44 6 54 10-22 4-42-6-54z'/%3E%3C/g%3E%3Cg fill='%23d98cab' fill-opacity='0.1'%3E%3Cpath d='M120 30c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3Cpath d='M28 110c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3Cpath d='M150 190c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3C/g%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.6;background-image:radial-gradient(circle at 22% 30%, rgba(242,220,231,.14) 0, transparent 4%),radial-gradient(circle at 68% 20%, rgba(217,140,171,.12) 0, transparent 3%),radial-gradient(circle at 82% 66%, rgba(143,191,127,.1) 0, transparent 5%),radial-gradient(circle at 34% 80%, rgba(242,220,231,.1) 0, transparent 4%);background-repeat:no-repeat;}
/* keep it working too when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg]{background:
radial-gradient(1200px 600px at 78% -8%, rgba(217,140,171,.22), transparent 60%),
radial-gradient(1000px 700px at 8% 108%, rgba(143,191,127,.18), transparent 60%),
radial-gradient(520px 420px at 62% 44%, rgba(180,110,150,.12), transparent 66%),
radial-gradient(150% 130% at 50% 44%, transparent 52%, rgba(8,4,8,.7) 100%),
linear-gradient(160deg,#20111c 0%, #150a12 60%, #0c060b 100%) !important;}
[data-chat-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%238fbf7f' fill-opacity='0.12'%3E%3Cpath d='M30 40c26-14 52 0 52 26-26 6-50-6-52-26z'/%3E%3Cpath d='M170 60c-24-16-52-4-54 22 26 8 52-2 54-22z'/%3E%3Cpath d='M60 150c22 18 18 48-6 58-10-24-4-46 6-58z'/%3E%3Cpath d='M180 168c-20 16-16 44 6 54 10-22 4-42-6-54z'/%3E%3C/g%3E%3Cg fill='%23d98cab' fill-opacity='0.1'%3E%3Cpath d='M120 30c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3Cpath d='M28 110c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3Cpath d='M150 190c6-10 14-10 20 0-6 6-14 6-20 0z'/%3E%3C/g%3E%3C/svg%3E");}
[data-chat-bg]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.6;background-image:radial-gradient(circle at 22% 30%, rgba(242,220,231,.14) 0, transparent 4%),radial-gradient(circle at 68% 20%, rgba(217,140,171,.12) 0, transparent 3%),radial-gradient(circle at 82% 66%, rgba(143,191,127,.1) 0, transparent 5%),radial-gradient(circle at 34% 80%, rgba(242,220,231,.1) 0, transparent 4%);background-repeat:no-repeat;}
/* ── Vellum chat skin (Approach A: restyles the stock MinimalMessage) ── */
[data-component="MinimalMessage"]{--vm-portraitA:radial-gradient(70% 42% at 50% 6%, rgba(248,228,238,.55), transparent 58%),radial-gradient(90% 60% at 34% 42%, rgba(200,110,150,.4), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(20,10,18,.9), transparent 66%),linear-gradient(160deg,#e9a7c4,#a35d80 46%,#3a2230 100%);--vm-portraitB:radial-gradient(70% 42% at 50% 6%, rgba(236,246,226,.5), transparent 58%),radial-gradient(90% 60% at 66% 42%, rgba(120,170,104,.36), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(12,20,10,.9), transparent 66%),linear-gradient(160deg,#a7d495,#5f8a52 48%,#233019 100%)}
/* card → portrait-rail grid */
[data-component="MinimalMessage"]{--vm-avatar-w:clamp(150px,18vw,260px);position:relative;display:grid !important;grid-template-columns:var(--vm-avatar-w) minmax(0,1fr);column-gap:clamp(14px,1.6vw,26px);align-items:start;gap:0;padding:0 !important;background:transparent !important;border:0 !important;margin-bottom:clamp(28px,3.4vw,52px) !important;font-family:var(--vm-body,inherit)}
/* neutralize the default card's accent pseudos (::after is reclaimed by the
animated variant for a second particle cluster, so only hide ::before here) */
[data-component="MinimalMessage"]::before{display:none !important}
[data-component="MinimalMessage"]::after{display:none}
[data-component="MinimalMessage"][data-part="user"]{grid-template-columns:minmax(0,1fr) var(--vm-avatar-w) !important}
/* avatar cell → tall masked sticky portrait rail */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]){grid-column:1;grid-row:1;justify-self:start;position:sticky !important;top:24px;width:var(--vm-avatar-w) !important;height:clamp(360px,52vh,560px) !important;border-radius:var(--vm-radius) !important;overflow:hidden !important;isolation:isolate;border:0 !important;-webkit-mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.44) 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgba(0,0,0,.72) 82%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 52%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.44) 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgba(0,0,0,.72) 82%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]){grid-column:2;justify-self:end;-webkit-mask-image:linear-gradient(to left,#000 0,#000 52%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.44) 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgba(0,0,0,.72) 82%,transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 52%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.44) 86%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,rgba(0,0,0,.72) 82%,transparent 100%)}
/* the real avatar <img>/container fills the rail */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img{width:100% !important;height:100% !important;object-fit:cover !important;z-index:1}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])>div{position:absolute !important;inset:0;width:100% !important;height:100% !important}
/* portrait gradient fill BEHIND the avatar image (theme skins paint --portraitA) */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::before{content:"";position:absolute;inset:0;z-index:0;background:var(--vm-portraitA,transparent)}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::before{background:var(--vm-portraitB,transparent)}
/* grain / vignette / frame layer OVER the avatar image */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
/* text column */
[data-component="MinimalMessage"] [class*="bubble" i]{grid-column:2;min-width:0;max-width:none !important}
[data-component="MinimalMessage"][data-part="user"] [class*="bubble" i]{grid-column:1}
/* header: name over a small caps pill row */
[data-component="MinimalMessage"] [class*="header" i]{display:flex !important;flex-direction:column;align-items:center;gap:.35rem;padding:8px 16px 16px;position:relative;margin-bottom:0 !important}
/* meta pill restyled as the small-caps "in scene" chip */
[data-component="MinimalMessage"] [class*="metaPill" i]{font-family:var(--vm-serif,inherit);letter-spacing:.12em;text-transform:uppercase;opacity:.72;background:transparent !important;border:0 !important;color:var(--lumiverse-text-2) !important}
/* content wrapper = the prose card (theme skins add borders/bg via pseudos) */
[data-component="MinimalMessage"] [class*="bubble" i]>[data-component="MessageContent"],[data-component="MinimalMessage"] [class*="bubble" i]>[class*="reasoning" i]{position:relative;isolation:isolate}
[data-component="MinimalMessage"] [data-component="MessageContent"]{position:relative;isolation:isolate;padding:20px 24px;border-radius:var(--vm-radius)}
[data-component="MinimalMessage"] [data-component="MessageContent"]>*{position:relative;z-index:1}
/* justified illuminated-prose type */
[data-component="MinimalMessage"] [data-component="MessageContent"]{font-size:calc(16px * var(--lumiverse-font-scale,1));line-height:1.76;text-align:justify;hyphens:auto;text-wrap:pretty;font-family:var(--vm-body,inherit)}
[data-component="MinimalMessage"] [data-component="MessageContent"] *{font-size:inherit}
/* particle motes: up to 5 per rail, inert (static) unless the animated variant turns them on */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) span[class*="mote"]{display:none}
/* swipe controls + actions: center them, themed pill styling */
[data-component="MinimalMessage"] [data-component="SwipeControls"]{justify-content:center;margin-top:14px;opacity:.9}
[data-component="MinimalMessage"] [class*="actionsWrap" i]{opacity:.55;transition:opacity .2s}
[data-component="MinimalMessage"]:hover [class*="actionsWrap" i]{opacity:1}
@media(max-width:720px){[data-component="MinimalMessage"]{--vm-avatar-w:clamp(64px,26vw,120px)}[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]){height:clamp(180px,48vw,300px) !important;top:14px}}
/* per-theme skin */
[data-component="MinimalMessage"]{--vm-radius:20px}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::after{opacity:.55;mix-blend-mode:screen;background-repeat:no-repeat;background-image:radial-gradient(circle at 22% 26%, rgba(248,220,231,.55),transparent 5px),radial-gradient(circle at 74% 42%, rgba(217,140,171,.45),transparent 6px),radial-gradient(circle at 46% 76%, rgba(248,220,231,.4),transparent 4px),radial-gradient(circle at 88% 84%, rgba(217,140,171,.35),transparent 6px),radial-gradient(circle at 12% 60%, rgba(242,200,220,.4),transparent 5px)}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 12%,rgba(255,255,255,.14),transparent 55%);z-index:3;pointer-events:none}
[data-component="MinimalMessage"] [class*="name" i]{font-family:var(--vm-serif);font-weight:700;font-size:clamp(1.5rem,2vw,2.15rem);line-height:1.02;background:linear-gradient(92deg,#d98cab,#f0b7cf 60%,#8fbf7f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-component="MinimalMessage"][data-part="user"] [class*="name" i]{background:linear-gradient(92deg,#8fbf7f,#c7e3b8 60%,#d98cab);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-component="MinimalMessage"] [class*="metaPill" i]{letter-spacing:.06em;font-size:.72rem;font-weight:700}
[data-component="MinimalMessage"] [data-component="MessageContent"]{overflow:hidden}
[data-component="MinimalMessage"] [data-component="MessageContent"]::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:1px solid var(--glass-border);background:color-mix(in srgb,#1a0e16 42%, transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 12px 32px rgba(0,0,0,.28);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
[data-component="MinimalMessage"] [data-component="MessageContent"]::after{content:"";position:absolute;inset:7px;z-index:0;border-radius:calc(var(--vm-radius) - 8px);border:1.5px dashed color-mix(in srgb,#d98cab 34%,transparent);pointer-events:none;opacity:.8}
[data-component="MinimalMessage"] [data-component="MessageContent"]{font-family:var(--vm-body)}