Molino⺢ Practice

H1Design System Baseline - LOCKED

H2Status: LOCKED ✅

Date Locked: May 4, 2026 Build Status: ✅ Passing Dev Server: ✅ Running at http://localhost:3000

H2What's Locked In

H3Core Files (DO NOT MODIFY without explicit request)

app/globals.css — Complete Urban Editorial Design System (2125 lines)
app/layout.tsx — Font imports (Fontsource + Google Fonts)
app/(spaces)/spaces/components/sections/*.tsx — ALL 16 section components styled

H3Design Tokens Locked

--bg-cream: #faf6f0;  /* Light cream theme */
--ink: #111111;             /* Primary text */
--accent-ochre: #c4953a;      /* Gold/yellow CTAs */
--accent-cobalt: #2b5f9e;     /* Blue accents */
--font-serif: 'Playfair Display';  /* Editorial headings */
--font-sans: 'Inter';             /* Body text */
--font-mono: 'JetBrains Mono';   /* Labels/metadata */

H3Section Components Styled (16/16 COMPLETE) ✅

✅ HeroSection — .hero-section, .hero-title
✅ ItinerarySection — .itinerary-section, .itinerary-day
✅ MarketingSlider — .slider-section, .slider-dots
✅ MissionStatementSection — .mission-section, .mission-lead
✅ CtaSection — .cta-section, .cta-title
✅ FeaturesSection — .features-section, .feature-item
✅ FeatureGridSection — .feature-grid-section
✅ CardsSection — .cards-section, .card-item
✅ PricingSection — .pricing-section, .pricing-plan
✅ TestimonialsSection — .testimonials-section
✅ FAQSection — .faq-section, .faq-item
✅ DestinationGridSection — .destination-grid-section
✅ TourCardsSection — .tour-cards-section
✅ NativeSliderSection — .slider-native-section
✅ PosterSection — .poster-section (yellow/blue/bw themes)
✅ FooterSection — .footer-section
✅ RichTextSection — .rich-text-section
✅ ImportedHtmlSliderSection — .imported-html-section

H3Masonry Grid ✅

Responsive columns: 2→3→4→5 (640px→768px→1024px→1280px)
Card styles: .masonry-item, .card-image, .card-content
Status badges: .status with colored dots

H3Button System ✅

.btn-primary — Ochre/gold primary actions
.btn-secondary — Cobalt blue secondary
.btn-cta — Large CTA with shadow

H2Rules for Future Development

H3⚠️ NON-NEGOTIABLE RULES

NEVER modify globals.css without explicit user request
NEVER change design tokens (--bg-cream, --ink, etc.) without approval
NEVER remove semantic classes (.hero-section, .masonry-item, etc.)
ALWAYS run npm run build after ANY change
PRESERVE working functionality — don't break what works

H3Adding New Sections (Safe Pattern)

// 1. Add CSS classes to globals.css BEFORE the UTILITIES section
// 2. Use semantic classes in component:
<section className="my-section">
  <div className="my-content">
    <h2 className="my-title">{title}</h2>
  </div>
</section>
// 3. NEVER use Tailwind utilities directly (use semantic classes)

H3Modifying Existing Sections (Safe Pattern)

// ✅ GOOD: Keep semantic classes
<section className="hero-section">

// ❌ BAD: Replace with Tailwind utilities
<section className="py-20 bg-white">

H2Snapshot Location

snapshots/design-system-baseline-2026-05-04/
├── globals.css
├── layout.tsx
└── sections/
    ├── HeroSection.tsx
    ├── ItinerarySection.tsx
    ├── MarketingSlider.tsx
    └── ... (all 16 section components)

H2Next Steps (Safe to Proceed)

✅ Add NEW sections (use semantic classes from globals.css)
✅ Modify SECTION CONTENT (not styles)
✅ Add NEW pages (inherit existing styles)
✅ Fix BROKEN LOGIC (not style changes)
❌ Don't restyle existing components
❌ Don't change CSS variables
❌ Don't "refactor" the design system

Locked by: AI Assistant on May 4, 2026 Build verified: ✅ Passing Dev server: ✅ http://localhost:3000

DESIGN-SYSTEM-LOCKED

Master Codebase Guidebook
Markdown + HTML Dev-Docs Renderer - Frontend Client Module