[{"_1":2,"_77":-5,"_78":-5},"loaderData",{"_3":4,"_7":8},"root",{"_5":6},"gaMeasurementId","G-LQYTSH5Y0M","routes/skill.$id",{"_9":10,"_52":53,"_70":-5,"_71":72,"_75":76},"skill",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":34,"_36":37,"_38":34,"_39":40,"_41":42,"_43":44,"_45":-5,"_46":-5,"_47":48,"_49":30,"_50":51},"id","3262c6b9-c1df-4a1f-973d-58944b59a064","title","Swiss Brutalist Design System - Conversion Prompt","description","Use this prompt to convert an existing Astro website to match the Swiss International Style / Neo-Brutalist design system.","content","# Swiss Brutalist Design System - Conversion Prompt\n\nUse this prompt to convert an existing Astro website to match the Swiss International Style / Neo-Brutalist design system.\n\n---\n\n## PROMPT FOR AI ASSISTANT\n\nYou are converting an existing website to match a Swiss International Style / Neo-Brutalist design system. Follow these specifications EXACTLY to ensure visual consistency.\n\n---\n\n## 1. COLOR PALETTE\n\n### Primary Colors\n```css\n/* Background Colors */\n--bg-primary: #F0F0E8; /* Warm off-white - main page background */\n--bg-secondary: #E5E5E0; /* Panel grey - cards, sections */\n--bg-tertiary: #D8D8D2; /* Darker panel - filler elements */\n--bg-white: #FFFFFF; /* Pure white - content areas */\n\n/* Accent Colors */\n--accent-blue: #1D4ED8; /* Hyper Blue (blue-700) - primary actions, links */\n--accent-blue-dark: #1E40AF; /* blue-800 - hover state */\n--accent-green: #15803D; /* Signal Green (green-700) - success, download */\n--accent-red: #DC2626; /* Alert Red (red-600) - destructive, delete */\n--accent-orange: #F97316; /* Alert Orange (orange-500) - warning, settings */\n\n/* Text Colors */\n--text-primary: #000000; /* Black - headings, primary text */\n--text-secondary: #4B5563; /* gray-600 - body text */\n--text-muted: #9CA3AF; /* gray-400 - placeholders, hints */\n--text-blue: #1D4ED8; /* blue-700 - links, code comments */\n```\n\n### Background Pattern (Grid)\n```css\nbackground-image:\n linear-gradient(rgba(29, 78, 216, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(29, 78, 216, 0.1) 1px, transparent 1px);\nbackground-size: 40px 40px;\n```\n\n---\n\n## 2. TYPOGRAPHY\n\n### Font Stack\n```css\n/* Sans-serif (body text) */\nfont-family: \"Geist Sans\", ui-sans-serif, system-ui, sans-serif;\n\n/* Monospace (labels, code, technical text) */\nfont-family: \"Space Grotesk\", \"Geist Mono\", ui-monospace, monospace;\n\n/* Serif (large headings) */\nfont-family: ui-serif, Georgia, Cambria, \"Times New Roman\", serif;\n```\n\n### Typography Patterns\n```css\n/* Page Titles - Large serif */\n.page-title {\n font-family: ui-serif, Georgia, serif;\n font-size: 3rem; /* text-5xl to text-7xl */\n font-weight: 400;\n letter-spacing: -0.025em;\n line-height: 0.95;\n color: #000000;\n}\n\n/* Section Headers - Monospace uppercase */\n.section-header {\n font-family: \"Space Grotesk\", monospace;\n font-size: 0.875rem; /* text-sm */\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n/* Labels - Small monospace uppercase */\n.label {\n font-family: \"Space Grotesk\", monospace;\n font-size: 0.75rem; /* text-xs */\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6B7280; /* gray-500 */\n}\n\n/* Code Comments Style */\n.code-comment {\n font-family: \"Space Grotesk\", monospace;\n font-size: 0.875rem;\n color: #1D4ED8;\n text-transform: uppercase;\n}\n/* Usage: \"// SELECT MODULE\" */\n```\n\n---\n\n## 3. SPACING & LAYOUT\n\n### Container\n```css\n.main-container {\n max-width: 86rem; /* ~1376px */\n margin: 0 auto;\n padding: 3rem 1rem; /* py-12 px-4 */\n}\n\n@media (min-width: 768px) {\n .main-container {\n padding: 3rem 2rem; /* py-12 px-8 */\n }\n}\n```\n\n### Grid System\n```css\n/* Dashboard Grid - 5 columns with gap created by black background */\n.card-grid {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n background-color: #000000;\n gap: 1px; /* Creates black lines between cells */\n}\n\n@media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); }\n@media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }\n@media (min-width: 1024px) { grid-template-columns: repeat(5, 1fr); }\n\n/* Card inside grid */\n.grid-card {\n background: #F0F0E8;\n aspect-ratio: 1;\n padding: 1.5rem; /* p-6 */\n}\n\n@media (min-width: 768px) {\n .grid-card { padding: 2rem; } /* p-8 */\n}\n```\n\n### Section Spacing\n```css\n/* Between major sections */\nmargin-bottom: 2.5rem; /* space-y-10 */\n\n/* Between subsections */\nmargin-bottom: 1.5rem; /* space-y-6 */\n\n/* Between form elements */\nmargin-bottom: 1rem; /* space-y-4 */\n```\n\n---\n\n## 4. BORDERS & SHADOWS\n\n### Border Rules\n```css\n/* CRITICAL: NO ROUNDED CORNERS */\nborder-radius: 0; /* rounded-none - ALWAYS */\n\n/* Standard border */\nborder: 1px solid #000000;\n\n/* Heavy border (containers) */\nborder: 2px solid #000000;\n```\n\n### Shadow System (Hard Shadows - NO BLUR)\n```css\n/* Small shadow (buttons, inputs) */\nbox-shadow: 2px 2px 0px 0px #000000;\n\n/* Medium shadow (cards, panels) */\nbox-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1);\n\n/* Large shadow (containers, modals) */\nbox-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);\n\n/* Extra large shadow (main container) */\nbox-shadow: 8px 8px 0px 0px rgba(0,0,0,0.9);\n```\n\n---\n\n## 5. INTERACTIVE ELEMENTS\n\n### Buttons\n\n```css\n/* Base Button Styles */\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n\n /* Typography */\n font-family: \"Space Grotesk\", monospace;\n font-size: 0.875rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n\n /* Sizing */\n height: 2.5rem; /* h-10 */\n padding: 0.5rem 1.5rem; /* py-2 px-6 */\n\n /* Shape */\n border-radius: 0;\n border: 1px solid #000000;\n\n /* Transitions */\n transition: all 150ms ease-out;\n}\n\n/* Primary Button (Blue) */\n.btn-primary {\n background: #1D4ED8;\n color: #FFFFFF;\n box-shadow: 2px 2px 0px 0px #000000;\n}\n.btn-primary:hover {\n background: #1E40AF;\n transform: translate(1px, 1px);\n box-shadow: none;\n}\n\n/* Outline Button */\n.btn-outline {\n background: transparent;\n color: #000000;\n box-shadow: 2px 2px 0px 0px #000000;\n}\n.btn-outline:hover {\n background: #F3F4F6;\n transform: translate(1px, 1px);\n box-shadow: none;\n}\n\n/* Destructive Button (Red) */\n.btn-danger {\n background: #DC2626;\n color: #FFFFFF;\n box-shadow: 2px 2px 0px 0px #000000;\n}\n\n/* Success Button (Green) */\n.btn-success {\n background: #15803D;\n color: #FFFFFF;\n box-shadow: 2px 2px 0px 0px #000000;\n}\n\n/* Ghost Button (No background) */\n.btn-ghost {\n background: transparent;\n color: #000000;\n border: none;\n box-shadow: none;\n}\n.btn-ghost:hover {\n background: #F3F4F6;\n}\n```\n\n### Button Sizes\n```css\n.btn-sm { height: 2rem; padding: 0.25rem 1rem; font-size: 0.75rem; }\n.btn-md { height: 2.5rem; padding: 0.5rem 1.5rem; font-size: 0.875rem; }\n.btn-lg { height: 3rem; padding: 0.75rem 2rem; font-size: 1rem; }\n.btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; }\n```\n\n### Form Inputs\n```css\n.input {\n width: 100%;\n height: 2.25rem; /* h-9 */\n padding: 0.25rem 0.75rem;\n\n font-family: \"Space Grotesk\", monospace;\n font-size: 0.875rem;\n\n background: transparent;\n border: 1px solid #000000;\n border-radius: 0;\n\n transition: box-shadow 150ms;\n}\n\n.input:focus {\n outline: none;\n box-shadow: 0 0 0 1px #1D4ED8;\n}\n\n.input::placeholder {\n color: #9CA3AF;\n}\n```\n\n### Cards (Interactive)\n```css\n.card {\n background: #F0F0E8;\n padding: 1.5rem;\n aspect-ratio: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n\n transition: all 200ms ease-in-out;\n cursor: pointer;\n}\n\n.card:hover {\n transform: translate(-4px, -4px);\n box-shadow: 6px 6px 0px 0px #000000;\n}\n\n/* Card with colored accent */\n.card:hover {\n background: #1D4ED8;\n color: #F0F0E8;\n}\n```\n\n### Status Cards (Non-interactive)\n```css\n.status-card {\n background: #FFFFFF;\n padding: 1rem;\n border: 1px solid #000000;\n box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);\n}\n```\n\n---\n\n## 6. COMPONENT PATTERNS\n\n### Page Container Pattern\n```html\n

\n \n\n

\n\n \n

DASHBOARD

// SELECT MODULE

\n\n \n

\n \n

\n\n \n \n\n

\n```\n\n### Section Header Pattern\n```html\n

\n \n \n

Section Title

\n```\n\n### Status Indicator Pattern\n```html\n\n

\n \n HEALTHY\n

\n\n\n

\n \n OFFLINE\n

\n```\n\n### Icon Badge Pattern (Dashboard Cards)\n```html\n

\n M\n

\n```\n\n---\n\n## 7. MODAL / DIALOG\n\n```css\n/* Backdrop */\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(4px);\n}\n\n/* Modal Container */\n.modal {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2.5rem; /* 40px from edges */\n}\n\n/* Modal Content - 80% viewport */\n.modal-content {\n width: 100%;\n height: 100%;\n max-width: 1200px;\n\n background: #FFFFFF;\n border: 2px solid #000000;\n box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.9);\n\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* Modal Header */\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n border-bottom: 2px solid #000000;\n background: #F9FAFB;\n}\n```\n\n---\n\n## 8. TAILWIND UTILITIES REFERENCE\n\nIf using Tailwind CSS, here are the key classes:\n\n```\n/* Backgrounds */\nbg-[#F0F0E8] bg-[#E5E5E0] bg-white bg-blue-700 bg-green-700 bg-red-600 bg-orange-500\n\n/* Text */\ntext-black text-gray-500 text-gray-600 text-blue-700 text-green-700 text-red-600\n\n/* Borders */\nborder border-2 border-black border-black/10\n\n/* Shadows */\nshadow-[2px_2px_0px_0px_#000000]\nshadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)]\nshadow-[8px_8px_0px_0px_rgba(0,0,0,0.1)]\n\n/* Typography */\nfont-mono font-serif font-sans\ntext-xs text-sm text-lg text-xl text-2xl text-5xl text-7xl\nuppercase tracking-wide tracking-wider\nfont-bold font-medium\n\n/* Spacing */\np-4 p-6 p-8 p-12\ngap-2 gap-4 gap-6\nspace-y-4 space-y-6 space-y-10\n\n/* Layout */\nrounded-none (CRITICAL - use everywhere)\naspect-square\n\n/* Hover Effects */\nhover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none\nhover:-translate-y-1 hover:-translate-x-1 hover:shadow-[6px_6px_0px_0px_#000000]\nhover:bg-blue-700 hover:text-white\n```\n\n---\n\n## 9. DO's AND DON'Ts\n\n### DO:\n- Use `rounded-none` everywhere - NO rounded corners\n- Use hard shadows (no blur): `box-shadow: Xpx Xpx 0px 0px`\n- Use monospace font for labels, technical text, and buttons\n- Use uppercase for labels and buttons\n- Use 1px black borders consistently\n- Keep high contrast (black on light backgrounds)\n- Use the warm off-white (#F0F0E8) as primary background\n- Use code-comment style (// COMMENT) for decorative text\n\n### DON'T:\n- Don't use `rounded-*` classes (except `rounded-none`)\n- Don't use blurred shadows (`blur` in shadow)\n- Don't use gradients (except for the subtle background grid)\n- Don't use low-contrast color combinations\n- Don't use cursive or decorative fonts\n- Don't use soft, muted color palettes\n- Don't use drop shadows with blur\n\n---\n\n## 10. CONVERSION CHECKLIST\n\nWhen converting your Astro site:\n\n1. [ ] Replace all `rounded-*` with `rounded-none`\n2. [ ] Update shadows to hard shadows (0px blur)\n3. [ ] Change background to #F0F0E8\n4. [ ] Add background grid pattern to main wrapper\n5. [ ] Update button styles (uppercase, monospace, hard shadow)\n6. [ ] Add 1px or 2px black borders to containers\n7. [ ] Update typography (serif for titles, monospace for labels)\n8. [ ] Add hover effects (translate + shadow removal)\n9. [ ] Update color palette to blue/green/red/orange accents\n10. [ ] Add code-comment style decorative text\n11. [ ] Update form inputs (no rounded, black border)\n12. [ ] Update cards with aspect-ratio and hover effects\n\n---\n\nThis design system creates a bold, functional, and memorable aesthetic inspired by Swiss International Style with Neo-Brutalist web design elements.\n","sourceUrl","https://github.com/srbhr/Resume-Matcher/blob/7d25ff8dc1a4d693ce55b111e4ecb46c3e31b54a/docs/agent/50-design-and-templates/swiss-design-system-prompt.md","viewCount",0,"createdAt",["D",1768492824000],"status","published","skillType","prompt","difficulty",1,"timeToValueMin",5,"useCases","[]","inputs","outputFormat","markdown","dependencies","categoryId","b31af42c-ecda-40ee-a2ca-9845bad35f56","categoryName","Coding","categorySlug","coding","authorName","authorImage","hasAdditionalFiles",false,"fileCount","totalSizeBytes",12780,"relatedSkills",[54,60,65],{"_11":55,"_13":56,"_15":57,"_41":42,"_43":44,"_21":58,"_23":59,"_27":28,"_29":30,"_31":32,"_36":37},"20883adf-3530-4398-a914-716aa3783689","Markdown Converter","Agent skill for markdown-converter",7,["D",1767894033000],{"_11":61,"_13":62,"_15":63,"_41":42,"_43":44,"_21":58,"_23":64,"_27":28,"_29":30,"_31":32,"_36":37},"b404ec38-bffb-4822-8916-4480ffb7cb0c","Nano Banana Pro","Agent skill for nano-banana-pro",["D",1767894033000],{"_11":66,"_13":67,"_15":68,"_41":42,"_43":44,"_21":32,"_23":69,"_27":28,"_29":30,"_31":32,"_36":37},"525e6c82-58f2-4312-bfd2-c2972bb23e56","1password","Agent skill for 1password",["D",1767894032000],"session","userInteractions",{"_73":48,"_74":48},"liked","favorited","additionalFiles",[],"actionData","errors"]

Swiss Brutalist Design System - Conversion Prompt

Related Skills

Markdown Converter

Nano Banana Pro

1password