Skip to content
Copper Design System shows an advanced design solution with components and metrics for web development and app design by ZORC
Copper – screenshot 2
Copper – screenshot 3
// COLOUR PALETTE
Copper Gold Primary #B87333
Rich Charcoal Background #121212
Burned Orange Accent #8B4513
Antique Bronze Text #CD7F32
Graphite Surface Secondary Background #1E1E1E
// Dark UI kit

Copper

Copper-style design system for AI-driven development

25 kr

One-time payment • VAT included • Source code included

Components
10
Tech stack
HTML, Tailwind CSS, React, Lucide Icons, Framer Motion, Inter Font
Licence
Commercial
Delivery
Instant access (zip + Git)
Updated

About this kit

A modern UI Kit with Copper aesthetics. Contains ready-made components for rapid prototyping and production.

Components included

Knappar Form Datatabeller Modaler Navigationsmenyer Statistikkort Varningar Profile overview Search field Sidebar

Features

  • Dark mode by default
  • WCAG AA contrast for accessibility
  • Fullt responsiv layout
  • Cut-and-paste ready for AI tools like Cursor
  • Optimized for rapid prototyping
  • Tematiska ikoner och illustrationer
  • Variable-based color scale for easy customization

When does this kit fit?

saas dashboard admin internal-tool mobile-app

Tech stack

HTML Tailwind CSS React Lucide Icons Framer Motion Inter Font

How to use this kit

  1. Step 01

    Download

    Sign in to ZORC and fetch the zip from your purchases. All source code and documentation is included.

  2. Step 02

    Copy into your project

    Drop the components/ folder into your project — or install via package.json if the kit is packaged for npm.

  3. Step 03

    Wire up design tokens

    The tokens/ folder holds colours, typography and spacing for your Tailwind config or CSS variables.

  4. Step 04

    Start building

    Import the components and use them straight away. Each one ships with examples, props and variants in the docs.

Example AI prompt

Create a dashboard for a SaaS service with the Copper UI Kit. Use dark mode with the defined copper colors for primary buttons and graphs. Include a sidebar for navigation and a main area with three stats cards and a data table for recent transactions. Make sure the layout is fully responsive and uses Tailwind CSS classes consistently.

Common questions

What does Copper include?
Copper includes 10 components, including Knappar, Form, Datatabeller, Modaler and more.
What tech stack is Copper built on?
Copper is built with HTML, Tailwind CSS, React, Lucide Icons, Framer Motion, Inter Font.
Are the components accessible?
Yes. They follow WCAG 2.1 AA where the content allows — focus rings, keyboard support, ARIA and contrast.
What licence do I get?
Commercial. You may use the components across your organisation's paid projects. What you cannot do is resell the kit itself.
How do I get started?
Copy in the components/ folder, add the design tokens and start building. A full guide ships with the kit.
Do I get updates?
Yes. All future versions are included at no extra cost for as long as the kit remains in the catalogue.
// More UI kits

More kits from ZORC