Porsche design system

A one-page showcase for the 911 Turbo S, built entirely with the Porsche design system

A one-page showcase for the 911 Turbo S, built entirely with @porsche-design-system/components-react. Every heading, button, table, and tag is a native PDS component; no custom CSS, no overrides. Dark theme throughout, fully responsive, with a hero section, key figures, feature highlights, technical specs, and an image carousel.

A practical demonstration of what vibe coding looks like when you constrain the AI to a real design system rather than letting it freestyle with Tailwind.

Built with

Lovable

At a glance

Model
Free project showcase
Porsche design system

About this project

Target audience
Developers and designers interested in design systems, component-driven UI, and building consistent, responsive showcases with minimal custom styling.

Problem solved

Demonstrating how to build a polished, consistent UI by strictly using a design system's native components without custom CSS or overrides.

Key features

  • Built entirely with Porsche design system React components
  • No custom CSS or overrides, ensuring design consistency
  • Dark theme with full responsiveness
  • Includes hero section, key figures, feature highlights, technical specs, and image carousel

Prompt(s) used to build this project

Build a stunning one-page React web app showcasing the Porsche 911 Turbo S using the official Porsche Design System v3.

## Setup
Install the package: `@porsche-design-system/components-react`
Wrap the entire app with `<PorscheDesignSystemProvider theme="dark">` from `@porsche-design-system/components-react`.

## Page structure (single scrollable page, dark theme throughout)

### 1. Navigation bar
- Fixed top bar with Porsche `<PCrest>` logo on the left and the model name "911 Turbo S" on the right using `<PText>` 
- Use a frosted glass background style (`backdrop-filter: blur`)

### 2. Hero section — full viewport height
- Background: full-bleed image of the 911 Turbo S (use a reliable Unsplash URL for a Porsche 911)
- Overlay gradient from transparent to black at bottom
- `<PDisplay size="large">Porsche 911 Turbo S</PDisplay>` centered
- Tagline below using `<PText size="large">`: "The benchmark. Redefined."
- CTA: `<PButton variant="primary">Configure yours</PButton>` and `<PButton variant="secondary">Discover more</PButton>` side by side

### 3. Key figures section — 3 columns
Use CSS grid (3 equal columns). For each stat use a `<PDisplay>` for the number and `<PText>` for the label:
- 650 PS / Power output
- 2.7 s / 0–100 km/h
- 330 km/h / Top speed

### 4. Features section
Title: `<PHeading size="x-large">Engineered to Perfection</PHeading>`
3 feature cards side by side, each with:
- An icon using `<PIcon>` (use: "garage", "car", "performance" or closest available)
- A `<PHeading size="medium">` for title
- A `<PText>` for a 2-line description
Features to highlight: Twin-Turbo Flat-Six Engine / PDCC Sport Suspension / Porsche Traction Management

### 5. Specs table section
Title: `<PHeading>Technical Specifications</PHeading>`
Use `<PTable>` component with two columns (Specification / Value):
- Engine: 3.8-litre twin-turbo flat-six
- Power: 650 PS (478 kW)
- Torque: 800 Nm
- Transmission: 8-speed PDK
- Drive: All-wheel drive
- 0–100 km/h: 2.7 seconds
- Top Speed: 330 km/h
- Kerb Weight: 1,640 kg

### 6. Visual gallery strip
Full-width `<PCarousel>` with 3 images of the 911 Turbo S from Unsplash (search: "porsche 911 turbo"). Each slide is 100vw x 500px with object-fit: cover.

### 7. CTA section
Centered, dark background, full-width padding:
- `<PHeading>Your 911 Turbo S awaits.</PHeading>`
- `<PButton variant="primary" icon="arrow-right">Build & Price</PButton>`

### 8. Footer
- `<PDivider>` at top
- `<PCrest>` centered
- `<PText align="center" color="contrast-medium">© 2025 Dr. Ing. h.c. F. Porsche AG</PText>`
- A small `<PTag color="background-frosted">` badge reading: "Built with the Porsche Design System" with a link pointing to https://designsystem.porsche.com/v3/

## Design rules
- Theme: **dark** throughout (pass `theme="dark"` on PorscheDesignSystemProvider)
- Typography: exclusively use `<PDisplay>`, `<PHeading>`, `<PText>` — no raw h1/h2/p tags
- Spacing: use the PDS spacing scale (--p-spacing-* tokens) for all padding/margins
- No custom color overrides — use only PDS theme tokens
- All buttons must be `<PButton>` from PDS — no HTML buttons
- Fully responsive: single column on mobile, multi-column on desktop
- Smooth scroll behavior on the html element

More Blog Website examples built with Lovable.

Ready to build something amazing?

Start creating your own project with lovable.dev — the platform that makes web development simple and enjoyable.

Get started now

Similar projects

More projects to discover

Weekly digest

Subscribe to our newsletter

Stay curious about what's new with Lovable — get the latest projects and updates delivered to your inbox.

No spam. Unsubscribe anytime.