Vellum · Faewild — A Twilight Storybook Glade

ThemeNo adult content
rabbitsgohopPublished 11 July 2026
Vellum · Faewild — A Twilight Storybook Glade
Sage & lilac among the fairy lights. A moonlit-glade MinimalMessage override with leaf-canopy textures, godrays, drifting motes, and a lantern 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#8fbf88
Secondary#c9b6f0
Background#101a14
Text#e6efe0
Danger#c98a8a
Success#8fbf88
Warning#d8c98a
Speech#8fbf88
Thoughts#aec2ac
Theme controls6 settings

Accent colour: 112° · 30% · 64%
Preferred mode: dark
Corner scale: 1.83
Glass surfaces: Yes
Type scale: 1
Character-aware colours: Yes
Stylesheets

1 stylesheet
Main stylesheet
/* Vellum · Faewild — A Twilight Storybook Glade — 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:#101a14;--lumiverse-text:#e6efe0;--lumiverse-text-2:#aec2ac;--lumiverse-accent:#8fbf88;--lumiverse-accent-2:#c9b6f0;--glass-border:rgba(143,191,136,.16)}
body{--lumiverse-font-family:var(--vm-body,inherit)}

/* page field painted on the always-present body anchor */
html,body{background:
      radial-gradient(1100px 620px at 80% -10%, rgba(201,182,240,.22), transparent 60%),
      radial-gradient(980px 720px at 6% 110%, rgba(143,191,136,.2), transparent 60%),
      radial-gradient(520px 420px at 56% 46%, rgba(120,150,110,.14), transparent 66%),
      radial-gradient(150% 132% at 50% 46%, transparent 52%, rgba(4,9,6,.72) 100%),
      linear-gradient(165deg,#16241b 0%, #0f1a13 58%, #08110b 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:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%238fbf88' fill-opacity='0.13'%3E%3Cpath d='M28 34c30-14 58 0 58 28-28 8-56-6-58-28z'/%3E%3Cpath d='M188 56c-26-16-56-4-58 24 28 8 56-2 58-24z'/%3E%3Cpath d='M56 150c24 18 20 50-6 60-12-24-6-48 6-60z'/%3E%3Cpath d='M186 170c-22 16-18 46 6 56 12-22 6-44-6-56z'/%3E%3C/g%3E%3Cg fill='%23c9b6f0' fill-opacity='0.11'%3E%3Ccircle cx='120' cy='40' r='2'/%3E%3Ccircle cx='40' cy='120' r='1.6'/%3E%3Ccircle cx='170' cy='120' r='1.8'/%3E%3Cpath d='M96 96c12-6 22 2 20 14-12 0-20-4-20-14z'/%3E%3C/g%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.6;background:linear-gradient(114deg, transparent 46%, rgba(201,182,240,.08) 52%, transparent 58%),linear-gradient(120deg, transparent 62%, rgba(220,230,210,.06) 68%, transparent 74%),radial-gradient(120% 60% at 50% 118%, rgba(180,200,180,.12), transparent 60%);}
/* keep it working too when a wallpaper sets [data-chat-bg] on <html> */
[data-chat-bg]{background:
      radial-gradient(1100px 620px at 80% -10%, rgba(201,182,240,.22), transparent 60%),
      radial-gradient(980px 720px at 6% 110%, rgba(143,191,136,.2), transparent 60%),
      radial-gradient(520px 420px at 56% 46%, rgba(120,150,110,.14), transparent 66%),
      radial-gradient(150% 132% at 50% 46%, transparent 52%, rgba(4,9,6,.72) 100%),
      linear-gradient(165deg,#16241b 0%, #0f1a13 58%, #08110b 100%) !important;}
[data-chat-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%238fbf88' fill-opacity='0.13'%3E%3Cpath d='M28 34c30-14 58 0 58 28-28 8-56-6-58-28z'/%3E%3Cpath d='M188 56c-26-16-56-4-58 24 28 8 56-2 58-24z'/%3E%3Cpath d='M56 150c24 18 20 50-6 60-12-24-6-48 6-60z'/%3E%3Cpath d='M186 170c-22 16-18 46 6 56 12-22 6-44-6-56z'/%3E%3C/g%3E%3Cg fill='%23c9b6f0' fill-opacity='0.11'%3E%3Ccircle cx='120' cy='40' r='2'/%3E%3Ccircle cx='40' cy='120' r='1.6'/%3E%3Ccircle cx='170' cy='120' r='1.8'/%3E%3Cpath d='M96 96c12-6 22 2 20 14-12 0-20-4-20-14z'/%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:linear-gradient(114deg, transparent 46%, rgba(201,182,240,.08) 52%, transparent 58%),linear-gradient(120deg, transparent 62%, rgba(220,230,210,.06) 68%, transparent 74%),radial-gradient(120% 60% at 50% 118%, rgba(180,200,180,.12), transparent 60%);}

/* ── Vellum chat skin (Approach A: restyles the stock MinimalMessage) ── */
[data-component="MinimalMessage"]{--vm-portraitA:radial-gradient(70% 42% at 50% 6%, rgba(224,236,214,.5), transparent 58%),radial-gradient(90% 60% at 34% 42%, rgba(120,164,110,.42), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(10,18,12,.9), transparent 66%),linear-gradient(160deg,#b6dcaf,#6f9e68 46%,#22321f 100%);--vm-portraitB:radial-gradient(70% 42% at 50% 6%, rgba(232,224,248,.5), transparent 58%),radial-gradient(90% 60% at 66% 42%, rgba(160,140,208,.4), transparent 64%),radial-gradient(60% 40% at 50% 100%, rgba(14,10,22,.9), transparent 66%),linear-gradient(160deg,#ddccf7,#a58fd6 48%,#342a48 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:.7;mix-blend-mode:screen;background-repeat:no-repeat;background-image:radial-gradient(circle at 28% 30%, rgba(206,234,150,.85),rgba(206,234,150,0) 4px),radial-gradient(circle at 68% 20%, rgba(201,182,240,.7),rgba(201,182,240,0) 5px),radial-gradient(circle at 50% 64%, rgba(220,240,170,.75),rgba(220,240,170,0) 4px),radial-gradient(circle at 84% 78%, rgba(180,220,140,.6),rgba(180,220,140,0) 6px),radial-gradient(circle at 16% 82%, rgba(201,182,240,.6),rgba(201,182,240,0) 4px)}
[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,.15),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,#8fbf88,#bfe0b8 60%,#c9b6f0);-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,#c9b6f0,#e3d8f7 60%,#8fbf88);-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,#101a14 42%, transparent);box-shadow:inset 0 0 0 1px rgba(143,191,136,.05),0 12px 34px rgba(0,0,0,.34);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) - 6px);border:1.5px solid color-mix(in srgb,#8fbf88 34%,transparent);box-shadow:inset 0 0 16px color-mix(in srgb,#c9b6f0 12%,transparent);pointer-events:none;opacity:.8}
[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