Gilt gold on midnight & champagne. A hard-edged Deco MinimalMessage override with sunburst backgrounds, 3px gold card rules, corner accent bars, and gold shimmer.
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
#d4af37 - Secondary
#e8c85a - Background
#0a0806 - Text
#f8e5a0 - Danger
#b34a3a - Success
#c99a2e - Warning
#e8c85a - Speech
#d4af37 - Thoughts
#c8a870
Theme controls
- Accent colour
- 46° · 65% · 52%
- Preferred mode
- dark
- Corner scale
- 0
- Glass surfaces
- Yes
- Type scale
- 1
- Character-aware colours
- Yes
Stylesheets
1 stylesheet
/* Vellum · Gatsby — Jazz Age Opulence — Vellum globalCSS (Layer 2) */
/* bundled web fonts (shipped as pack assets, not inlined) */
@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');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/playfair-display-600-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/playfair-display-700-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Poiret One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/poiret-one-400-normal.woff2) format('woff2');
}
:root{--vm-serif:'Playfair Display',Georgia,serif;--vm-body:'EB Garamond',Georgia,serif;--vm-deco:'Poiret One','Playfair Display',Georgia,serif;--lumiverse-bg:#0a0806;--lumiverse-text:#f8e5a0;--lumiverse-text-2:#c8a870;--lumiverse-accent:#d4af37;--lumiverse-accent-2:#e8c85a;--glass-border:rgba(212,175,55,.35)}
body{--lumiverse-font-family:var(--vm-body,inherit)}
/* page field painted on the always-present body anchor */
html,body{background:
radial-gradient(720px 460px at 50% -4%, rgba(232,200,90,.22), transparent 62%),
radial-gradient(560px 420px at 88% 12%, rgba(212,175,55,.12), transparent 66%),
radial-gradient(600px 460px at 6% 96%, rgba(212,175,55,.14), transparent 68%),
radial-gradient(140% 130% at 50% 46%, transparent 52%, rgba(4,3,2,.72) 100%),
linear-gradient(180deg,#141009 0%, #0a0806 55%, #050403 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;top:-46vh;left:50%;transform:translateX(-50%);width:190vw;height:190vw;inset:auto;opacity:.16;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(232,200,90,.9) 0deg, rgba(232,200,90,.9) .5deg, transparent .5deg, transparent 6deg);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 44%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 44%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.9;background-image:radial-gradient(circle at 18% 24%, rgba(232,200,90,.10) 0, transparent 5%),radial-gradient(circle at 74% 16%, rgba(212,175,55,.09) 0, transparent 4%),radial-gradient(circle at 86% 62%, rgba(232,200,90,.08) 0, transparent 6%),radial-gradient(circle at 30% 78%, rgba(212,175,55,.08) 0, transparent 5%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M0 30l15-15 15 15 15-15 15 15'/%3E%3Cpath d='M0 45l15-15 15 15 15-15 15 15'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;}
/* keep it working too when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg]{background:
radial-gradient(720px 460px at 50% -4%, rgba(232,200,90,.22), transparent 62%),
radial-gradient(560px 420px at 88% 12%, rgba(212,175,55,.12), transparent 66%),
radial-gradient(600px 460px at 6% 96%, rgba(212,175,55,.14), transparent 68%),
radial-gradient(140% 130% at 50% 46%, transparent 52%, rgba(4,3,2,.72) 100%),
linear-gradient(180deg,#141009 0%, #0a0806 55%, #050403 100%) !important;}
[data-chat-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;top:-46vh;left:50%;transform:translateX(-50%);width:190vw;height:190vw;inset:auto;opacity:.16;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(232,200,90,.9) 0deg, rgba(232,200,90,.9) .5deg, transparent .5deg, transparent 6deg);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 44%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 44%);}
[data-chat-bg]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.9;background-image:radial-gradient(circle at 18% 24%, rgba(232,200,90,.10) 0, transparent 5%),radial-gradient(circle at 74% 16%, rgba(212,175,55,.09) 0, transparent 4%),radial-gradient(circle at 86% 62%, rgba(232,200,90,.08) 0, transparent 6%),radial-gradient(circle at 30% 78%, rgba(212,175,55,.08) 0, transparent 5%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M0 30l15-15 15 15 15-15 15 15'/%3E%3Cpath d='M0 45l15-15 15 15 15-15 15 15'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;}
/* ── Vellum chat skin (Approach A: restyles the stock MinimalMessage) ── */
[data-component="MinimalMessage"]{--vm-portraitA:radial-gradient(90% 60% at 50% 8%, rgba(244,230,168,.55), transparent 58%),repeating-conic-gradient(from 0deg at 50% 30%, rgba(201,154,46,.16) 0deg, rgba(201,154,46,.16) 1deg, transparent 1deg, transparent 9deg),radial-gradient(70% 40% at 50% 100%, rgba(20,12,4,.85), transparent 66%),linear-gradient(165deg,#e8c85a,#b8902a 46%,#241606 100%);--vm-portraitB:radial-gradient(90% 60% at 50% 8%, rgba(232,222,178,.42), transparent 58%),repeating-conic-gradient(from 0deg at 50% 30%, rgba(160,132,70,.14) 0deg, rgba(160,132,70,.14) 1deg, transparent 1deg, transparent 9deg),radial-gradient(70% 40% at 50% 100%, rgba(14,10,6,.88), transparent 66%),linear-gradient(165deg,#d9c9a0,#8f7038 48%,#1c140a 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:0px}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::after{opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::before{content:"";position:absolute;top:8px;left:8px;width:44px;height:3px;background:#d4af37;box-shadow:0 0 10px rgba(212,175,55,.6);z-index:3}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after{content:"";position:absolute;top:8px;left:8px;width:3px;height:44px;background:#d4af37;box-shadow:0 0 10px rgba(212,175,55,.6);z-index:3}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::before,[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::after{left:auto;right:8px}
[data-component="MinimalMessage"] [class*="header" i]::before{content:"\2726";color:#d4af37;font-size:1rem;opacity:.9;text-shadow:0 0 12px rgba(212,175,55,.6);animation:vmShimmer 4s ease-in-out infinite}
@keyframes vmShimmer{0%,100%{opacity:.5;text-shadow:0 0 12px rgba(212,175,55,.4)}50%{opacity:1;text-shadow:0 0 22px rgba(212,175,55,.85)}}
@keyframes vmPulse{0%,100%{opacity:1}50%{opacity:.55}}
[data-component="MinimalMessage"] [class*="name" i]{font-family:var(--vm-deco);font-weight:400;font-size:clamp(1.6rem,2.2vw,2.3rem);line-height:1.02;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(92deg,#d4af37,#f8e5a0 55%,#d4af37);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-component="MinimalMessage"] [class*="metaPill" i]{font-family:var(--vm-deco);letter-spacing:.22em;font-size:.7rem}
[data-component="MinimalMessage"] [data-component="MessageContent"]{border:1px solid rgba(212,175,55,.35);border-top:3px solid #d4af37;border-bottom:3px solid #d4af37;background:rgba(20,16,12,.95);box-shadow:inset 0 0 24px rgba(212,175,55,.06),0 14px 40px rgba(0,0,0,.6);backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%)}
[data-component="MinimalMessage"] [class*="bubble" i]::before{position:absolute;inset:0;z-index:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='lg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23lg)' opacity='0.5'/%3E%3C/svg%3E")}
[data-component="MinimalMessage"] [data-component="MessageContent"]::before{content:"";position:absolute;top:0;left:0;width:46px;height:3px;background:#d4af37;animation:vmPulse 3s ease-in-out infinite;z-index:1}
[data-component="MinimalMessage"] [data-component="MessageContent"]::after{content:"";position:absolute;top:0;right:0;width:46px;height:3px;background:#d4af37;animation:vmPulse 3s ease-in-out infinite;z-index:1}
[data-component="MinimalMessage"] [data-component="MessageContent"]{font-family:var(--vm-body)}