Gilt ink & rubric red on aged vellum. An illuminated open-codex MinimalMessage override with parchment textures, drop-cap prose, and a gilt-framed portrait rail. This is the ANIMATED variant: drifting portrait particles and a gently moving background.
To customize, look at https://github.com/valdoix/vellum-engine/tree/main/lumithemes.
Palette
9 colours · 6 settings
dark
- Primary
#c79a4e - Secondary
#b34a3a - Background
#231a10 - Text
#e8d6b0 - Danger
#b34a3a - Success
#8f9a4e - Warning
#dcb568 - Speech
#c79a4e - Thoughts
#b59a72
Theme controls
- Accent colour
- 38° · 52% · 54%
- Preferred mode
- dark
- Corner scale
- 1.5
- Glass surfaces
- Yes
- Type scale
- 1
- Character-aware colours
- Yes
Stylesheets
1 stylesheet
/* Vellum · Fantasy — The Open Codex — Vellum globalCSS (Layer 2) */
/* bundled web fonts (shipped as pack assets, not inlined) */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/cormorant-garamond-600-italic.woff2) format('woff2');
}
@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:#231a10;--lumiverse-text:#e8d6b0;--lumiverse-text-2:#b59a72;--lumiverse-accent:#c79a4e;--lumiverse-accent-2:#b34a3a;--glass-border:rgba(199,154,78,.28)}
body{--lumiverse-font-family:var(--vm-body,inherit)}
/* page field painted on the always-present body anchor */
html,body{background:
radial-gradient(1200px 680px at 50% -10%, rgba(220,181,104,.16), transparent 60%),
radial-gradient(900px 640px at 4% 108%, rgba(179,74,58,.12), transparent 62%),
radial-gradient(420px 320px at 96% 8%, rgba(120,80,36,.28), transparent 70%),
radial-gradient(520px 380px at 2% 84%, rgba(96,62,26,.3), transparent 72%),
linear-gradient(90deg, transparent 46%, rgba(20,13,5,.42) 50%, transparent 54%),
linear-gradient(158deg,#3a2b18 0%, #2b2012 55%, #150f07 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;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(140% 120% at 50% 42%, transparent 58%, rgba(12,8,3,.55) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23c79a4e' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M14 14q34 5 34 34M166 14q-34 5-34 34M14 166q34-5 34-34M166 166q-34-5-34-34'/%3E%3Ccircle cx='14' cy='14' r='2'/%3E%3Ccircle cx='166' cy='14' r='2'/%3E%3Ccircle cx='14' cy='166' r='2'/%3E%3Ccircle cx='166' cy='166' r='2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat,repeat;}
/* keep it working too when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg]{background:
radial-gradient(1200px 680px at 50% -10%, rgba(220,181,104,.16), transparent 60%),
radial-gradient(900px 640px at 4% 108%, rgba(179,74,58,.12), transparent 62%),
radial-gradient(420px 320px at 96% 8%, rgba(120,80,36,.28), transparent 70%),
radial-gradient(520px 380px at 2% 84%, rgba(96,62,26,.3), transparent 72%),
linear-gradient(90deg, transparent 46%, rgba(20,13,5,.42) 50%, transparent 54%),
linear-gradient(158deg,#3a2b18 0%, #2b2012 55%, #150f07 100%) !important;}
[data-chat-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");}
[data-chat-bg]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(140% 120% at 50% 42%, transparent 58%, rgba(12,8,3,.55) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23c79a4e' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M14 14q34 5 34 34M166 14q-34 5-34 34M14 166q34-5 34-34M166 166q-34-5-34-34'/%3E%3Ccircle cx='14' cy='14' r='2'/%3E%3Ccircle cx='166' cy='14' r='2'/%3E%3Ccircle cx='14' cy='166' r='2'/%3E%3Ccircle cx='166' cy='166' r='2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat,repeat;}
/* animated variant — page motion (A) */
/* living parchment: the fractal-noise grain (::before) drifts diagonally.
Endpoint = one full 140px tile, so the linear loop is perfectly seamless. */
@keyframes vmFantasyParchment { to { background-position: 140px 140px; } }
/* candlelight: the vignette (::after) breathes with a slow opacity + micro-scale
pulse. scale stays >= 1 so no edges are ever revealed (no inset change). */
@keyframes vmFantasyCandle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .82; transform: scale(1.03); }
}
body::before, [data-chat-bg]::before { animation: vmFantasyParchment 60s linear infinite; }
body::after, [data-chat-bg]::after {
transform-origin: 50% 40%;
animation: vmFantasyCandle 9s ease-in-out infinite;
}
/* respect the OS "reduce motion" setting — freeze all Vellum motion */
@media (prefers-reduced-motion: reduce) {
body::before, body::after,
[data-chat-bg]::before, [data-chat-bg]::after,
[data-component="MinimalMessage"]::after,
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::before { animation: none !important; }
}
/* ── Vellum chat skin (Approach A: restyles the stock MinimalMessage) ── */
[data-component="MinimalMessage"]{--vm-portraitA:radial-gradient(120% 80% at 46% 6%, rgba(255,236,190,.5), transparent 58%),radial-gradient(60% 50% at 88% 92%, rgba(120,78,34,.55), transparent 70%),radial-gradient(40% 34% at 8% 88%, rgba(150,98,44,.4), transparent 72%),linear-gradient(160deg,#e9d5a8,#d8bd86 46%,#b9975c 100%);--vm-portraitB:radial-gradient(120% 80% at 54% 6%, rgba(255,228,196,.46), transparent 58%),radial-gradient(60% 50% at 12% 92%, rgba(150,60,44,.5), transparent 70%),radial-gradient(40% 34% at 92% 86%, rgba(150,98,44,.4), transparent 72%),linear-gradient(160deg,#e6c79c,#cc9a72 48%,#8f5a3a 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:18px}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::after{opacity:.5;mix-blend-mode:multiply;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.85' 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])::after{content:"";position:absolute;inset:6px;border-radius:calc(var(--vm-radius) - 6px);border:1px solid rgba(199,154,78,.55);box-shadow:inset 0 0 0 3px rgba(179,74,58,.12),inset 0 0 26px rgba(60,36,12,.55),inset 0 0 90px rgba(30,18,6,.4);pointer-events:none;z-index:3}
[data-component="MinimalMessage"] [class*="header" i]::before{content:"\2766";color:var(--lumiverse-accent-2);font-size:1rem;opacity:.9;text-shadow:0 0 10px rgba(179,74,58,.5)}
[data-component="MinimalMessage"] [class*="name" i]{font-family:var(--vm-serif);font-weight:700;font-size:clamp(1.6rem,2.1vw,2.3rem);line-height:1.02;background:linear-gradient(92deg,#c79a4e,#dcb568 55%,#c79a4e);-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,#b34a3a,#d97a68 58%,#c79a4e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-component="MinimalMessage"] [class*="metaPill" i]{font-family:var(--vm-serif);letter-spacing:.14em}
[data-component="MinimalMessage"] [data-component="MessageContent"]{border:1px solid var(--glass-border);background:radial-gradient(120% 90% at 50% 0%, rgba(199,154,78,.08), transparent 60%),rgba(46,34,22,.92);box-shadow:inset 0 0 0 1px rgba(199,154,78,.06),0 14px 36px rgba(0,0,0,.5);backdrop-filter:blur(8px) saturate(112%);-webkit-backdrop-filter:blur(8px) saturate(112%)}
[data-component="MinimalMessage"] [class*="bubble" i]::before{position:absolute;inset:0;z-index:0;border-radius:var(--vm-radius);opacity:.28;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.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23lg)' opacity='0.4'/%3E%3C/svg%3E")}
[data-component="MinimalMessage"] [data-component="MessageContent"]::after{content:"";position:absolute;inset:6px;z-index:0;border-radius:calc(var(--vm-radius) - 6px);border:1px solid rgba(199,154,78,.4);pointer-events:none;box-shadow:inset 0 0 0 3px rgba(199,154,78,.05)}
[data-component="MinimalMessage"] [data-component="MessageContent"]::before{content:"";position:absolute;top:14px;bottom:14px;left:0;width:3px;border-radius:2px;background:linear-gradient(180deg,#b34a3a,transparent);opacity:.8}
[data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"]::before{left:auto;right:0;background:linear-gradient(180deg,#c79a4e,transparent)}
[data-component="MinimalMessage"] [data-component="MessageContent"]{font-family:var(--vm-body)}
[data-component="MinimalMessage"] [data-component="MessageContent"] > p:first-of-type::first-letter, [data-component="MinimalMessage"] [data-component="MessageContent"] p:first-of-type::first-letter{font-family:var(--vm-serif);font-weight:700;font-size:3.1em;line-height:.78;float:left;margin:.04em .1em 0 0;color:#b34a3a;text-shadow:0 1px 0 rgba(199,154,78,.4)}
/* animated portrait particles (approach B) — two independently-timed clusters */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(3px 3px at 20% 72%, #dcb568, transparent 62%),radial-gradient(2px 2px at 48% 88%, #dcb568, transparent 62%),radial-gradient(3px 3px at 72% 58%, #dcb568, transparent 62%);
background-repeat: no-repeat;
background-size: 140% 140%,140% 140%,140% 140%;
opacity: .8;
animation: vmFantasyEmber 8s ease-in-out infinite, vmDrift_vellumfantasy 6s ease-in-out infinite;
}
/* second cluster on the reclaimed card ::after, positioned over the rail */
[data-component="MinimalMessage"]::after {
content: "" !important;
display: block !important;
position: absolute;
top: 24px;
left: 0;
width: var(--vm-avatar-w);
height: clamp(360px, 52vh, 560px);
z-index: 2;
pointer-events: none;
background: radial-gradient(2px 2px at 34% 40%, #dcb568, transparent 62%),radial-gradient(3px 3px at 80% 30%, #dcb568, transparent 62%);
background-repeat: no-repeat;
background-size: 140% 140%,140% 140%;
opacity: .7;
animation: vmFantasyEmber 9s ease-in-out 2.2s infinite, vmDrift_vellumfantasy 7.5s ease-in-out .8s infinite reverse;
}
[data-component="MinimalMessage"][data-part="user"]::after { left: auto; right: 0; }
@media (max-width: 720px) {
[data-component="MinimalMessage"]::after { top: 14px; height: clamp(180px, 48vw, 300px); }
}
@keyframes vmDrift_vellumfantasy {
0%, 100% { background-position: 0 0, 0 0, 0 0; }
50% { background-position: 6% -10%, -8% 6%, 4% -6%; }
}
@keyframes vmFantasyEmber{0%{transform:translateY(0);opacity:0}12%{opacity:.6}82%{opacity:.5}100%{transform:translateY(-340px);opacity:0}}