Skip to content

Invert color scheme to vellum/parchment aesthetic #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: deployment-verification-15276995407801320917
Choose a base branch
from
Draft

Invert color scheme to vellum/parchment aesthetic #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eae1bd5
Initial plan
Copilot Feb 5, 2026
2017ff0
Restore vellum b/w aesthetic with light paper-like theme
Copilot Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
rel="stylesheet">
<style>
body {
background-color: #050505;
color: #ffffff;
background-color: #f5f5f0;
color: #1a1a1a;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
Expand Down
19 changes: 17 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
}

body {
background-color: #050505; /* Deep Void */
color: #e5e5e5;
background-color: #f5f5f0; /* Vellum/Parchment tone */
color: #1a1a1a;
font-family: 'Courier New', Courier, monospace;
font-size: var(--font-body);
display: flex;
Expand All @@ -27,9 +27,9 @@ body {
width: 100%;
max-width: var(--app-max-width);
min-height: 100vh;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
background-color: #0a0a0a;
border-left: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid rgba(0, 0, 0, 0.08);
background-color: #fafaf8;
position: relative;
}

Expand Down
20 changes: 10 additions & 10 deletions src/pages/Start.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ const Start = () => {
};

return (
<div className="flex flex-col min-h-screen p-8 justify-center bg-[#050505]">
<div className="flex flex-col min-h-screen p-8 justify-center bg-[#fafaf8]">

{/* Header: Plain English, High Impact */}
<div className="text-center mb-10">
<h1 className="text-4xl font-serif italic text-white mb-4 leading-tight">
<h1 className="text-4xl font-serif italic text-black mb-4 leading-tight">
The Missing Manual.
</h1>
<p className="text-gray-400 text-sm leading-relaxed max-w-[280px] mx-auto">
<p className="text-gray-600 text-sm leading-relaxed max-w-[280px] mx-auto">
Most relationship friction comes from running on different operating systems.
<br /><br />
Enter your details to unlock your guide.
Expand All @@ -51,48 +51,48 @@ const Start = () => {

{/* Date */}
<div className="space-y-2">
<label className="block text-xs uppercase tracking-widest text-gray-500">Birth Date</label>
<label className="block text-xs uppercase tracking-widest text-gray-600">Birth Date</label>
<input
type="date"
name="birthDate"
value={formData.birthDate}
onChange={handleChange}
required
className="w-full bg-[#111] border border-white/10 p-4 text-white focus:border-white/40 outline-none rounded-sm transition-colors"
className="w-full bg-white border border-black/10 p-4 text-black focus:border-black/30 outline-none rounded-sm transition-colors"
/>
</div>

{/* Time */}
<div className="space-y-2">
<label className="block text-xs uppercase tracking-widest text-gray-500">Birth Time</label>
<label className="block text-xs uppercase tracking-widest text-gray-600">Birth Time</label>
<input
type="time"
name="birthTime"
value={formData.birthTime}
onChange={handleChange}
required
className="w-full bg-[#111] border border-white/10 p-4 text-white focus:border-white/40 outline-none rounded-sm transition-colors"
className="w-full bg-white border border-black/10 p-4 text-black focus:border-black/30 outline-none rounded-sm transition-colors"
/>
</div>

{/* Location */}
<div className="space-y-2">
<label className="block text-xs uppercase tracking-widest text-gray-500">Location</label>
<label className="block text-xs uppercase tracking-widest text-gray-600">Location</label>
<input
type="text"
name="location"
value={formData.location}
onChange={handleChange}
required
placeholder="e.g. London, UK"
className="w-full bg-[#111] border border-white/10 p-4 text-white focus:border-white/40 outline-none rounded-sm transition-colors placeholder:text-gray-700"
className="w-full bg-white border border-black/10 p-4 text-black focus:border-black/30 outline-none rounded-sm transition-colors placeholder:text-gray-400"
/>
</div>

{/* Action Button: 'Alive' Animation applied */}
<button
type="submit"
className="btn-alive w-full bg-white text-black py-4 font-bold tracking-widest uppercase hover:bg-gray-200 transition-colors mt-4"
className="btn-alive w-full bg-black text-white py-4 font-bold tracking-widest uppercase hover:bg-gray-800 transition-colors mt-4"
>
View Manual
</button>
Expand Down