skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

retro-design

Implements retro 60s-80s visual styling for web and mobile app interfaces.

3|Updated Jul 17, 2026
Search Tags:#typography#css#color palette#swiftui#flutter#vintage ui#retro design
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill retro-design-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retro-design
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/retro-design
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill retro-design-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Applying a consistent vintage aesthetic across web and mobile platforms requires knowing the right color palettes, typography pairings, and platform-specific rendering techniques, which are easy to get wrong without a reference. ## Core Features & Use Cases - Retro Visual DNA: Defines warm muted color palettes (mustard yellow, burnt orange, aged paper), grain textures, and classic typography like Cooper Black and Garamond. - Cross-Platform Code Samples: Provides ready-to-adapt implementations in CSS, SwiftUI, Flutter, React Native, and Jetpack Compose. - Use Case: A developer building a landing page with a 1970s print-media feel can copy the CSS patterns for hard offset shadows, noise overlays, and sticker-style badges directly into their project. ## Quick Start Apply the retro-design style to build a vintage-themed card component with warm colors and grain texture for my web app.

Frequently Asked Questions about retro-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a retro vintage design for a website?▼

Use warm faded colors like aged paper (#F4E8D1) backgrounds with deep brown ink text, pair display fonts like Cooper Black with serif body copy, and add grain texture overlays plus hard offset shadows to simulate 70s print media.

How to add hard offset shadows in Flutter and Jetpack Compose?▼

In Flutter, set BoxShadow blurRadius to 0 with an Offset for the unblurred retro shadow. In Jetpack Compose, native Modifier.shadow blurs, so use Modifier.drawBehind to draw an offset rounded rectangle behind the card.

What colors and fonts work for 70s retro UI design?▼

Use monochromatic brown or warm faded palettes such as mustard yellow, burnt orange, sage green, and off-white. Pair heavy display fonts like Cooper Black with Garamond, Georgia, or Courier for body text.

Does React Native support unblurred drop shadows on Android?▼

React Native's elevation property on Android always blurs shadows and cannot produce hard offset shadows natively. Use the react-native-drop-shadow library to achieve accurate retro-style shadows on Android.

When should I avoid using retro design styling?▼

Avoid retro styling when the product requires sleek modern aesthetics, geometric sans-serifs, or tech-focused neon colors. Also verify contrast ratios and accessibility separately, as this reference does not replace accessibility testing.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
vobasevobase
59

polish

Inspect UI components, layouts, and accessibility for pre-release polish issues.

Official
Intermediate
gooseworks-aigooseworks-ai
6

grain-overlay

Add film grain texture to motion graphics with blend modes.

Official
Basic
guideopsguideops

dithered

Generate retro color and typography tokens for design systems using Python.

Community
Intermediate