Keystone Design Bootstrap

A comprehensive design system for Keystone customer websites. Provides themed sections, elements, and utilities for building consistent, server-rendered Next.js sites.

Installation

npm install @keystone-pzjr/design-bootstrap

Package Exports

// Sections (hero, footer, header, testimonials, etc.)
import { HeroHome, FooterHome, TestimonialsHome } from '@keystone-pzjr/design-bootstrap/sections'

// Elements (buttons, inputs, carousels, etc.)
import { Button, Input, Carousel } from '@keystone-pzjr/design-bootstrap/elements'

// Hooks
import { useBreakpoint } from '@keystone-pzjr/design-bootstrap/hooks'

// Theme context
import { ThemeProvider } from '@keystone-pzjr/design-bootstrap/contexts'

// Server API utilities
import { getServices, getTestimonials } from '@keystone-pzjr/design-bootstrap/lib/server-api'

// Types
import type { Service, Testimonial } from '@keystone-pzjr/design-bootstrap/types'

// Themes
import { themes } from '@keystone-pzjr/design-bootstrap/themes'

Styles

Import CSS in your app/globals.css:

@import "@keystone-pzjr/design-bootstrap/styles/theme.css";
@import "@keystone-pzjr/design-bootstrap/styles/typography.css";
@import "@keystone-pzjr/design-bootstrap/styles/style-overrides.aman.css";

Theme System

Available Themes

• aman - Warm, elegant serif theme (Playfair Display + Inter)
• classic - Clean, modern sans-serif theme (Inter)

Themes are defined in src/themes/index.ts.

Component Variants

Components automatically load theme variants based on the active theme:

• hero-home.tsx - Base/classic variant
• hero-home.aman.tsx - Aman theme variant

The createThemedExport() function in sections/index.tsx handles this automatically.

Tailwind Classes

The design system provides semantic Tailwind classes:

Backgrounds:

• bg-primary - Main page background
• bg-secondary - Section backgrounds
• bg-fg-primary - Dark backgrounds (buttons, accents)

Text:

• text-fg-primary - Primary text (dark)
• text-secondary - Secondary text
• text-tertiary - Muted text
• text-white - White text

Borders:

• border-primary - Primary borders
• border-secondary - Subtle borders

Fonts:

• font-display - Display font for headings
• font-body - Body font for text

Theme Customization

Override CSS variables in your site's styles/custom-overrides.css:

[data-theme="aman"] {
  --color-bg-primary: #F9F7F0;
  --color-text-primary: #1E1E1E;
  --font-body: "Inter", sans-serif;
  --font-display: "Playfair Display", serif;
}

CSS Cascade:

1. theme.css - Base design system
2. style-overrides.aman.css - Theme-specific overrides
3. custom-overrides.css - Site-specific customizations (highest priority)

Using Sections

Sections are pre-built page components that accept data via props:

// In your page.tsx (Server Component)
import { HeroHome, TestimonialsHome } from '@keystone-pzjr/design-bootstrap/sections'
import { getTestimonials } from '@keystone-pzjr/design-bootstrap/lib/server-api'

export default async function HomePage() {
  const testimonials = await getTestimonials()
  
  return (
    <main>
      <HeroHome config={config} />
      <TestimonialsHome testimonials={testimonials} config={config} />
    </main>
  )
}

Available Sections

Heroes: HeroHome, HeroServiceDetail, HeroLocationDetail, HeroFAQ, HeroTestimonials, HeroSocialMedia, HeroGenericText

Content: ServicesHome, ServicesGrid, LocationGrid, LocationDetailsSection, TeamGrid, JobGallery, AboutHome, ValuesSection, StatisticsSection

Interactive: TestimonialsHome, BlogSection, BlogGallery, BlogPost, FAQGrid, FAQHome, SocialMediaGrid, ContactSection

Navigation: HeaderNavigation, FooterHome

Using Elements

Elements are reusable UI components:

import { Button, Input, Carousel } from '@keystone-pzjr/design-bootstrap/elements'

<Button variant="primary">Click Me</Button>
<Input label="Email" type="email" />
<Carousel items={photos} />

Server API Functions

import {
  getCompanyInformation,
  getServices,
  getService,
  getLocations,
  getLocation,
  getTestimonials,
  getFAQs,
  getBlogPosts,
  getBlogPost,
  getTeamMembers,
  getWebsitePhotos,
  getJobPostings
} from '@keystone-pzjr/design-bootstrap/lib/server-api'

All functions are async and designed for server-side use only.

Architecture

• Server-Side Only: All components fetch data server-side
• Theme Variants: Automatic component selection based on active theme
• Type-Safe: Full TypeScript support
• CSS Variables: Theme customization via CSS custom properties
• Tailwind First: Semantic utility classes for consistent styling

License

Private - Keystone PZJR