jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate design system from ethereal/cool to warm/craft/guild theme

Browse source 
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
Jennie Robinson Faber 2026-02-24 20:01:11 +00:00
parent d588c49946
commit a62e167876
39 changed files with 1300 additions and 2087 deletions
Download patch file Download diff file Expand all files Collapse all files

60
app/pages/welcome.vue
View file

@ -7,7 +7,7 @@
size="large"
/>
<section class="py-16 bg-ghost-900">
<section class="py-16 bg-guild-900">
<UContainer>
<div class="max-w-4xl mx-auto">
<!-- Welcome Message -->
@ -26,17 +26,17 @@
class="w-full h-full object-contain"
/>
</div>
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
<h2 class="text-2xl font-bold text-guild-100 mb-4">
Hey {{ memberData?.name || "there" }}!
</h2>
<p class="text-lg text-ghost-300 max-w-2xl mx-auto">
<p class="text-lg text-guild-300 max-w-2xl mx-auto">
You've joined a an awesome community!!👻 Welcome to Ghost guild…
</p>
</div>
<!-- Getting Started Steps -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
<div
class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4"
>
@ -45,10 +45,10 @@
class="w-6 h-6 text-purple-400"
/>
</div>
<h3 class="font-semibold text-ghost-100 mb-2">
<h3 class="font-semibold text-guild-100 mb-2">
1. Complete Your Profile
</h3>
<p class="text-sm text-ghost-400 mb-4">
<p class="text-sm text-guild-400 mb-4">
Tell the community about yourself, your skills, and what you're
looking for.
</p>
@ -57,7 +57,7 @@
</UButton>
</div>
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
<div
class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4"
>
@ -66,10 +66,10 @@
class="w-6 h-6 text-blue-400"
/>
</div>
<h3 class="font-semibold text-ghost-100 mb-2">
<h3 class="font-semibold text-guild-100 mb-2">
2. Join an Event
</h3>
<p class="text-sm text-ghost-400 mb-4">
<p class="text-sm text-guild-400 mb-4">
From workshops to game nights, events are the heart of our
community.
</p>
@ -78,16 +78,16 @@
</UButton>
</div>
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
<div
class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4"
>
<Icon name="heroicons:users" class="w-6 h-6 text-green-400" />
</div>
<h3 class="font-semibold text-ghost-100 mb-2">
<h3 class="font-semibold text-guild-100 mb-2">
3. Meet the Community
</h3>
<p class="text-sm text-ghost-400 mb-4">
<p class="text-sm text-guild-400 mb-4">
Connect with other members and find peers for support and
collaboration.
</p>
@ -99,12 +99,12 @@
<!-- About Circles -->
<div
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
>
<h3 class="text-xl font-bold text-ghost-100 mb-4">
<h3 class="text-xl font-bold text-guild-100 mb-4">
Understanding Circles
</h3>
<p class="text-ghost-300 mb-6">
<p class="text-guild-300 mb-6">
Ghost Guild is organized into three circles based on where you are
in your journey. Your circle helps us tailor events and resources
to your needs.
@ -116,10 +116,10 @@
:class="
memberData?.circle === 'community'
? 'bg-purple-500/20 border border-purple-500/50'
: 'bg-ghost-800/50'
: 'bg-guild-800/50'
"
>
<h4 class="font-semibold text-ghost-100 mb-2">
<h4 class="font-semibold text-guild-100 mb-2">
Community Circle
<span
v-if="memberData?.circle === 'community'"
@ -127,7 +127,7 @@
>← You're here</span
>
</h4>
<p class="text-sm text-ghost-400">
<p class="text-sm text-guild-400">
For those exploring solidarity economics and alternative
studio models.
</p>
@ -138,10 +138,10 @@
:class="
memberData?.circle === 'founder'
? 'bg-purple-500/20 border border-purple-500/50'
: 'bg-ghost-800/50'
: 'bg-guild-800/50'
"
>
<h4 class="font-semibold text-ghost-100 mb-2">
<h4 class="font-semibold text-guild-100 mb-2">
Founder Circle
<span
v-if="memberData?.circle === 'founder'"
@ -149,7 +149,7 @@
>← You're here</span
>
</h4>
<p class="text-sm text-ghost-400">
<p class="text-sm text-guild-400">
For those actively building or running a cooperative or
solidarity-based studio.
</p>
@ -160,10 +160,10 @@
:class="
memberData?.circle === 'practitioner'
? 'bg-purple-500/20 border border-purple-500/50'
: 'bg-ghost-800/50'
: 'bg-guild-800/50'
"
>
<h4 class="font-semibold text-ghost-100 mb-2">
<h4 class="font-semibold text-guild-100 mb-2">
Practitioner Circle
<span
v-if="memberData?.circle === 'practitioner'"
@ -171,7 +171,7 @@
>← You're here</span
>
</h4>
<p class="text-sm text-ghost-400">
<p class="text-sm text-guild-400">
For consultants, advisors, and professionals supporting
cooperative game studios.
</p>
@ -181,9 +181,9 @@
<!-- Resources -->
<div
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
>
<h3 class="text-xl font-bold text-ghost-100 mb-4">
<h3 class="text-xl font-bold text-guild-100 mb-4">
Resources & Support
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -197,10 +197,10 @@
/>
</div>
<div>
<h4 class="font-semibold text-ghost-100 mb-1">
<h4 class="font-semibold text-guild-100 mb-1">
Resource Library
</h4>
<p class="text-sm text-ghost-400 mb-2">
<p class="text-sm text-guild-400 mb-2">
Templates, guides, and tools for building solidarity-based
studios.
</p>
@ -226,10 +226,10 @@
/>
</div>
<div>
<h4 class="font-semibold text-ghost-100 mb-1">
<h4 class="font-semibold text-guild-100 mb-1">
Peer Support
</h4>
<p class="text-sm text-ghost-400 mb-2">
<p class="text-sm text-guild-400 mb-2">
Connect 1:1 with community members for advice and support.
</p>
<UButton