Skip to content

Instantly share code, notes, and snippets.

@portdeveloper

portdeveloper/SKILL.md

Created January 19, 2026 10:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save portdeveloper/a875085ce1f9880d3f372544cdf8cf51 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save portdeveloper/a875085ce1f9880d3f372544cdf8cf51 to your computer and use it in GitHub Desktop.
Download ZIP
Monad-inspired design system for Next.js apps using shadcn/ui
Raw
SKILL.md
name description
monad-design
Apply Monad-inspired design system to frontend apps. Clean light theme, purple accents, shadcn/ui components, Geist font.

Monad Design System

A clean, professional design system inspired by monad.xyz. Use for designing apps on and related to Monad

Design Principles

  1. Light theme - White/off-white backgrounds, not dark mode
  2. Purple accent - Monad's signature purple for primary actions
  3. No gradients - Solid colors only
  4. Clean typography - Geist font family
  5. Generous whitespace - Let elements breathe
  6. Subtle patterns - Dot grid backgrounds for texture

Tech Stack

  • Next.js with App Router
  • shadcn/ui for components
  • Tailwind CSS v4
  • Geist font from next/font/google
  • lucide-react for icons

Setup

1. Initialize shadcn

npx shadcn@latest init -d -y
npx shadcn@latest add button card input badge alert -y

2. Configure fonts in layout.tsx

import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

// In the component:
<html lang="en">
  <body className={`${geistSans.variable} ${geistMono.variable} font-sans`}>
    {children}
  </body>
</html>

3. Color palette in globals.css

:root {
  --radius: 0.75rem;

  /* Monad-inspired palette */
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.12 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.12 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.12 0 0);

  /* Purple accent - Monad purple */
  --primary: oklch(0.55 0.25 285);
  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.12 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.96 0.02 285);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.91 0 0);
  --input: oklch(0.91 0 0);
  --ring: oklch(0.55 0.25 285);
}

/* Dot grid background pattern */
.bg-dot-pattern {
  background-image: radial-gradient(circle, oklch(0.85 0 0) 1px, transparent 1px);
  background-size: 24px 24px;
}

4. Dark mode variant (optional)

.dark {
  --background: oklch(0.1 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.13 0 0);
  --card-foreground: oklch(0.95 0 0);
  --primary: oklch(0.65 0.25 285);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.18 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.18 0 0);
  --muted-foreground: oklch(0.55 0 0);
  --accent: oklch(0.18 0 0);
  --accent-foreground: oklch(0.95 0 0);
  --destructive: oklch(0.65 0.2 25);
  --border: oklch(0.2 0 0);
  --input: oklch(0.18 0 0);
  --ring: oklch(0.65 0.25 285);
}

Component Patterns

Page Layout

<main className="min-h-screen bg-dot-pattern">
  <div className="min-h-screen flex flex-col items-center justify-center p-4">
    <div className="w-full max-w-md space-y-8">
      {/* Header */}
      <div className="text-center space-y-2">
        <h1 className="text-4xl font-bold tracking-tight">Title</h1>
        <p className="text-muted-foreground">Subtitle text</p>
      </div>

      {/* Content Card */}
      <Card className="shadow-sm">
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
        </CardHeader>
        <CardContent>
          {/* Content */}
        </CardContent>
      </Card>

      {/* Footer */}
      <p className="text-muted-foreground text-sm text-center">
        Footer text with <a className="text-primary hover:underline">link</a>
      </p>
    </div>
  </div>
</main>

Buttons

// Primary action - solid purple
<Button className="w-full" size="lg">
  Primary Action
</Button>

// Secondary action - outline style
<Button variant="outline" className="w-full" size="lg">
  Secondary Action
</Button>

// Icon button
<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpDown className="h-4 w-4" />
</Button>

Input Fields

<div className="rounded-xl border bg-muted/30 p-4">
  <div className="flex items-center justify-between mb-3">
    <span className="text-sm font-medium text-muted-foreground">Label</span>
    <span className="text-sm text-muted-foreground">Helper text</span>
  </div>
  <div className="flex items-center gap-4">
    <Input
      type="number"
      placeholder="0.0"
      className="border-0 bg-transparent text-3xl font-bold p-0 h-auto focus-visible:ring-0"
    />
    <Badge variant="secondary" className="text-base font-semibold px-3 py-1.5">
      TOKEN
    </Badge>
  </div>
</div>

Status Indicators

// Connected status
<div className="flex items-center gap-2">
  <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
  <span className="text-sm text-muted-foreground font-mono">
    0x1234...5678
  </span>
</div>

// Loading state
<Loader2 className="h-4 w-4 animate-spin text-primary" />

// Success state
<CheckCircle2 className="h-4 w-4 text-green-600" />

Alerts

<Alert variant="destructive">
  <AlertTriangle className="h-4 w-4" />
  <AlertDescription>Error message here</AlertDescription>
</Alert>

Typography Scale

  • h1: text-4xl font-bold tracking-tight
  • h2: text-xl font-bold
  • Body: Default size
  • Small: text-sm text-muted-foreground
  • Mono: font-mono for addresses/code

Colors Reference

Purpose Light Mode CSS Variable
Background Off-white --background
Card Pure white --card
Primary Purple --primary
Muted Light gray --muted
Border Light gray --border
Success Green-600 text-green-600
Warning Amber-600 text-amber-600
Error Red/Destructive --destructive

Reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment