Instruction file imported from Mustafa-tariq23/subconciously (
.github/instructions/design-system.instructions.md). Copyright stays with the author.
Design System — Dark Eggplant × Violet × Fuchsia
This project uses a dark, premium design language built on deep eggplant purples, violet accents, and vivid pink CTAs. Every component must feel polished, atmospheric, and cohesive.
Website Parity Brief (subconsciously.com)
When rebuilding sections inspired by https://subconsciously.com/, preserve the information architecture and section intent, but improve visual craft with this palette.
Required Section Inventory
- Hero section with atmospheric background image, strong value proposition, and app-store CTAs.
- Social proof/testimonial wall with star ratings and short quotes.
- "Meet Aaron" profile section with FAQ list and portrait.
- "How to Subscribe" 3-step walkthrough with mobile mockup visuals.
- "Master these Issues" list section with alphabetized concerns and supporting image.
- Footer with logo lockup, nav links, social icons, legal links, and contact email.
Component Breakdown (recommended)
HeroSectionStoreBadgeRowQuoteColumn+TestimonialWallMeetExpertSectionFaqListSubscribeStepsIssuesShowcaseSiteFooter
Similar, Not Identical Rules
- Keep section order and messaging intent similar; do not copy exact spacing or typography from screenshots.
- Replace flat black backgrounds with eggplant/violet depth layers from this system.
- Keep brand pink as a key accent for headings and CTA emphasis.
- Prefer cleaner typographic rhythm and better mobile spacing than the source.
- Use royalty-safe assets or placeholder assets where originals are unavailable.
Colour Tokens
Define all colours as CSS custom properties in globals.css under @theme inline so Tailwind v4 utilities pick them up automatically.
@theme inline {
/* Backgrounds */
--color-bg-primary: #140a26;
--color-bg-secondary: #24163e;
/* Brand gradient endpoints */
--color-grad-start: #24163e;
--color-grad-end: #140a26;
/* CTA / primary action */
--color-cta: #e64a87;
--color-cta-pressed: #cc3f77;
--color-cta-glow: rgba(230, 74, 135, 0.22);
/* Accent */
--color-accent: #7a5ae6;
--color-accent-deep: #5e43c7;
--color-accent-soft: rgba(122, 90, 230, 0.12);
/* Text */
--color-text-primary: #ffffff;
--color-text-secondary: rgba(255, 255, 255, 0.72);
--color-text-tertiary: rgba(255, 255, 255, 0.45);
/* Surfaces */
--color-card: rgba(255, 255, 255, 0.035);
--color-card-hover: rgba(255, 255, 255, 0.075);
--color-divider: rgba(255, 255, 255, 0.08);
--color-track: rgba(255, 255, 255, 0.1);
/* Decorative */
--color-ring-track: #2a2140;
--color-avatar-halo: rgba(139, 92, 246, 0.35);
--color-avatar-glow: rgba(255, 77, 143, 0.15);
}Backgrounds
- Page canvas: always
bg-[#140A26]— never white, never near-black grey. - Noise overlay: add a pseudo-element with
white noise SVG/PNG at ~6% opacityover the canvas for depth. - Section backgrounds: use
bg-[#24163E]for alternate sections or elevated panels. - Never use
bg-white,bg-gray-*, orbg-black— they break the palette.
// Root layout body
<body className="bg-[#140A26] text-white min-h-screen">
{/* noise overlay */}
<div
aria-hidden
className="pointer-events-none fixed inset-0 bg-[url('/noise.png')] opacity-[0.06] mix-blend-overlay"
/>
{children}
</body>Gradients
| Use | Value |
|---|---|
| Hero/page gradient | from-[#24163E] to-[#140A26] |
| Hero CTA button | from-[#6D28D9] via-[#7C3AED] to-[#DB2777] |
| Momentum / progress ring | from-[#8B5CF6] to-[#FF4D8F] |
Apply gradients with bg-gradient-to-br (or to-r for horizontal). Always set a solid fallback colour.
Typography
- Text primary:
text-white— headings, labels, key values. - Text secondary:
text-white/[0.72]— body, descriptions, subheadings. - Text tertiary:
text-white/[0.45]— metadata, timestamps, captions. - Font family:
font-sans(Geist Sans) for UI copy;font-mono(Geist Mono) for numerical data. - Heading scale:
text-4xl font-bold tracking-tight→text-2xl font-semibold→text-lg font-medium. - Never use dark-on-dark text combos — all text must be a white/opacity variant on dark backgrounds.
Cards & Surfaces
// Standard glass card
<div className="
rounded-2xl border border-white/[0.08]
bg-white/[0.035]
backdrop-blur-sm
p-6
transition-colors duration-200
hover:bg-white/[0.075]
">Rules:
- Background:
bg-white/[0.035]at rest,bg-white/[0.075]on hover. - Border:
border border-white/[0.08]— single-pixel, barely-there. - Corner radius:
rounded-2xl(16 px) for cards;rounded-xl(12 px) for chips/badges;rounded-fullfor avatars/pills. - Use
backdrop-blur-smwhen the card sits over a gradient or noise background. - Dividers inside cards:
divide-y divide-white/[0.08]orborder-t border-white/[0.08].
Buttons & CTAs
Primary CTA
<button className="
rounded-full px-6 py-3
bg-gradient-to-r from-[#6D28D9] via-[#7C3AED] to-[#DB2777]
text-white font-semibold text-sm
shadow-[0_0_24px_rgba(230,74,135,0.22)]
hover:brightness-110 active:brightness-90
transition-all duration-200
">Secondary / Accent button
<button className="
rounded-full px-6 py-3
bg-[rgba(122,90,230,0.12)]
border border-[#7A5AE6]/40
text-[#7A5AE6] font-semibold text-sm
hover:bg-[rgba(122,90,230,0.22)]
transition-all duration-200
">Ghost / text button
<button className="
text-white/[0.72] hover:text-white
text-sm font-medium
transition-colors duration-150
">Rules:
- All interactive elements must have a visible hover state.
- Use
active:scale-[0.97]for tactile press feedback. - Disabled state:
opacity-40 pointer-events-none. - Glow on primary CTA:
shadow-[0_0_24px_var(--color-cta-glow)].
Avatars & Halos
<div className="relative inline-flex items-center justify-center">
{/* outer pink glow */}
<div className="absolute inset-0 rounded-full bg-[rgba(255,77,143,0.15)] blur-md scale-125" />
{/* violet ring */}
<div className="relative rounded-full ring-2 ring-[rgba(139,92,246,0.35)] p-0.5">
<img className="rounded-full w-12 h-12 object-cover" src={src} alt={alt} />
</div>
</div>Progress / Momentum Rings
- Track colour:
#2A2140. - Fill gradient:
#8B5CF6 → #FF4D8F(use SVGstrokewith alinearGradientorconic-gradient). - Ring thickness: 4–6 px; increase to 8 px for hero/large rings.
Iconography
- Use Lucide React icons sized at
16(inline),20(default),24(prominent). - Colour icons with
currentColor; set the parent's text colour to control the icon shade. - Never hard-code icon colours with non-palette values.
Spacing & Layout
- Base unit: 4 px (Tailwind default). Scale: 2, 4, 6, 8, 12, 16, 24, 32, 48, 64.
- Section vertical padding:
py-24(desktop) /py-16(mobile). - Max content width:
max-w-6xl mx-auto px-4 sm:px-6 lg:px-8. - Gaps in grids/flex:
gap-4(tight),gap-6(default),gap-8(spacious).
Animations & Motion
- Use
transition-all duration-200 ease-outas the default transition. - Entrance animations:
animate-fade-inor Framer Motioninitial={{ opacity:0, y:16 }} animate={{ opacity:1, y:0 }}withduration: 0.4. - Hover lift:
hover:-translate-y-1 hover:shadow-lg transition-transform duration-200. - Glow pulse on CTAs (optional):
animate-pulseat 3 s interval. - Respect
prefers-reduced-motion— wrap animations in a motion check.
Do / Don't
| Do | Don't |
|---|---|
| Use palette colours exclusively | Introduce greys, off-whites, or unsaturated backgrounds |
| Layer glassmorphism (blur + transparency) | Use fully opaque flat colours for cards |
| Apply noise overlay for depth | Leave the canvas bare and flat |
Use rounded-2xl / rounded-full |
Use sharp corners (rounded-none) |
| Show hover states on every interactive element | Leave clickable elements with no feedback |
| Use glow/shadow to highlight CTAs | Rely solely on colour to distinguish buttons |
| White opacity variants for text hierarchy | Hard-code #999, #ccc, or similar greys |
Delivery Quality Bar
- Desktop and mobile both required. Validate all major sections at
375px,768px, and1280pxwidths. - Keep headings short and impactful; avoid long, dense paragraphs in hero and CTA regions.
- Ensure every section has one visual focal point: portrait, device frame, featured quote, or highlighted list.
- All new UI must read as premium and intentional, not a direct clone or generic template.
CSS Utility Classes (globals.css)
These classes are defined in app/globals.css and should be used instead of repeating inline style patterns:
| Class | Purpose |
|---|---|
.dot-grid |
Dot grid background texture (radial-gradient, 28 px grid) |
.shimmer-line-x |
1 px violet shimmer divider (violet → transparent) |
.shimmer-line-x-soft |
1 px shimmer, 20% opacity (subtle) |
.shimmer-line-x-pink |
1 px pink → violet shimmer divider |
.shimmer-line-x-accent |
1 px accent → transparent shimmer |
.gradient-brand |
linear-gradient(135deg, #7a5ae6, #e64a87) background |
.gradient-brand-r |
Same gradient, left-to-right direction |
.gradient-brand-text |
Applies violet→pink as background-clip: text fill |
.glass-surface |
rgba(255,255,255,0.04) + border rgba(0.09) |
.glass-surface-sm |
rgba(255,255,255,0.05) + border rgba(0.12) |
.card-accent |
rgba(255,255,255,0.04) + border rgba(accent,0.25) |
.gradient-border-brand |
1.5 px gradient border wrapper (use p-px child) |
.mask-fade-x |
Marquee edge fade mask (12%/88%) |
.mask-fade-x-wide |
Marquee edge fade mask (18%/82%) |
Never use style={{}} for values that can be expressed with these utilities.
Reusable UI Primitives (components/ui/)
| Component | File | Props |
|---|---|---|
<DotGrid /> |
DotGrid.tsx |
className? — override opacity |
<ShimmerLine /> |
ShimmerLine.tsx |
variant?: "default"|"soft"|"pink"|"accent", className? |
<GradientText /> |
GradientText.tsx |
children, className? |
<SectionBadge /> |
SectionBadge.tsx |
color?: "accent"|"cta", pulse?: boolean, className? |
<PrimaryButton /> |
Buttons.tsx |
children, icon?: boolean, className?, all <a> attrs |
<GhostButton /> |
Buttons.tsx |
children, className?, all <a> attrs |
Usage examples
// Dot grid — replaces backgroundImage dot pattern inline style
<DotGrid className="opacity-[0.035]" />
// Shimmer divider — replaces linear-gradient h-px inline style
<ShimmerLine />
<ShimmerLine variant="pink" className="my-16" />
// Eyebrow badge
<SectionBadge pulse>What We Help With</SectionBadge>
<SectionBadge color="cta" pulse>Getting Started</SectionBadge>
// Gradient text span
<GradientText>there's a session.</GradientText>
// CTA buttons
<PrimaryButton href="#">Browse All Sessions</PrimaryButton>
<GhostButton href="#">Learn More</GhostButton>Inline Style Rules
Only keep style={{}} for legitimately dynamic runtime values:
- Template literal gradients:
`linear-gradient(135deg, ${step.gradFrom}, ${step.gradTo})` - Computed animation delays:
`${i * 90}ms` - Data-driven colors:
style={{ background: item.glow }} - Non-standard aspect ratios:
style={{ aspectRatio: "4/5" }} - Out-of-scale font sizes:
style={{ fontSize: "320px" }} - SVG presentation attributes:
style={{ stroke: "rgba(122,90,230,0.22)" }}
For all other cases, use Tailwind arbitrary value syntax:
// Complex gradients
className="[background:radial-gradient(ellipse_at_20%_0%,rgba(122,90,230,0.22)_0%,transparent_60%)]"
// Opacity fractions (Tailwind v4)
className="bg-accent/18 bg-cta/10 bg-white/[0.025]"