Kinetic Orange Style
superdesignCC0-1.0Prompt onlyLanding · landingBrutalist · brutalistFuturistic · futuristicExperimental · experimentalLight · lightLow (display) · lowOrange · orangeVivid · vividSerif · serifGeneral · general
A high-energy brutalist design system characterized by a high-contrast 'Kinetic Orange' (#FF4D00) and black palette. It features bold, oversized editorial typography, technical monospace accents, and rhythmic motion through marquees and rotating elements. Ideal for creative agencies, fintech, modern portfolios, or AI-driven startups looking for a 'loud' and confident brand presence. Category: Design Systems & Styles. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Kinetic Orange Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/kinetic-orange-style · 6c6090694520 · © Superdesign
Prompt
{
"summary": "The 'Kinetic Orange' style is a digital-first brutalist aesthetic that uses heavy typography and motion to create a sense of urgency and technical sophistication. It relies on a three-color system (Orange, Black, White) and sharp geometric layouts.",
"style": {
"description": "High-impact brutalist theme. It pairs the heavy weight of 'Archivo Black' for display text with the technical precision of 'Space Mono' for metadata and labels. The primary color is a vibrant electric orange (#FF4D00). Visuals are defined by thick borders (2px+), skewed sections, and continuous marquee animations.",
"prompt": "Create a design with a primary background color of #FF4D00 and deep black #000000 text. \n- **Typography**: Headers in 'Archivo Black', uppercase, tracking -0.04em, line-height 0.85-0.9. Metadata and UI labels in 'Space Mono', tracking -0.02em. Body text in 'Inter'. \n- **Color Palette**: Brand Orange (#FF4D00), Solid Black (#000000), and Pure White (#FFFFFF) for high-contrast accents on black backgrounds. \n- **Borders**: 2px solid #000000 for section dividers and buttons. \n- **Motion**: Use linear marquees for text-heavy sections. Implement a 'spin' animation for circular indicators (12s duration). \n- **Interactions**: Hover states should include horizontal translations (translate-x-4) and scale transforms (scale-110). Selection color should be background: black; color: #FF4D00;"
},
"layout_and_structure": {
"description": "A vertically stacked layout with full-width sections. It uses a floating 'pill' navigation bar and incorporates skewed transitions between sections to break the grid.",
"prompts": [
{
"part": "Floating Navigation",
"prompt": "A fixed top navigation with a logo on the left and social icons on the right. In the center, a floating black 'pill' container (background #000000, rounded-full) housing links in white 'Space Mono' (size 12px). Links should transition to black text on white background on hover."
},
{
"part": "Typographic Hero Section",
"prompt": "A fullscreen header with the main headline centered in 'Archivo Black' at 16vw size. Below the headline, a 2px black horizontal border separates the hero from a metadata row containing a 'Based in...' label (left), a rotating circular 'Scroll Down' text indicator (center), and a multi-line title/role (right)."
},
{
"part": "Skewed Marquee Section",
"prompt": "A full-width section with background #000000, skewed at -2deg. Contains two rows of infinite scrolling text. Row 1: Orange text (#FF4D00) in Archivo Black, 10vw size. Row 2: White text with 80% opacity, scrolling in reverse."
},
{
"part": "Vertical Service List",
"prompt": "A dark section (background #000000, text #FFFFFF). Items are separated by 1px white/20% borders. Each item features a leading number in #FF4D00 (Space Mono), a large uppercase title (Archivo Black, 7vw), and a row of pill-shaped tags. On hover, the title moves right and a large #FF4D00 arrow icon reveals at 45 degrees."
},
{
"part": "Giant CTA and Footer",
"prompt": "A centered CTA with 14vw heading. A large rounded-full button (#000000 background, white text) that scales up on hover. Footer is separated by a 2px black top border, containing copyright info and horizontal social links in Space Mono (12px)."
}
]
},
"special_ui_components": [
{
"component": "Rotating Scroll Indicator",
"description": "A circular SVG path with text that rotates infinitely.",
"prompt": "Create a 144px diameter circle. Inside, use an SVG <textPath> on a circular path to repeat the string 'Scroll Down • ' 3-4 times. Use font 'Space Mono', size 9px, weight bold, uppercase. Place a static arrow-down icon (Lucide) in the center. Animate the SVG text container with a linear rotation (360deg over 12s)."
},
{
"component": "Brutalist Service Card",
"description": "Interactive list item with reveal effects.",
"prompt": "A list item spanning 100% width with a top border. Layout: [Index (Orange, Mono)] [Title + Tags (White, Archivo)] [Arrow Icon (Hidden, Orange)]. On hover: Background shifts to white/5% opacity, Title translates +16px horizontally, Arrow opacity becomes 1 and rotates 45deg."
}
],
"special_notes": "MUST: Maintain extremely high contrast. MUST: Use only uppercase for Archivo Black headers. MUST: Ensure all borders are sharp (no rounded corners except for pill-shaped buttons and navigation). DO NOT: Use gradients, drop shadows (except for navigation depth), or soft pastels. DO NOT: Use standard sans-serifs for headlines."
}
---
"Kinetic Orange Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Kinetic Orange Style. \"Kinetic Orange Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-kinetic-orange-style",
"license": "CC0-1.0",
"attribution": "\"Kinetic Orange Style\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#000000"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#000000"
},
"primary": {
"$type": "color",
"$value": "#ff4d00"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#000000"
},
"secondary-foreground": {
"$type": "color",
"$value": "#000000"
},
"accent": {
"$type": "color",
"$value": "#ff4d00"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#595959"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#ff4d00"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Kinetic Orange Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #ff4d00;
--primary-foreground: #fafaf9;
--secondary: #000000;
--secondary-foreground: #000000;
--accent: #ff4d00;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #ff4d00;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Kinetic Orange Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520. */
/** Tailwind theme extend for Kinetic Orange Style (superdesign-kinetic-orange-style) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#000000",
"card": "#ffffff",
"primary": "#ff4d00",
"primary-foreground": "#fafaf9",
"secondary": "#000000",
"accent": "#ff4d00",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#ff4d00"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Kinetic Orange Style" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/kinetic-orange-style @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #ff4d00;
--primary-foreground: #fafaf9;
--secondary: #000000;
--secondary-foreground: #000000;
--accent: #ff4d00;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #ff4d00;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}