Vellum · Ember — A Starlit Night, Dreaming

ThemeNo adult content
rabbitsgohopPublished 11 July 2026
Vellum · Ember — A Starlit Night, Dreaming
Lilac & mint over the indigo void. A dreamy starfield MinimalMessage override with nebula backgrounds, twinkling drift, and a gilt-edge 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#b8a9ff
Secondary#8fd6c8
Background#0d0d1a
Text#e6e0f5
Danger#e08aa0
Success#8fd6c8
Warning#e8d6a0
Speech#b8a9ff
Thoughts#b0a8d0
Theme controls6 settings

Accent colour: 251° · 100% · 83%
Preferred mode: dark
Corner scale: 1.83
Glass surfaces: Yes
Type scale: 1
Character-aware colours: Yes
Stylesheets

1 stylesheet
Main stylesheet
/* Vellum · Ember — A Starlit Night, Dreaming — 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');
}

@font-face  {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/quicksand-400-normal.woff2) format('woff2');
}

@font-face  {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/quicksand-500-normal.woff2) format('woff2');
}

@font-face  {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/quicksand-700-normal.woff2) format('woff2');
}

:root{--vm-serif:'Cormorant Garamond',Georgia,serif;--vm-body:'EB Garamond',Georgia,serif;--vm-ethereal:'Quicksand','Cormorant Garamond',Georgia,serif;--lumiverse-bg:#0d0d1a;--lumiverse-text:#e6e0f5;--lumiverse-text-2:#b0a8d0;--lumiverse-accent:#b8a9ff;--lumiverse-accent-2:#8fd6c8;--glass-border:rgba(184,169,255,.16)}
body{--lumiverse-font-family:var(--vm-body,inherit)}
@keyframes vmTwinkleBg{0%,100%{opacity:.55}50%{opacity:.85}}
/* page field painted on the always-present body anchor */
html,body{background:
      radial-gradient(1100px 620px at 82% -10%, rgba(184,169,255,.22), transparent 60%),
      radial-gradient(960px 720px at 6% 112%, rgba(143,214,200,.16), transparent 60%),
      radial-gradient(520px 420px at 68% 42%, rgba(150,120,220,.12), transparent 66%),
      radial-gradient(600px 300px at 30% 20%, rgba(120,150,220,.1), transparent 70%),
      radial-gradient(150% 130% at 50% 46%, transparent 52%, rgba(4,4,10,.72) 100%),
      linear-gradient(165deg,#141430 0%, #0d0d1c 58%, #06060d 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:.7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='30' r='1.1' fill-opacity='0.7'/%3E%3Ccircle cx='120' cy='18' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='72' cy='84' r='1.3' fill-opacity='0.6'/%3E%3Ccircle cx='140' cy='120' r='0.9' fill-opacity='0.55'/%3E%3Ccircle cx='40' cy='134' r='1' fill-opacity='0.45'/%3E%3Ccircle cx='196' cy='60' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='178' cy='168' r='0.8' fill-opacity='0.4'/%3E%3Ccircle cx='90' cy='196' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3Cg fill='%23b8a9ff'%3E%3Ccircle cx='60' cy='50' r='0.9' fill-opacity='0.5'/%3E%3Ccircle cx='150' cy='40' r='0.7' fill-opacity='0.4'/%3E%3Ccircle cx='30' cy='180' r='0.8' fill-opacity='0.45'/%3E%3Ccircle cx='206' cy='110' r='0.9' fill-opacity='0.4'/%3E%3C/g%3E%3Cg fill='%238fd6c8'%3E%3Ccircle cx='96' cy='52' r='0.9' fill-opacity='0.45'/%3E%3Ccircle cx='16' cy='96' r='1' fill-opacity='0.4'/%3E%3Ccircle cx='128' cy='72' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='170' cy='210' r='0.9' fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");animation:vmTwinkleBg 6s ease-in-out infinite}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;mix-blend-mode:screen;background-size:cover;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='neb'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.85  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23neb)'/%3E%3C/svg%3E");}
/* keep it working too when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg]{background:
      radial-gradient(1100px 620px at 82% -10%, rgba(184,169,255,.22), transparent 60%),
      radial-gradient(960px 720px at 6% 112%, rgba(143,214,200,.16), transparent 60%),
      radial-gradient(520px 420px at 68% 42%, rgba(150,120,220,.12), transparent 66%),
      radial-gradient(600px 300px at 30% 20%, rgba(120,150,220,.1), transparent 70%),
      radial-gradient(150% 130% at 50% 46%, transparent 52%, rgba(4,4,10,.72) 100%),
      linear-gradient(165deg,#141430 0%, #0d0d1c 58%, #06060d 100%) !important;}
[data-chat-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='30' r='1.1' fill-opacity='0.7'/%3E%3Ccircle cx='120' cy='18' r='0.8' fill-opacity='0.5'/%3E%3Ccircle cx='72' cy='84' r='1.3' fill-opacity='0.6'/%3E%3Ccircle cx='140' cy='120' r='0.9' fill-opacity='0.55'/%3E%3Ccircle cx='40' cy='134' r='1' fill-opacity='0.45'/%3E%3Ccircle cx='196' cy='60' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='178' cy='168' r='0.8' fill-opacity='0.4'/%3E%3Ccircle cx='90' cy='196' r='1.1' fill-opacity='0.5'/%3E%3C/g%3E%3Cg fill='%23b8a9ff'%3E%3Ccircle cx='60' cy='50' r='0.9' fill-opacity='0.5'/%3E%3Ccircle cx='150' cy='40' r='0.7' fill-opacity='0.4'/%3E%3Ccircle cx='30' cy='180' r='0.8' fill-opacity='0.45'/%3E%3Ccircle cx='206' cy='110' r='0.9' fill-opacity='0.4'/%3E%3C/g%3E%3Cg fill='%238fd6c8'%3E%3Ccircle cx='96' cy='52' r='0.9' fill-opacity='0.45'/%3E%3Ccircle cx='16' cy='96' r='1' fill-opacity='0.4'/%3E%3Ccircle cx='128' cy='72' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='170' cy='210' r='0.9' fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");animation:vmTwinkleBg 6s ease-in-out infinite}
[data-chat-bg]::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;mix-blend-mode:screen;background-size:cover;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='neb'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.85  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23neb)'/%3E%3C/svg%3E");}

/* ── Vellum chat skin (Approach A: restyles the stock MinimalMessage) ── */
[data-component="MinimalMessage"]{--vm-portraitA:radial-gradient(70% 42% at 50% 6%, rgba(230,224,255,.6), transparent 58%),radial-gradient(90% 60% at 30% 40%, rgba(150,120,220,.4), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(10,10,26,.9), transparent 66%),linear-gradient(160deg,#cabfff,#7a68c6 46%,#26224a 100%);--vm-portraitB:radial-gradient(70% 42% at 50% 6%, rgba(214,244,236,.5), transparent 58%),radial-gradient(90% 60% at 70% 40%, rgba(90,180,164,.34), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(8,20,18,.9), transparent 66%),linear-gradient(160deg,#b3ebe0,#559a8c 48%,#1c3a34 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:22px}


[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div::after{opacity:.85;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='18' cy='22' r='0.9' fill-opacity='0.8'/%3E%3Ccircle cx='70' cy='40' r='0.7' fill-opacity='0.6'/%3E%3Ccircle cx='100' cy='16' r='0.8' fill-opacity='0.7'/%3E%3Ccircle cx='44' cy='70' r='0.6' fill-opacity='0.5'/%3E%3Ccircle cx='96' cy='90' r='0.9' fill-opacity='0.7'/%3E%3Ccircle cx='30' cy='104' r='0.7' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E")}
[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,.16),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,#b8a9ff,#d6cbff 60%,#8fd6c8);-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,#8fd6c8,#c2efe6 60%,#b8a9ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-component="MinimalMessage"] [class*="metaPill" i]{font-family:var(--vm-ethereal);font-weight:700;letter-spacing:.08em;font-size:.68rem}
[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,#0d0d1a 42%, transparent);box-shadow:inset 0 0 0 1px rgba(184,169,255,.05),0 12px 36px rgba(0,0,0,.36);backdrop-filter:blur(12px) saturate(122%);-webkit-backdrop-filter:blur(12px) saturate(122%)}
[data-component="MinimalMessage"] [data-component="MessageContent"]::after{content:"";position:absolute;inset:6px;z-index:0;border-radius:calc(var(--vm-radius) - 8px);border:1px solid color-mix(in srgb,#b8a9ff 36%,transparent);box-shadow:inset 0 0 14px color-mix(in srgb,#b8a9ff 14%,transparent);pointer-events:none;opacity:.85}
[data-component="MinimalMessage"] [data-component="MessageContent"]{font-family:var(--vm-body)}
7 attached files: assets/fonts/cormorant-garamond-600-normal.woff2, assets/fonts/cormorant-garamond-700-normal.woff2, assets/fonts/eb-garamond-400-italic.woff2, assets/fonts/eb-garamond-400-normal.woff2, assets/fonts/quicksand-400-normal.woff2, assets/fonts/quicksand-500-normal.woff2, assets/fonts/quicksand-700-normal.woff2