Component Styleguide

A showcase of all components used on the homepage

Design Principles

Clean & Minimal

Vercel-inspired design: simple, professional, focused on content.

Light Backgrounds

Use white, light gray, and subtle gray gradients. No dark hero sections.

Monochromatic

Prefer black, white, and grays. Use colors sparingly for accents only.

No Gradient Blobs

Avoid colorful gradient backgrounds, glow orbs, or flashy effects.

Subtle Shadows

Use soft shadows and borders instead of heavy drop shadows.

Consistent Spacing

Use 8px grid system. Common values: 0.5rem, 1rem, 1.5rem, 2rem, 3rem.

Important: Never use dark backgrounds on hero sections or cards. Never use colorful gradient backgrounds (purple/cyan blobs). Keep everything light and professional.

Color Palette

Gray Scale

Gray 50#fafafa

Gray 100#f5f5f5

Gray 200#e5e5e5

Gray 300#d4d4d4

Gray 400#a3a3a3

Gray 500#737373

Gray 600#525252

Gray 700#404040

Gray 800#262626

Gray 900#171717

Black#000000

Semantic Colors

Success#10b981

Error#ef4444

Warning#f59e0b

Info#3b82f6

Section Backgrounds

White#ffffff

Gray 50#fafafa

Gradient (Light)linear-gradient(180deg, #fafafa, #ffffff)

Typography

We use Google Sans Flex as our primary font for a modern, clean appearance.

Display / Hero Title

Build Something Amazing

font-size: 4rem; font-weight: 800; letter-spacing: -0.02em

Section Title (H2)

Section Heading

font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em

Card Title (H3)

Card Heading

font-size: 1.5rem; font-weight: 600

Body Text

This is standard body text used for paragraphs and general content. It should be readable and comfortable for longer passages of text.

font-size: 1rem; line-height: 1.6; color: #525252

Label / Overline

Section Label

font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em

Tip: Use text-wrap: balance on headings to prevent awkward line breaks. Use non-breaking hyphen (‑) for compound words like E‑Commerce.

Terminal Component

Code and terminal display for developer-focused content.

Terminal

$npm init @unchainedshop

✓ Creating new Unchained project...

✓ Installing dependencies...

✓ Project ready! Run npm run dev to start

Terminal Colors:

Background: #1a1a1a
Prompt ($): #10b981 (green)
Command: #ffffff (white)
Highlight: #60a5fa (blue)

Pills & Labels

CTA Pills

GraphQL APIHeadlessTypeScriptScalable

Label with Dot

Get Started Today

Developer Label

For Developers

Integrated Commerce Suite

A fully integrated suite of commerce and payment products

Everything you need to build and scale your digital commerce platform

⚡

Unchained Core

GraphQL Engine

📦

Products

Catalog & Inventory

📋

Orders

Processing & Fulfillment

💳

Payments

Multi-gateway Support

👥

Users

Auth & Accounts

📊

Analytics

Insights & Reporting

🚚

Delivery

Shipping & Logistics

🔔

Notifications

Email & Push

✓Real-time GraphQL API

✓Multi-channel Commerce

✓Enterprise Scalability

✓100% Open Source

Animated Deploy Flow

Deploy in Under 120 Seconds

Watch how fast you can go from zero to production

Click Deploy

One-click deployment to Railway

Configure

Auto-configured environment variables

15s

Build & Deploy

Automatic build and deployment

30s

✓

Live!

Your store is ready

45s

Deploy Now

Railway Deployment Architecture

Live Deployment Infrastructure

Watch your services deploy and connect in real-time

storefront

storefront-production-f09d...

✓13 hours ago via GitHub

▼

unchained

unchained-production-372c...

✓yesterday via GitHub

▶

🍃

MongoDB

✓yesterday via Docker Image

⚡All services deployed and running

🔄Auto-deploy on GitHub push

🔒Secure connections established

Announcement Bar

New: Latest updates and improvements

Hero Headline

Build commerce faster with our headless e‑commerce engine

Button System (Used in Project)

Two Button Styles

Primary: Dark background (#111827) with lighter hover (#374151)
Secondary: White background with light grey hover (#f3f4f6)

Sizes

States

Form Actions

Special Elements

npm install

Feature Cards (Use Blue Links)

⚡

Performance Feature

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Learn More

🎨

Template Feature

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Learn More

📋

Scalability Feature

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.

Learn More

Cards use simple blue links (card-link class) instead of button styling

Feature Primary Cards

⏲

Launch in Minutes

Deploy your complete e‑commerce solution with our one-click deployment system.

Deploy Now

Tech Stack Cards

Node.js Backend

Powerful server-side JavaScript runtime for building scalable network applications.

GraphQL API

Flexible query language for your API that gives clients exactly what they need.

MongoDB Database

Document-based NoSQL database that scales horizontally across commodity servers.

Feature Tags

Merchants

CTOs

Developers

Popular

Template

New

Code Snippet

npx create-unchained-app my-store

Success Story Logos

Template Navigation

Template Highlights

⚡

Lightning Fast

Optimized for performance and Core Web Vitals

🎨

Fully Customizable

Tailwind CSS components you can easily modify

📱

Mobile First

Responsive design that works on every device

Admin UI Features

📊

Analytics Dashboard

Comprehensive insights into your business performance

⚡

Performance Optimized

Fast and responsive interface for all your admin tasks

🔧

Customizable Interface

Adapt the admin panel to match your workflow needs

Ticketing Features

📱Apple & Google Wallet integration

🔒Secure QR code validation

⚡Instant ticket delivery

CTA Features Grid

GraphQL API

Headless Design

Flexible Stack

Scale from MVP

Feature Benefits List

Complete e‑commerce platform out of the box
Headless architecture for maximum flexibility
GraphQL API for efficient data fetching
Built-in payment and shipping integrations
Scalable microservices architecture