next.js / react / astro
Electric Portfolio
Grounded on a warm off-white canvas (#f4f4f2) with vivid electric blue (#0736fe) as its sole brand accent, this kit mirrors the look of a graphic designer's personal portfolio site. A large sharp-cornered blue showcase block sits on the neutral page as portfolio artwork with oversized white display type. Pill badges mark dates and skill tags in blue. Hairline 1px borders separate content cards (no shadows). A dark near-black panel provides bold editorial contrast for the resume or portfolio grid section. The result reads contemporary, structured, and confidently singular.
portfolio
editorial
electric-blue
warm-neutral
flat
pill-badges
modern
professional
minimal-shadow
creative
electricportfolio.com
electric-portfolio
Design That Speaks.
Brand identity, motion, and digital experiences. Based in Yogyakarta.
View My WorkTokens
electricportfolio.com
electric-portfolio
Design That Speaks.
Brand identity, motion, and digital experiences. Based in Yogyakarta.
View My WorkTokens
Exports
Agent Prompt Surface
---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
roles_light:
background: "#F4F4F2"
foreground: "#1A1A1A"
card: "#FFFFFF"
card-foreground: "#1A1A1A"
popover: "#FFFFFF"
popover-foreground: "#1A1A1A"
primary: "#0736FE"
primary-foreground: "#FFFFFF"
secondary: "#EDEDEB"
secondary-foreground: "#1A1A1A"
muted: "#E8E8E6"
muted-foreground: "#595959"
accent: "#0736FE"
accent-foreground: "#FFFFFF"
destructive: "#DC2626"
destructive-foreground: "#FFFFFF"
border: "#D4D4D2"
input: "#D4D4D2"
ring: "#0736FE"
success: "#15803D"
success-foreground: "#FFFFFF"
warning: "#B45309"
warning-foreground: "#FFFFFF"
chart-1: "#0736FE"
chart-2: "#7B1D36"
chart-3: "#B45309"
chart-4: "#15803D"
chart-5: "#6D28D9"
palette:
- { name: "electric-blue", hex: "#0736fe", role: "brand-primary" }
- { name: "blue-vibrant-alt", hex: "#0534fb", role: "brand-primary-alt" }
- { name: "blue-dark", hex: "#1434cc", role: "brand-dark" }
- { name: "blue-light-muted", hex: "#90a3e0", role: "data-viz" }
- { name: "warm-off-white", hex: "#f4f4f2", role: "background-light" }
- { name: "warm-gray-1", hex: "#ededeb", role: "surface-secondary" }
- { name: "warm-gray-2", hex: "#efefee", role: "surface-tertiary" }
- { name: "warm-gray-3", hex: "#f8f8f6", role: "surface-elevated" }
- { name: "warm-gray-4", hex: "#f1f1ef", role: "surface-subtle" }
- { name: "cream-near-white", hex: "#fdfdf1", role: "surface" }
- { name: "light-gray-surface", hex: "#e6eaef", role: "surface" }
- { name: "white-canvas", hex: "#ffffff", role: "card-light" }
- { name: "near-black", hex: "#141414", role: "background-dark" }
- { name: "dark-card", hex: "#1e1e1e", role: "card-dark" }
- { name: "dark-secondary", hex: "#2a2a28", role: "secondary-dark" }
- { name: "ink", hex: "#1a1a1a", role: "text-primary" }
- { name: "ink-secondary", hex: "#595959", role: "text-secondary" }
- { name: "ink-muted-dark", hex: "#9a9a98", role: "text-muted-dark" }
- { name: "warm-border", hex: "#d4d4d2", role: "border-light" }shadcn CSS Variables
/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Space%20Grotesk:wght@400;500;700&family=Inter:wght@400;500;600;700&family=JetBrains%20Mono:wght@400;500;700&display=swap");
:root {
--radius: 0.75rem;
--font-heading: 'Space Grotesk', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--background: 60 8% 95%;
--foreground: 0 0% 10%;
--card: 0 0% 100%;
--card-foreground: 0 0% 10%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 10%;
--primary: 229 99% 51%;
--primary-foreground: 0 0% 100%;
--secondary: 60 5% 93%;
--secondary-foreground: 0 0% 10%;
--muted: 60 4% 91%;
--muted-foreground: 0 0% 35%;
--accent: 229 99% 51%;
--accent-foreground: 0 0% 100%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 60 2% 83%;
--input: 60 2% 83%;
--ring: 229 99% 51%;
--success: 142 72% 29%;
--success-foreground: 0 0% 100%;
--warning: 26 90% 37%;
--warning-foreground: 0 0% 100%;
--chart-1: 229 99% 51%;
--chart-2: 344 62% 30%;
--chart-3: 26 90% 37%;
--chart-4: 142 72% 29%;
--chart-5: 263 70% 50%;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 2px 8px rgba(0,0,0,0.07);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.09);
--shadow-xl: 0 8px 32px rgba(0,0,0,0.11);
--gradient-hero: linear-gradient(135deg, #0736fe 0%, #0524c4 100%);
--gradient-brand: linear-gradient(135deg, #0736fe 0%, #3d60ff 100%);
--gradient-subtle: linear-gradient(180deg, #f4f4f2 0%, #ededeb 100%);
--duration: 200ms;
--duration-slow: 400ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--font-weight-heading: 700;
--font-weight-body: 400;
--button-radius: 0.75rem;
--card-radius: 0.75rem;
--input-radius: 0.375rem;
--badge-radius: 9999px;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 0;
--badge-border-width: 0;
--heading-transform: none;Install Targets
Registry
/r/electric-portfolio.jsonTailwind v4
@theme inline {
--font-heading: 'Space Grotesk', sans-serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-success: hsl(var(--success));
--color-success-foreground: hsl(var(--success-foreground));
--color-warning: hsl(var(--warning));
--color-warning-foreground: hsl(var(--warning-foreground));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-button: 0.75rem;
--radius-card: 0.75rem;
--radius-input: 0.375rem;
--radius-badge: 9999px;
--border-width: 1px;
--card-border-width: 1px;
--input-border-width: 1px;
--button-border-width: 0;
--badge-border-width: 0;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 2px 8px rgba(0,0,0,0.07);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.09);
--shadow-xl: 0 8px 32px rgba(0,0,0,0.11);
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--ease-kit: cubic-bezier(0.4, 0, 0.2, 1);
--duration-kit: 200ms;
--duration-kit-slow: 400ms;
--gradient-hero: linear-gradient(135deg, #0736fe 0%, #0524c4 100%);
--gradient-brand: linear-gradient(135deg, #0736fe 0%, #3d60ff 100%);
--gradient-subtle: linear-gradient(180deg, #f4f4f2 0%, #ededeb 100%);
--font-weight-heading: 700;
--font-weight-body: 400;
}Registry payload
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "electric-portfolio",
"type": "registry:theme",
"title": "Electric Portfolio",
"description": "A warm-neutral creative portfolio kit with a singular electric-blue accent, warm off-white surfaces, flat card elevation, full-pill tag badges, and an alternating dark-panel section rhythm — built for designers and creatives.",
"categories": [
"portfolio",
"editorial",
"electric-blue",
"warm-neutral",
"flat",
"pill-badges",
"modern",
"professional",
"minimal-shadow",