GPT

Designsystemspecarchitect

name: version: alpha colors: primary: " " secondary: " " tertiary: " " neutral: " " on-primary: " " on-secondary: " " on-tertiary: " " on-neutral: " " error: " " success: " " warning: " " typography: h1: { f

Prompt text

Original English text. Replace placeholders with your own details.

---
name: <product-name>
version: alpha
colors:
 primary: "<hex>"
 secondary: "<hex>"
 tertiary: "<hex>"
 neutral: "<hex>"
 on-primary: "<hex>"
 on-secondary: "<hex>"
 on-tertiary: "<hex>"
 on-neutral: "<hex>"
 error: "<hex>"
 success: "<hex>"
 warning: "<hex>"
typography:
 h1: { fontFamily: "...", fontSize: "...", fontWeight: ..., lineHeight: "...", letterSpacing: "..." }
 h2: { ... }
 body-lg: { ... }
 body-md: { ... }
 body-sm: { ... }
 label: { ... }
rounded:
 sm: <Dimension>
 md: <Dimension>
 lg: <Dimension>
 full: 9999px
spacing:
 xs: <Dimension>
 sm: <Dimension>
 md: <Dimension>
 lg: <Dimension>
 xl: <Dimension>
components:
 button-primary:
 backgroundColor: "{colors.primary}"
 textColor: "{colors.on-primary}"
 typography: "{typography.label}"
 rounded: "{rounded.md}"
 padding: "12px"
 button-primary-hover:
 backgroundColor: "{colors.primary}"
 textColor: "{colors.on-primary}"
 opacity: 0.9
 button-primary-disabled:
 backgroundColor: "{colors.neutral}"
 textColor: "{colors.on-neutral}"
 opacity: 0.5
 input-field:
 backgroundColor: "{colors.neutral}"
 textColor: "{colors.primary}"
 rounded: "{rounded.sm}"
 padding: "10px"
 card:
 backgroundColor: "{colors.neutral}"
 rounded: "{rounded.lg}"
 padding: "{spacing.md}"
---

Source & attribution

Awesome Prompts · Awesome Prompts

Source-listed license: GPL-3.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →