init

src/content/post/design-style-guide-neo-brutalism/index.mdx

@@ -0,0 +1,158 @@
+---
+title: Design Style Guide - Neo Brutalism
+publishDate: 2025-06-26
+read: 10
+description: Design Style Guide - Neo Brutalism
+tags:
+  - Design Style
+  - Neo-Brutalism
+  - Neo Brutalism
+img: "/assets/blog/cover-neobrutalism.jpg"
+img_alt: "Neo Brutalism"
+---
+
+In the previous article, we discussed the basics of Brutalism. Now we come to my favorite chapter - the previous article was even a setup for this one. Let's talk about "Neo-Brutalism" and its derived design styles.
+
+Previous article: <a href="/blog/web-design-style-guide-brutalism" target="_blank">Web Design Style Guide: Brutalism</a>
+
+In fact, popular design works currently classified as Brutalism can mostly be categorized as Neo-Brutalism. Compared to the "no design" philosophy that original Brutalism insisted on, today it still belongs to a relatively niche design culture. Neo-Brutalism, however, is more widely accepted and loved, extensively applied in independent creators' portfolio websites, creative marketing campaigns, brand planning, and experimental digital art projects.
+
+![Searching for neo-brutalism keywords shows popular visual design works](./01.jpg)
+
+ <small class="block text-center"> Searching for neo-brutalism keywords shows popular visual design works </small>
+
+## Neo-Brutalism
+
+Neo-Brutalism: Also written as Neu-Brutalism or New Brutalism.
+
+The rise of the internet era has accelerated everything, driving technological innovation, aesthetic evolution, and cultural change. The characteristics of the digital age need no further elaboration. Simply put, the rise of Neo-Brutalism is related to the rebellious spirit of the digital age. Designers and artists drew inspiration from mid-20th century architectural Brutalism, bringing its rugged, raw aesthetics to the modern digital stage in the form of "Neo-Brutalism," challenging current mainstream design culture and pursuing authentic, unprocessed, even "anti-UX" expression.
+
+![neobrutalism.dev](./02-neobrutalism.jpg)
+
+ <small class="block text-center">  <a href="https://www.neobrutalism.dev/" target="_blank">neobrutalism.dev</a> - Open-source component library with Neo-Brutalist style component system</small>
+
+### Neo-Brutalism Style Characteristics
+
+Neo-Brutalism is the modern revival of Brutalism in digital design, especially prominent in web design and UI/UX fields. It inherits architectural Brutalism's "exposed structure" and function-first philosophy, combined with modern technology and digital media characteristics, forming a unique visual and interaction style. Characteristics in web and UI design include:
+
+* Conflicting color schemes: Often uses bright, vivid tones like black-white, red-green-blue color combinations, creating strong visual impact, abandoning soft gradients.
+* Thick outlines and heavy shadows: Black outline strokes and shadows seem to inherit the rugged aesthetic of architecture.
+* Flat design: Designs often consist of flat elements, illustrations, patterns, and huge text blocks, these elements may bring a sense of chaos.
+* Special typography: Typography plays a very important role in Neo-Brutalism, being the element that dominates its visual effect.
+* Unique illustrations and animations: Neo-Brutalist illustrations and component design themes are more diverse. Illustration and animation designs are mostly strongly visual styles.
+* Function over form: Anti-UX interaction experience, advocating minimalism, inheriting the utilitarian essence of Brutalist architecture.
+
+![Sepideh Yazdi Neo-Brutalist visual style UI design work](./03.webp)
+
+ <small class="block text-center"> Sepideh Yazdi Neo-Brutalist visual style UI design work </small>
+
+![gumroad](./04.jpg)
+
+ <small class="block text-center"> <a href="https://gumroad.com/" target="_blank">gumroad</a> design style is also a leader in Neo-Brutalist design </small>
+
+The core of original Brutalism is "no design, no decoration." What makes Neo-Brutalism particularly interesting to me is that it presents a paradox in digital design:
+
+Although it inherits Brutalism's ruggedness and imperfection, in visual presentation, it often demonstrates a prominent "intentional design sense" through deliberate irregularity and strong contrast. The unconventional visual language manifests in results as intentional design sense and strong visual impact, which actually makes Neo-Brutalism increasingly popular and sought after in the digital age - the contradiction between anti-design attitude and design-heavy outcomes.
+
+![mux](./05.jpg)
+
+ <small class="block text-center"> The Internet's video API - <a href="https://www.mux.com/" target="_blank">mux.com</a></small>
+
+![sui.io](./06-sui-io-overflow.jpg)
+ <small class="block text-center"> <a href="https://sui.io/overflow" target="_blank">sui.io/overflow</a></small>
+
+Neo-Brutalism is commonly used by independent designers, creative agencies, brands, events, fashion and other scenarios, highlighting individuality and anti-mainstream style to attract young users, actually becoming part of mainstream design. Of course, design projects are absolutely complex systems. In fact, we rarely completely classify a project or website into a certain design school. We look at the complete content it expresses from design concepts, logic, and visuals.
+
+![Colorfolio X](./07.jpg)
+
+ <small class="block text-center"> Colorfolio X personal portfolio website template </small>
+
+Neo-Brutalism's visual style and philosophy are particularly good choices for brands. Strong visual style and cultural characteristics make users remember the brand deeply and attract like-minded people.
+
+![lepuzz](./08.jpg)
+
+  <small class="block text-center"> Wonderfully weird world Le Puzz - <a href="https://lepuzz.com/" target="_blank">lepuzz.com</a> </small>
+
+![goodeatn](./09-goodeatn.jpg)
+
+  <small class="block text-center">Plant snack brand - <a href="https://goodeatn.com/" target="_blank">goodeatn.com</a></small>
+
+![budapestpark](./10-budapestpark-hu.jpg)
+
+ <small class="block text-center">Budapest Park - <a href="https://www.budapestpark.hu/en" target="_blank">budapestpark.hu</a> </small>
+
+![byooooob](./11-byooooob.jpg)
+
+<small class="block text-center"> <a href="https://www.byooooob.com/" target="_blank">byooooob.com</a> </small>
+
+
+
+## The Development History of Brutalism
+
+As we know, in design history, the cycle of nostalgia and revival is almost an eternal theme. Each era's design trends are re-examined and honored at some point in the future. We talked about Brutalism born in the mid-20th century - its unique philosophy was considered revolutionary at the time because it challenged traditional aesthetics, attempting to respond to social needs in an honest and direct way.
+
+However, Brutalism was not "popular" from the beginning. It had some influence in the mid-20th century (especially in public buildings like schools, libraries, government buildings), but was also heavily criticized for its "cold," "oppressive" and unadorned appearance.
+
+![Geisel](./12-brazilfox.jpg)
+<small class="block text-center"> Geisel Library </small>
+
+*Geisel Library* is a landmark building designed by William Leonard Pereira in the late 1960s, a striking example of Brutalist architecture.
+
+Historically, its development has been up and down:
+
+* Mid-20th century (1950s-1970s): Brutalism emerged in the context of post-war reconstruction, mainly used for public buildings in Europe and North America (such as schools, government buildings), symbolizing modernism's pursuit of functionality and social equality. Its "cold" and unadorned appearance was both revolutionary and controversial.
+
+* Late 20th century (1980s-early 2000s): With the rise of Postmodernism, Brutalism was criticized for its monotony and lack of humanized design, many buildings were abandoned or renovated, gradually marginalized.
+
+* 21st century (2010s to present): With nostalgic sentiment and re-examination of modernism, Brutalism has gradually revived, especially in digital design and visual art fields, evolving into "Neo-Brutalism." This revival is not a simple reproduction, but combines modern aesthetics with anti-mainstream cultural demands.
+
+Therefore, Brutalism's ups and downs reflect changes in design trends and social values. The advent of the digital age provided a broader stage for Neo-Brutalism. Designers reinterpreted its rugged aesthetics through graphic, web and UI design, transforming it from cold, raw architectural language into personality-filled visual expression.
+
+
+
+## The Future of Neo-Brutalism
+
+As digital design continues to evolve, Neo-Brutalism may further integrate into mainstream design language, becoming a more widely applied style. Especially as it merges with other retro styles or emerging trends, creating more diversified design possibilities, such as Cyber Brutalism, Postmodern Brutalism, etc. This is actually easy to understand - the rebellious spirit and rugged aesthetics of Brutalism have their soil in every era. "The more advanced, the more primitive." Highly digitized, fast-paced society instead stimulates desire for imperfection and authenticity.
+
+### Cyber Brutalism
+
+The emergence of Cyber Brutalism stems from the digital age's enthusiasm for Cyberpunk culture, and Neo-Brutalism's emphasis on "unfinished feeling" and "exposed structure." Cyberpunk culture's depiction of future technology and social alienation resonates with Neo-Brutalism's rugged aesthetics, especially in design demands for emerging technology fields like virtual reality (VR), augmented reality (AR) and Metaverse. Designers hope to create a visual language that is both futuristic and primitively rugged by combining the two.
+
+It can be felt in films and games, such as the "Blade Runner" film series and the game "Cyberpunk 2077."
+
+![Image](./14.webp)
+
+<small class="block text-center"> "Blade Runner 2049" </small>
+
+![Image](./14.jpg)
+
+
+
+### Industrial Brutalism
+
+Strictly speaking, this is not a widely recognized or formally named design school. Brutalism itself already emphasized "function first" and "material authenticity" in the 1950s-70s, while industrial style further strengthened this utilitarian aesthetic in contemporary interior design and product design. Therefore, "Industrial Brutalism" can be seen as the convergence of Brutalism's original philosophy with modern industrial style popular trends.
+
+Especially in recent years, industrial style has become popular in interior design (such as loft apartments, cafes) and product design (such as vintage mechanical equipment).
+
+In visual culture, manifestations of this style can be traced back to last century's science fiction films, such as: "Alien" (1979) series, "The Terminator" (1984) series, etc. The films' depictions of future worlds, and mechanical world visions, combined with cold metallic texture and decaying industrial scenes, also reflect Industrial Brutalism's visual language. Of course, the films' aesthetic style itself is complex and diverse, cannot be simply classified, but from their aesthetics and visual language, corresponding elements and expressions can be found.
+
+### Final Words
+
+Looking back at last century's sci-fi films, due to computer effects level limitations, most visual effects were made using real materials. Compared to today's CG images, this highlights a raw, authentic texture.
+
+While these aren't strictly Brutalist works, they all embody some of Brutalism's core philosophies to some extent. These works' visual language connection with Brutalism is more reflected in design philosophy and aesthetic pursuit rather than direct style imitation. Their influence is more reflected in inspiring designers to explore similar visual language, which is connected to Brutalism's spirit of pursuing authenticity and functionality.
+
+
+### Preview
+
+In the next chapter, I'm still choosing topics, might want to talk about Retro-futurism or Cyberpunk-related styles, and need to think about how to write them properly.
+
+Retro-futurism philosophy is very interesting, "looking at the future from the past and looking at the past from the future," whether in philosophy or visual style, it's an interesting and philosophically deep design trend.
+
+![Berlin05](./15-Berlin05-wki-tent.jpg)
+
+For example, the upcoming "Fantastic Four: First Steps" has a background story set in a retro-futuristic world inspired by the 1960s. Looking forward to a retro-futuristic visual feast.
+
+![Retro-futurism](./16.jpg)
+
+![Berlin05](./17.webp)

src/content/post/design-style-guide-retro-and-vintage/index.mdx

@@ -0,0 +1,145 @@
+---
+title: Design Style Guide - Retro Design
+publishDate: 2025-07-09
+read: 9
+description: Design Style Guide - Retro
+tags:
+  - Retro & Vintage
+  - Web Design
+  - Design Style
+img: "/assets/blog/cover-retro.jpg"
+img_alt: ""
+---
+
+Hello everyone, I'm Rico. Before continuing our journey through design styles, we need to first understand Retroism.
+
+Time moves forward, yet people can't help but reminisce about the past - design trends are no exception. This is a universal phenomenon in human culture and psychology: nostalgia. No matter how society progresses or technology innovates, people often find emotional comfort, identity, or cultural roots by looking back at the past.
+
+In the design field, this phenomenon is particularly evident, because design is not only an embodiment of function, but also a carrier of culture, emotion, and zeitgeist - progress and nostalgia coexist. In design history, the cycle of nostalgia and revival is almost an eternal theme. Each era's design trends are re-examined and honored at some future moment.
+
+![01.jpg](01.jpg)
+
+
+<small class="block text-center"> "Once Upon a Time in Hollywood" poster </small>
+
+![seasoned.koto.studio.jpg](02.jpg)
+
+<small class="block text-center"> <a href="https://seasoned.koto.studio/" target="_blank">Seasoned brand design studio - seasoned.koto.studio</a> </small>
+
+
+
+**Retro design is a design style that evokes nostalgia by borrowing visual elements, colors, typography, and overall atmosphere from specific past eras. It centers on retrospection and tribute to history, typically creating familiarity and emotional resonance by recreating the aesthetic characteristics of a certain era.**
+
+When we talk about retro design, it can refer both to a specific style and to an overall concept. Retro design is not a single form, but a broad design category. It can point to different eras, such as the Art Deco style of the 1920s, the Psychedelic Style of the 70s, or the Neon Style of the 80s. It can be said that retro design encompasses all historical content on the past timeline, and in different geographical locations and cultural backgrounds, it presents even more diverse appearances.
+
+![03.jpg](03.jpg)
+<small class="block text-center"> <a href="https://rtrfm.com.au/" target="_blank">RTRFM - The Sound Alternative</a> </small>
+
+
+![malaproject.jpg](04.jpg)
+<small class="block text-center"> <a href="https://malaproject.com/" target="_blank">Retro restaurant website - MaLaProject</a> </small>
+
+
+So what does retro design style look like? Let's take a brief look at some representative retro designs:
+
+### 1. 1920s-30s: Art Deco
+
+This was an era full of luxury, modernity, and geometric beauty. Art Deco merged the mechanical aesthetics of the late Industrial Revolution with the simple lines of early modernism, emphasizing symmetry, streamlined design, and luxurious decorative details. It features geometric shapes, fan decorations, stepped compositions, and materials like metal, marble, and ivory, with bold color combinations of gold, black, silver, and emerald green.
+
+This style remains popular in contemporary high-end brand design, such as luxury packaging, wedding invitations, or high-end event invitations. Its refinement and symmetry give designs a solemn and elegant temperament.
+
+![009.jpg](05.jpg)
+
+### 2. 1950s: Nostalgic Advertising Style
+
+(Vintage & Retro Advertising) If the 20s-30s were synonymous with luxury and modernity, then the 50s were symbols of warmth and hope. Post-war economic recovery filled people's lives with vitality and optimism, and design styles reflected this social atmosphere. 50s design features hand-drawn illustrations, soft tones (like pink, light blue, cream yellow), and rounded fonts, commonly seen in food packaging, restaurant menus, and advertising posters.
+
+Design from this period is full of family atmosphere, with a sense of intimacy and human touch. Retro posters, classic car advertisements, and neon signs all convey a relaxed and pleasant lifestyle. Today, this style is often used by brands hoping to convey "classic" or "traditional" values.
+
+![Nostalgic advertising.jpg](06.jpg)
+
+
+### 3. 1970s: Hippie and Psychedelic Style
+
+(Psychedelic Art)
+
+The 70s were a rebellious and free era, a spirit manifested in design through bold colors, psychedelic patterns, and exaggerated fonts. Psychedelic style design is often full of visual impact, with gradients and lighting effects making images appear dreamlike and unreal.
+
+This style's design is commonly seen in music album covers, posters, and trendy art works, representing the 70s younger generation's pursuit of freedom and individuality. Today, psychedelic style is widely applied to music festival visual design, trendy apparel, and brand images related to youth culture - its bold, unrestrained character remains an important inspiration source for many designers.
+
+![3-2.jpg](08.jpg)
+
+### 4. 1980s: Neon and Futurism
+
+(Neon Retro Futurism)
+
+The 80s were the intersection of technology and pop culture. This era's design is marked by bright neon colors, geometric shapes, and digitized futurism. Neon signs, CRT monitor scan line effects, and grid backgrounds became classic 80s design symbols.
+
+This style was widely used in music videos, video game covers, and movie posters (like "Blade Runner") at the time, becoming a symbol of 80s pop culture. Today, this style has been rediscovered and applied to tech website design, video game UI, trendy apparel brands, and sci-fi film visuals, both evoking the past and inspiring imagination about the future.
+
+
+![lost-in-space.gif](09.gif)
+<small class="block text-center"> <a href="https://loox.app/lost-in-space" target="_blank">loox.app/lost-in-space</a> </small>
+
+
+![Neon](10.jpg)
+<small class="block text-center"> <a href="https://sunsetrace.ginrin.com/" target="_blank">sunsetrace.ginrin.com</a> </small>
+
+
+![Fluorescent nights and faded memories](11.jpg)
+<small class="block text-center"> <a href="https://www.instagram.com/thelostvibe0/" target="_blank">Fluorescent nights and faded memories</a> </small>
+
+
+### 5. 1990s: Retro Tech
+
+(Retro Tech / Y2K aesthetic)
+
+The 90s were the internet's infancy, with design full of early tech symbols like pixel style, low-resolution images, and simple interfaces. The classic Windows 95 interface and early webpage layouts became representative of this period.
+
+![RadioPapi FM](12.jpg)
+<small class="block text-center"> <a href="https://www.radiopapi.fm/" target="_blank">RadioPapi FM website's retro design</a> </small>
+
+This style also spawned the "Y2K" (**Year 2000 Kilo**) design language, combining futuristic tech sense with the rough aesthetics of the internet's early days, commonly seen in graphic design, web design, and game UI. Today, Y2K style has been rediscovered and applied to trendy brands, electronic music album covers, and youthful digital product design, evoking nostalgia for the internet's early days.
+
+![Y2K.jpg](13.jpg)
+
+Besides these era-specific retro styles, some regional styles also occupy important positions in retro design.
+
+For example, Bauhaus style originated in early 20th century Germany and is one of the founders of modern design. Bauhaus emphasizes simplicity and functionality, using geometric shapes, basic colors, and sans-serif fonts extensively in design, becoming an inspiration source for minimalist design.
+
+![nodcoding](14.jpg)
+<small class="block text-center"> <a href="https://nodcoding.com/" target="_blank">Bauhaus style - nodcoding.com</a> </small>
+
+
+![Nike x The Bauhaus](15.jpg)
+<small class="block text-center"> <a href="https://nikebauhaus.vercel.app/" target="_blank">Nike x The Bauhaus </a> </small>
+
+### Showa Retro (昭和レトロ/Showa Retro)
+
+Japanese retro style displays unique Eastern charm, such as Showa Retro, which merges Japanese and Western elements with bright colors and nostalgic atmosphere. The design color scheme tends toward strong, deep, rich colors, creating intense visual impact and special Eastern cultural charm.
+
+![Showa Retro](16.jpg)
+
+<small class="block text-center"> "Showa 40 Year Man" magazine cover</small>
+
+
+### Distinguishing Vintage and Retro
+
+When describing retroism, we often use Vintage and Retro, which refer to different concepts.
+
+- **Vintage**
+
+Refers to items or designs that genuinely come from a past era, usually with certain historical value and collectible significance, emphasizing authenticity, directly from a past era, possibly bearing marks of time. Vintage is typically used to describe actual old items (like antique furniture, old clothes, old records) or design styles. For example, an original 1950s poster.
+
+![pitokmm-it.jpg](17.jpg)
+<small class="block text-center"> <a href="http://pitokmm.it/" target="_blank">Pitok Motor Museum </a> </small>
+
+- **Retro** refers to imitating or borrowing design styles from a past era, but not genuinely from that era - rather modern re-creation. Although inspired by history, the work itself is modern, emphasizing tribute and recreation of past styles, but usually incorporating modern elements, adapting to contemporary aesthetics and functional needs.
+
+Simply put, Vintage is "genuine old items," while Retro is "modern retro design."
+
+### **Summary**
+
+Retro design style is a design method that evokes nostalgia by recreating aesthetic characteristics of specific past eras. It's widely applied in graphic design, UI design, and web design, with different era retro styles each having unique features. Its greatest charm lies in its ability to touch people's nostalgic emotions by recreating past aesthetic symbols, evoking emotional resonance through reminiscing about the past, while giving design more spiritual value.
+
+Understanding retroism, we know that every coordinate point on the past timeline, due to its specific era culture and historical characteristics, produced specific era styles. And nostalgic sentiment mixes and combines past era styles with the present, deriving more interesting design works - this is what we want to focus on exploring in the future. These products merging different eras, cultures, designs, and other diverse achievements are so magical. Hope to enjoy this journey exploring design styles together with everyone.

src/content/post/design-style-guide-spacepunk/index.mdx

@@ -0,0 +1,120 @@
+---
+title: Understanding the Niche Style - Spacepunk
+publishDate: 2025-08-10
+read: 12
+description: Design Style Guide - Spacepunk
+tags:
+  - Spacepunk
+  - Spacepunk
+  - Design Style
+img: "/assets/blog/cover-spacepunk.jpg"
+img_alt: ""
+---
+
+I'm Rico, welcome to Punk aesthetics.
+
+The spiritual core of Punk is **rebellion and deconstruction**. Beyond the familiar Cyberpunk and Steampunk, there's also Spacepunk, Classic Punk, Post-Apocalyptic Punk, Dieselpunk, Atompunk, Biopunk, and more. Almost any word can combine with "Punk" to derive a unique aesthetic style.
+
+Let's first discuss the relatively niche Spacepunk.
+
+Definition - Punk, cited from Wikipedia:
+
+> Punk culture is a subculture that originated in Britain in the 1970s, initially expressed through minimalist rock music, later developing into a comprehensive cultural movement integrating music, fashion, and ideology. Its core spirit includes rebelliousness, subversiveness, and anarchism, often expressing protest against social injustice through raw melodies, straightforward lyrics, and anti-traditional fashion.
+
+## Spacepunk and NASA-Punk
+
+"Spacepunk" is a style combining space sci-fi themes with the "Punk" spirit, merging punk's rebellious, anti-establishment themes with the futuristic aesthetics and technology of space exploration. It typically features retro-futuristic style, drawing inspiration from the space race era, exploring themes of technological advancement, cosmic adventure, and social rebellion in space settings.
+
+![](./001.jpg)
+
+<small class="block text-center"> Raygun Gothic illustration - With exaggerated lines and bold imagination, depicting extremely futuristic space scenes, is the prototype of early Spacepunk visuals.</small>
+
+Although the term "Space Punk" has no exact proposal time, its prototype can be traced back to the 1979 film "Alien," and gradually became popular and widely recognized as an independent style label after the 2002 TV series "Firefly" aired. The "Guardians of the Galaxy" series also carries some "punk" characteristics.
+
+Additionally, Bethesda Game Studios explicitly proposed the concept of "NASA-Punk" during the development of "Starfield" (2023 game), defining the game's art style. The art team mentioned that "NASA Punk" inspiration comes from NASA spacecraft design and human space history, aiming to create a retro-futuristic feel based on realistic technology.
+
+![](./002-a-collection-of-my-best-starfield.jpg)
+
+<small class="block text-center"> "Starfield" game screenshot - Self-positioned as "NASA Punk" aesthetic - by reddit </small>
+
+But actually, there's a difference between the two. Spacepunk inherits punk culture's rebellious and dystopian spirit, focusing on marginalized groups' struggles; NASA Punk embodies optimistic exploration spirit, a retro-futurism based on existing aerospace technology, with weaker critical intensity than typical Spacepunk.
+
+## Historical Context
+
+### I. 1960–1970: Emergence Under the Space Race
+
+In the 1960s, the space race was in full swing. Humanity was filled with infinite optimism and longing for space. The development of aerospace technology provided possibilities for exploring extraterrestrial worlds. Spacepunk began to emerge in this context, presenting a highly idealized techno-romantic style.
+
+![](./003.jpg)
+
+<small class="block text-center"> Apollo 11 moon landing</small>
+
+Works from this period are more like the "spiritual predecessor of Spacepunk" — they cultivated the visual foundation of "space exploration" but hadn't yet integrated "punk's rebellious core." The design style manifested as **highly idealized techno-romanticism**.
+
+In design style, during this period, spacecraft mostly adopted sleek streamlined designs, abandoning redundant decoration to pursue resistance-free travel between stars, highlighting extreme pursuit of speed and efficiency. Colors were dominated by bright metallic tones, paired with orange, creating a visually hopeful atmosphere. Details emphasized technology's precision, such as bubble helmet's transparent material, neat cable layouts on spacesuits, demonstrating trust in technical perfection while incorporating imagination of commercialization elements.
+
+![](./004-2001.jpg)
+
+<small class="block text-center">"2001: A Space Odyssey" 1968</small>
+
+This stage, driven by the space race, presented idealized, romanticized characteristics, integrating humanity's infinite longing for space into design - a perfect fusion of technology and dreams.
+
+![](./005-2001.jpg)
+
+<small class="block text-center"> "2001: A Space Odyssey" 1968 - Its bold innovation and visual approach influenced subsequent sci-fi and space films, widely recognized as a milestone in film history.</small>
+
+### II. 1980–1990: Development After Cold War Cooling
+
+As the Cold War cooled, the space race's heat gradually subsided, and humanity's fantasies about space gained more realistic coldness. Spacepunk aesthetics entered a "ruins" phase, with visual elements beginning to show decay and weathering. Works from this period began to have a "dystopian" undertone, with some cases' "roughness" and "questioning of authority" approaching Spacepunk.
+
+Spacecraft were no longer perfectly streamlined, but bore real traces of wear and tear - damaged, mottled components, rusted, peeling metal shells telling of space environment's harshness and spacecraft's wear. Colors leaned toward gray, faded tones, lacking the 60s' brightness and vitality, adding depression and heaviness, making space no longer distant but full of real-life texture. This reflects society's diminished enthusiasm for space exploration post-reality mindset, and concerns about technical limitations and resource depletion.
+
+Works from this period had more life atmosphere and loneliness, manifesting as **combination of industrial realism and decay aesthetics**.
+
+![](006-Starship-Troopers.jpg)
+
+<small class="block text-center"> "Starship Troopers" (1997) - Though not pure Spacepunk, provides system critique perspective through militarism extremism, I believe it also has some Spacepunk visual experience and characteristics.</small>
+
+![](007-Serenity.jpg)
+
+<small class="block text-center"> "Serenity"</small>
+
+After Cold War cooling, Spacepunk shed utopian glory, presenting in a more realistic, colder posture. Decayed visual elements and integrated life scenes fully display space exploration's hardship and loneliness - a realistic return to space fantasy.
+
+### III. To Present: Digital Ruins and Retro Future
+
+Entering the 21st century to present, digital technology development and technological progress have brought new characteristics to cognition and assumptions about space and the future. Compared to previous styles, digital information, new crafts, and technological humanistic concepts have become new cores. Combined with nostalgic sentiment for last century's aerospace era, from a broad concept, it's easier to associate with **Retro-Futurism** we previously mentioned.
+
+Works from this period need to simultaneously satisfy "digital and retro mashup" and "questioning current order," avoiding simply equating "space theme + retro elements" with Spacepunk.
+
+**Design style from this period manifests as collision and fusion of digital technology and retro industry.**
+
+Modular design and information technology became mainstream. Spacecraft design better fits contemporary technical thought and emphasis on information technology, containing more fantastical future tech sense under nostalgic machine exteriors. In colors, while retaining classic tones like titanium white and aerospace orange, retro filter effects are added, imitating last century's image effects, giving images retro grain and haziness.
+
+![](008-starfield-game-art.jpg)
+
+<small class="block text-center">"Starfield" game 2023 - Proposed "NASA Punk" as the game's art style</small>
+
+Material use is more diverse. Design emphasizes "honest industrial style," combining some Brutalist concepts, clearly presenting spacecraft structure and history to people. Meanwhile, digital ruin elements often appear, such as retro industrial products coexisting with advanced digital technology, creating a unique temporal dislocation atmosphere. From modern works, it's more diversified.
+
+![](009-alien-isolation.jpg)
+
+<small class="block text-center">"Alien Isolation" game image</small>
+
+![](010-Space-Sweepers.jpg)
+
+<small class="block text-center">"Guardians of the Galaxy" "Space Sweepers" 2021 - Set in 2092, "Victory" is a spaceship specializing in cleaning space debris, crew members are lower-class groups making a living in space. With space as background, focusing on lower-class marginal characters' survival, conforms to Spacepunk's emphasis on lower-class narrative.</small>
+
+![](011-Guardians-of-the-Galaxy.jpg)
+
+<small class="block text-center">"Guardians of the Galaxy" screenshot - Although more "retro pop culture collage + lower-class resistance + anti-authority," it also possesses Spacepunk thought core.</small>
+
+## Summary
+
+This chapter's case selection made me hesitant. On one hand, it's niche, lacking overly distinct works that can fully express "Spacepunk = visual style + rebellious spirit + space narrative" trinity characteristics. On the other hand, it's hard to show its core spirit from single static visuals alone.
+
+Though Spacepunk belongs to punk style branches like Cyberpunk and Steampunk, each has unique characteristics. "Space background" is just Spacepunk's carrier. Its core is the combination of punk spirit and space setting, attempting to deconstruct "space exploration's" romantic imagination through rebellious narrative, rough aesthetics, and lower-class perspective.
+
+Modern Spacepunk is more diversified, not just simply "space theme + retro elements," but through these visual and narrative elements, raising profound questions about contemporary technological development, social structure, and human future, while maintaining nostalgic sentiment for space exploration history.
+
+I'm Rico, thanks for reading!

src/content/post/personal-website-selection-guide-for-designers/index.mdx

@@ -0,0 +1,177 @@
+---
+title: How to Choose a Personal Website for Designers? A Guide + Selected Open Source Templates
+publishDate: 2025-05-20
+read: 14
+description: Personal Website Selection Guide for Designers
+tags:
+  - Designer's Site
+  - Personal Website
+  - Portfolio
+img: "/assets/blog/cover-portfolio-site.jpg"
+img_alt: "How to choose a personal website for designers? Check out this guide + selected open source templates"
+---
+
+## AI Coding and Personal Websites
+
+With the popularity of AI coding, the development threshold has genuinely lowered. Discussions about personal websites have gained more attention recently, with many articles teaching how to use AI to create personal websites and blogs. However, most final products are too rough, merely setting up a static webpage framework, lacking functionality and performance considerations.
+
+So what qualities should a complete and quality personal website or blog possess? After all, for designers, a personal website is not just "a place to put work," but also a showcase of their design ability and aesthetic vision. For beginners learning development, building a personal website is the best practical scenario for understanding frontend logic and familiarizing with development workflow.
+
+Today let's discuss some common questions about personal websites - which type of website to choose? How to match technology stack with requirements? How to weigh no-code versus self-deployment, etc. At the end, I'll share carefully selected open-source personal website and blog templates.
+
+## Common Personal Website Types
+
+The core value of personal websites is "matching needs with scenarios" — different identities and goals require completely different website types. Different purposes correspond to different functional and visual needs. Especially for designers, choosing the right type maximizes portfolio display effectiveness. Current mainstream personal websites can be divided into three categories, covering most needs:
+
+**1. Content Sharing (including blogs, technical notes)**
+
+Centered on "conveying information, accumulating knowledge," not limited to pure text. Suitable for copywriters, developers, or industry observers, also includes daily records, mainly text creation. It emphasizes "content readability" and "search convenience."
+
+**Suitable for**
+
+- Developers (sharing technical tutorials, troubleshooting notes);
+- Industry observers (outputting design trends, workplace perspectives);
+- Copywriters/Creators (daily reflections, short content accumulation).
+
+**2. Portfolio Showcase (Designers/Creators' First Choice)**
+
+Making "work" the absolute protagonist, the goal is "letting visitors intuitively see your professional ability." It's not just "displaying work," but "explaining work value clearly" - the core showcase vehicle for designers, illustrators, and product managers.
+
+**Suitable for**
+
+- Visual/UI/UX designers (showcasing interface design, interaction prototypes);
+- Illustrators/Motion designers (high-resolution work collections, creative process);
+- Independent developers (personal project demos, product prototypes).
+
+**3. Personal Brand Comprehensive (Integrating all core information)**
+
+Equivalent to a "personal official website," integrating portfolio, blog, personal bio, contact information and other functions, suitable for professionals with clear personal brand positioning (like independent designers, freelance consultants). Its core is shaping a three-dimensional personal image. Functionally, it needs to combine both advantages, while visually maintaining overall style unity, avoiding fragmentation between different modules.
+
+**Suitable for**
+
+- Independent designers/Freelancers (letting clients see work, case experience, service range simultaneously);
+- Career advancers (integrating project experience, technical blog, personal honors, for job seeking or cooperation negotiations);
+- Multi-field creators (like "designer + photographer," needing to showcase two types of work simultaneously).
+
+## How to Choose Technology Stack
+
+Choosing a technology stack is essentially "need matching." You don't need to master all tools, but need to choose "tools that solve problems and have long-term value." Many people fall into "technology anxiety," but actually for personal websites, small scale, low technical difficulty, belongs to lightweight small projects. Technology error tolerance is very high.
+
+**First clarify your core needs**
+
+Before choosing a technology stack, ask yourself three questions:
+
+- What is your website's core function? (Is it displaying static work, or needing dynamic interaction?)
+- Do you need subsequent maintenance and feature iteration? (Need frequent content module updates and modifications)
+- Do you want to learn new skills through building a website? (Like designers wanting to understand frontend basics)
+
+For example, if you just want to display a static portfolio, don't need complex interaction, low update frequency, simple HTML+CSS+JS is sufficient. More mature lightweight solutions (like Astro, Hugo) are more suitable. If you want to add complex functions and interactions, you can choose frontend frameworks like React, Vue. Choose according to need, and communicate technology stack solutions with AI.
+
+### **Recommended Technology Stacks: React, Vue, Astro**
+
+For designers and beginners, the core advantages of popular technology stacks are "low learning cost, rich community resources and tutorials, high long-term value."
+
+- **Rich learning resources**: These technology stacks have mature communities. Whether official documentation, Bilibili tutorials, or AI Coding, you can quickly find answers. For example, the most popular UI framework Shadcn/UI has rich templates and theme resources, plus mature AI support.
+- **Designer-friendly**: React and Vue's "component-based development" is strongly supported by design tools like Figma. You can use tools to convert design components to code, directly connecting design to code path. Astro focuses on "Static Site Generation (SSG)," achieving both fast static page loading and supporting embedded dynamic components (like interaction modules written in React), balancing "performance" and "flexibility," focusing on implementation.
+- **Long-term value**: Designers "understanding basic frontend" helps at work. For example, being able to read HTML/CSS structure, understand interaction implementation logic, master React, Vue and other development basics not only facilitates efficient communication with development teams, but also helps better implement your design ideas.
+
+Besides the recommended technology stacks above, there are also WordPress, Hugo, Ghost, Hexo and other solutions on the market. Their positioning and characteristics differ greatly. Considering article length, you can explore specific details yourself. For designers, I don't particularly recommend them. If readers are pure content creators, they can still be considered.
+
+Simply put, if you want to balance design freedom and learning cost, **Astro** is the optimal solution (static pages load fast, supports embedding React/Vue and other frameworks, low entry threshold). If you want to deeply learn frontend, **React/Vue** has more long-term value. If you completely don't want to touch code and can accept payment, you can use no-code platforms (Framer, Webflow, Figma Site, etc.), but long-term, self-deployed static sites are more worry-free.
+
+## About No-Code Platforms VS Self-Deployment
+
+Currently two mainstream approaches: no-code platforms (Framer, Figma Site, Webflow) and self-deployment, each with pros and cons.
+
+### No-Code Platforms - Require payment, convenient but not free enough
+
+Advantages are obvious: No need to write code, build websites through visual design platforms, and have built-in CMS management systems, convenient for editing content. Especially Figma Site can directly convert Figma design drafts into websites. For designers, low learning cost, suitable for those wanting to quickly build a temporary showcase page.
+
+But there are also disadvantages:
+
+- **Too platform-dependent**: For example, using Framer, sites are completely hosted on the platform, cannot be used apart from the platform. The longer the operation, the higher the migration time and cost.
+- **Payment cost not low**: Basic free version has limited functionality, like only 3 works allowed, has platform watermark. Want custom domain, remove watermark, add advanced interactions, multi-language, all need paid plans, monthly from tens to hundreds, long-term use is expensive.
+- **Poor flexibility**: Many platforms' templates can't change core logic, limited customization functions, content may also be subject to platform review restrictions.
+
+### Self-Deployment - Free and full control, but high learning cost
+
+"Self-deployment" sounds complex, but actually means "find templates yourself/write code, put the website on server," like using free platforms like Cloudflare, Vercel, GitHub Pages for deployment.
+
+Advantages especially suitable for designers:
+
+- **Maximum freedom**: Can add whatever functions you want, like adding 3D preview for work, adding complex interactions and animations, even embedding self-made interaction prototypes, completely unrestricted by platforms, can 100% implement your design ideas.
+- **Low cost**: Most deployment platforms (Vercel, Netlify, Cloudflare) are free, custom domain costs only tens per year, and free function quotas are sufficient for personal use, much cheaper than no-code platforms long-term.
+- **Learn development skills**: Even if you only know design, following tutorials to build a self-deployed site once, you can also learn frontend basics, domain resolution, traffic, framework advantages, etc. Many companies recruiting designers now also prioritize those who understand some technology, equivalent to an extra bonus point.
+
+Disadvantages are also direct: **High learning cost, time and energy consuming**. For example, need to understand HTML/CSS basics, know how to modify template content, how to deploy websites to servers. Now there are many excellent open-source templates, following documentation and AI assistance can also successfully go online, just a bit slower than no-code.
+
+Of course, not everyone is suitable for self-deployment: If you only temporarily need a showcase page, time-pressed, low requirements, then no-code platforms are sufficient. But if you want to make a personal site a long-term personal brand, then self-deployment is definitely more worth investing in.
+
+"No money needed," "Website exquisite with full functionality," "No need to learn any code" — this is impossible. Want worry-free? Pay. Payment can solve any difficulties you encounter, including but not limited to purchasing mature templates, paid consulting, paid development, etc. Want the free route? Spend more thought. The essence of paid versus free is weighing "using money for time" or "using time for money."
+
+## **Selected Open Source Template Recommendations**
+
+Finally, sharing 5 carefully selected open-source personal site templates I've chosen, all considered from multiple dimensions like "aesthetics, functionality, uniqueness," suitable for designers wanting to self-deploy. Whether design or code, they have high reference and learning value - see what good works are, then learn how to do them.
+
+A reminder: These templates require basic coding ability (AI assistance can help start), not suitable for complete beginners or those unwilling to learn development. Although there's detailed documentation, it takes time to research and learn. Going online will definitely be rewarding.
+
+### Cali's Personal Website (⭐1.9K)
+
+![cali.jpg](cali.jpg)
+
+- Website: [https://cali.so/](https://cali.so/)
+- Open Source: [https://github.com/CaliCastle/cali.so](https://github.com/CaliCastle/cali.so)
+- Deployment Docs: [https://cali.so/blog/guide-for-cloning-my-site](https://cali.so/blog/guide-for-cloning-my-site)
+- Tutorial Video: [https://www.bilibili.com/video/BV1kH4y157xg/](https://www.bilibili.com/video/BV1kH4y157xg/)
+- Tech Stack: Next.js + Tailwind CSS + Sanity + Neon + Resend + Clerk + Upstash
+- Highlights: Comprehensive features, maximum design details. Many website interactions and animations are great, worth experiencing carefully. Has very detailed tutorial documentation and teaching videos. Functionality includes comment system, project list, message wall, email, backend management system, etc.
+- Difficulty: Relatively complex tech stack, higher deployment difficulty.
+
+### Onur Dev (⭐2.3K)
+
+![onur-dev.jpg](onur-dev.jpg)
+
+![onur-dev-2.jpg](onur-dev-2.jpg)
+
+- Website: [https://onur.dev/](https://onur.dev/)
+- Open Source: [https://github.com/suyalcinkaya/onur.dev](https://github.com/suyalcinkaya/onur.dev)
+- Tech Stack: React + Tailwind CSS + Contentful
+- Highlights: Comprehensive features, suitable for designer+developer identity, including blog articles, life records, timeline, and simple bookmark navigation. Very minimalist design, but module layout and functionality are practical.
+
+### Naresh Khatri 3D Personal Website (⭐557)
+
+![nareshkhatri.jpg](nareshkhatri.jpg)
+
+- Website: [https://www.nareshkhatri.site/](https://www.nareshkhatri.site/)
+- Open Source: [https://github.com/Naresh-Khatri/3d-portfolio](https://github.com/Naresh-Khatri/3d-portfolio)
+- Tech Stack: Three.js (3D rendering library) + React + Next.js + Tailwind
+- Highlights: Strong 3D interactive visual impact — entire page is 3D space, can drag to rotate viewing angle, works displayed as 3D cards, click to see details; suitable for UI/UX, motion designers
+
+### Sudip Portfolio Website
+
+![sudip.jpg](sudip.jpg)
+
+![sudip2.jpg](sudip2.jpg)
+
+- Website: [https://portfolio-metaloopa.vercel.app/](https://portfolio-metaloopa.vercel.app/)
+- Open Source: [https://github.com/metal-oopa/personal-portfolio](https://github.com/metal-oopa/personal-portfolio)
+- Tech Stack: React
+- Highlights: Dark style + dynamic interaction, rich interaction and visual effects, work page added "text gradual reveal animation on hover," very thoughtful details. Functionality supports work categorization, personal skill display, projects, and contact form, suitable for designers who like dark style.
+
+### ThoughtLite
+
+![thoughtlite-1.jpg](thoughtlite-1.jpg)
+
+![thoughtlite-2.jpg](thoughtlite-2.jpg)
+
+- Website: [https://ttio.cc/](https://ttio.cc/)
+- Open Source: [https://github.com/tuyuritio/astro-theme-thought-lite](https://github.com/tuyuritio/astro-theme-thought-lite)
+- Tech Stack: Astro + Tailwind CSS (static loading fast, responsive adaptation good)
+- Highlights: Personal recommendation, minimalist design lightweight blog, simple tech stack, easy to start, focuses on text creation, supports Markdown editing and dark mode switching. Clean modern aesthetics, fast loading speed (SSG optimization), and supports multiple languages. Very good experience for text creation.
+
+
+## Finally
+
+AI can indeed help us develop quickly, but truly brand-effective and valuable personal sites are never rushed out, but polished out - polishing features, details, polishing out your own style. If you're a designer, might as well spend time trying self-deployment, even just starting from modifying open-source templates. What goes online in the end is not just a website, but your exploration of "design + technology." After all, the feeling of being able to 100% implement your own ideas is really satisfying.
+
+If you encounter problems during site building, feel free to add me as a friend, let's communicate together.

src/content/post/the-aesthetics-of-time-dislocation-retro-futurism/index.mdx

@@ -0,0 +1,187 @@
+---
+title: The Aesthetics of Time Dislocation - Decoding Retro-Futurism from the Fantastic Four
+publishDate: 2025-07-26
+read: 8
+description: The Aesthetics of Time Dislocation Retro-Futurism and the Fantastic Four
+img: "/assets/blog/cover-retrofuturism.jpg"
+tags:
+  - Retro-Futurism
+  - Retro Futurism
+  - Design Style Guide
+featured: true
+---
+
+Hello everyone, this is Rico. Remember the retroism we discussed before? It's rooted in that nostalgic sentiment in human culture and psychology: **"Time moves forward, yet people can't help but reminisce about the past."** In contrast, there's our infinite longing and aspiration for the future.
+
+When past and future collide, Retro-Futurism is born. Its philosophy is fascinating: **"looking at the future from the past and looking at the past from the future"**. This unique perspective, along with its philosophy and visual style, is both interesting and philosophically deep.
+
+The currently screening "The Fantastic Four: First Steps" showcases the aesthetic charm of Retro-Futurism. The film sets the background in the golden age of the 1960s space race, cleverly merging retro technological creations and cultural characteristics with infusions of future fantasy. Audiences are immersed in a tactilely real, fully formed retro-futuristic parallel universe. In today's era of aesthetic fatigue, this both nostalgic and avant-garde aesthetic visual undoubtedly brings a refreshing viewing experience (not talking about plot, only aesthetic style).
+
+![The Fantastic Four: First Step poster](001.jpg)
+
+![The Fantastic Four: First Step screenshot](002.jpg)
+
+![The Fantastic Four: First Step screenshot](003.jpg)
+
+
+<small class="block text-center"> The Fantastic Four: First Step </small>
+
+## Definition
+
+Public records of the term "Retro-futurism" can be traced back to 1983 in a New York Times advertisement for Bloomingdale's jewelry, first using the adjective "retro-futuristic" to describe the "both old and new" texture of silver steel and gray tones. In 1987, Minnesota independent publisher Lloyd John Dunn officially renamed his experimental magazine "photoSTATIC" to "Retro-futurism," bringing the term into cultural view and it has been used ever since.
+
+Wikipedia's definition of Retro-Futurism is:
+
+> **Retro-Futurism** refers to the imitation of early Futurist design styles in contemporary art. This design style combines retro style with technologically colored futuristic style, usually reflecting early artists' conceptions of the future, like a parallel reality.
+
+
+From the Chinese translation definition, the context and translation are not easy to understand. Retro-Futurism is essentially "the future in past people's eyes." It has two key elements:
+
+1. **Past future imagination**: Refers to people's predictions and imaginations of the future world in past eras (mainly mid-20th century)
+2. **Contemporary reinterpretation**: We now re-examine and reinterpret these old-era future imaginations with modern eyes
+
+Simply put, it presents "the future in past people's eyes" — not our current predictions of the future, but looking back at past era people's imagined future world.
+
+![In 1930, German illustrator Echte Wagner depicted fantasies of year 2000 future technology](004.jpg)
+
+<small class="block text-center">In 1930, German illustrator Echte Wagner depicted fantasies of year 2000 future technology</small>
+
+![The Art of Robert McCall](005.jpg)
+
+<small class="block text-center">The Art of Robert McCall - Artwork imagining future worlds</small>
+
+## Retro-Futuristic Design Style Characteristics
+
+Let's focus our perspective on the design field. The characteristic of Retro-Futurism is using current perspectives to recall and rewrite "a certain past era's imagination of the future," reviving "unrealized old futures" in contemporary context, thereby forming a kind of temporal dislocation aesthetic tension and critical nostalgia. The style is not fixed either, but based on a past era fragment plus constantly changing "future" constituting the concept of Retro-Futurism.
+
+![Loki set design heavily referenced classic mid-20th century modernist architecture](006.jpg)
+
+<small class="block text-center">Loki set design heavily referenced classic mid-20th century modernist architecture</small>
+
+![Loki Time Variance Authority control room](007.jpg)
+
+<small class="block text-center">Loki Time Variance Authority control room</small>
+
+### Visual Language
+
+Retro-Futurism's visual language is full of drama and imagination.
+
+- **Streamlined Design**
+
+Iconic streamlined design inherits the aesthetic tradition of the 1950s-60s "Space Age," characterized by smooth, rounded curves and dynamic aerodynamic shapes. This design language is not only embodied in architecture and transportation, but also permeates daily product design, giving them a sense of transcending the era's futurism.
+
+![The Fantastic Four: First Step screenshot](008.jpg)
+
+<small class="block text-center">The Fantastic Four: First Step screenshot</small>
+
+- **Bold Color Combinations**
+
+In color combinations, Retro-Futurism is bolder and more flamboyant. Vivid contrasting tone combinations create strong visual impact. These colors blend nostalgic retro and advanced future characteristics, cleverly expressing contradictory emotional feelings.
+
+![p2923437891.jpg](009.jpg)
+
+
+- **Geometric Shapes and Metallic Textures**
+
+Geometric shapes are also common elements - starburst patterns, atomic symbols, concentric circles, and angular geometric shapes constitute Retro-Futurism's visual vocabulary. The widespread use of metallic textures (like chrome alloys, polished metals, and reflective surfaces) further highlights this futuristic sense. Especially for last century's thought trends, such visuals seemed to represent a technologically more advanced future.
+
+![2001: A Space Odyssey](010.jpg)
+
+<small class="block text-center">2001: A Space Odyssey</small>
+
+- **Future Technology Elements**
+
+Of course, imagination of future technology is indispensable. Flying cars, space stations, robots, aircraft and other sci-fi elements are regulars in Retro-Futurism works. They are past era's beautiful aspirations for the future, now reinterpreted, becoming unique visual symbols.
+
+![The Art of Robert McCalll, 1970s](011.jpg)
+
+<small class="block text-center"> Robert McCalll, 1970s imagination of future world </small>
+
+![Tomorrowland](012.jpg)
+
+<small class="block text-center"> Tomorrowland (2015) 1960s optimistic imagination of future cities</small>
+
+
+## Deep Logic of Design Principles
+
+Let's go further and explore Retro-Futurism's inner design principles. Most core is temporal mashup: deliberately mixing design languages of different eras, such as juxtaposing 1950s home aesthetics with future technology elements, creating a wonderful time-space disorientation effect from color and structure design. This mashup isn't random assembly, but carefully designed dialogue, letting past and future meet in the same space.
+
+Technological optimism is another important characteristic of this style. Unlike dystopian perspectives common in contemporary tech narratives, Retro-Futurism retains that pure enthusiasm for technological progress and longing for a better future found in early sci-fi works. This optimistic attitude is especially precious in today's tech-anxious era, even nostalgic and longed for.
+
+In expression methods, Retro-Futurism favors exaggeration and drama, not overly pursuing pragmatism, but emphasizing visual impact and emotional experience. This makes Retro-Futurism works often have a surreal texture - they're not for solving practical problems, but for stimulating imagination and emotional resonance.
+
+
+![AI imagination of retro-futuristic aesthetics](013.jpg)
+
+<small class="block text-center;"> AI imagination of retro-futuristic aesthetics </small>
+
+![The Fantastic Four: First Step city background](014.jpg)
+
+<small class="block text-center">The Fantastic Four: First Step city background</small>
+
+We can abstract as:
+
+1. **Temporal Mashup**: Deliberately mixing design languages of different eras, like 1950s aesthetics with future technology
+2. **Technological Optimism**: Expressing optimistic attitudes toward technological progress and aspirations for a better future
+3. **Exaggeration and Drama**: Not pursuing pragmatism, but emphasizing visual impact and emotional experience
+4. **Nostalgia and Innovation Coexist**: Simultaneously evoking nostalgic emotions and futuristic sense
+
+## Work Characteristics
+
+Retro-Futurism works often present rich multi-dimensional qualities. First is that unique "temporal dislocation." When facing a Retro-Futurism work, we often experience a strange temporal paradox, simultaneously feeling past and future existence. This dislocation isn't chaos, but conscious artistic treatment, challenging our traditional cognition of time's linear development.
+
+Secondly, in Retro-Futurism's world, technology isn't cold tools, but existence closely integrated with human emotional needs. This fusion embodies an idealistic technological view - technology should serve human happiness and creativity, not the reverse.
+
+![Last century's fantasy illustration of the future](015.jpg)
+
+<small class="block text-center"> Last century's fantasy illustration of the future</small>
+
+Parallel reality narrative is Retro-Futurism's core charm. These works create "could have happened but didn't happen" historical branches. The concept of parallel realities isn't unfamiliar in today's flourishing film and literary works, but the vitality displayed in the design field is delightful.
+
+Era traces in details are Retro-Futurism's subtle points. Standing at present imagining future, these works also can't completely escape their creation era's aesthetic preferences and cultural backgrounds. These subtle era imprints precisely become Retro-Futurism's charm - they carry each era's cultural characteristics and unique imagination of the imagined future.
+
+Simply summarized as:
+
+1. **Temporal Dislocation Sense**: Works often present a strange temporal paradox, letting viewers simultaneously feel past and future
+2. **Integration of Technology and Humanities**: Balance of technological elements and human emotional needs
+3. **Parallel Reality Narrative**: Creating "could have happened but didn't happen" historical branches
+4. **Era Traces in Details**: Even depicting the future, can see creation era's aesthetic preferences in details
+
+## Development and Derivative Styles
+
+Retro-Futurism is not an unchanging style. As times develop, people continuously resample, collage, and tempo-shift "past imaginations of the future." According to different era anchor points, emotional orientations, and technological settings, rich diverse branch styles have derived. Like Cyberpunk, Steampunk, Spacepunk / NASA Punk, and Vaporwave, Synthwave, Chillwave, Future Funk, etc. This "temporal dislocation" creation is fascinating.
+
+![Cyberpunk 2077](016.jpg)
+
+<small class="block text-center"> Cyberpunk 2077</small>
+
+These branches each have their focus. Steampunk, Dieselpunk, Spacepunk are responsible for "returning to the past, rewriting the future." Cyberpunk is responsible for "freezing the old future, letting it continue rotting or shining today." Vaporwave/Synthwave are responsible for "cutting up old future commercials, making today's emotional background." They collectively constitute Retro-Futurism's "family tree." As new "present" continuously becomes "past," tree branches are still growing.
+
+![Blade Runner 2049](017.jpg)
+
+<small class="block text-center"> Blade Runner 2049</small>
+
+Of course, we'll explore these styles in detail later. Looking forward to it.
+
+## Finally
+
+In my personal understanding, Retro-Futurism design style is essentially a clever temporal paradox, fusing two completely different elements: certain past and unknown future.
+
+Past historical elements represent certainty and security. These familiar visual symbols, aesthetic styles, and cultural memories provide a cognitive anchor for viewers. We can subconsciously recognize last century's cultural characteristics and retro elements existing in scenes. They evoke nostalgic emotions, giving us comfort and intimacy.
+
+Future elements symbolize the unknown, possibilities, and exploration. The future itself is full of uncertainty, potentially exciting or unsettling. It challenges our imagination, pushing us to think about "what might be" questions.
+
+Retro-Futurism's unique charm precisely comes from this contradictory harmonious unity: it uses familiar past language to describe the unknown future, thereby creating emotional balance. Familiar retro elements reduce anxiety about future uncertainty, while future imagination injects fresh vitality into nostalgic sentiment, preventing it from degenerating into simple imitation or copying.
+
+This temporal interlacing produces fascinating visual and cognitive experiences, satisfying our psychological needs for security and familiarity while triggering curiosity and exploration desire for unknown worlds. I believe in today's era of increasing uncertainty, Retro-Futurism will become increasingly popular because it provides a way to face the future, not just limited to design style.
+
+
+## Reference Articles
+
+- 宅在缸中的脑斯基 - [Talking about Retro-Futurism! The Universe Once Lifted Its Skirt for Humanity Last Century](https://zhuanlan.zhihu.com/p/874642642) (Good article! Recommended)
+
+- 余月鱼鸽 - [Retro-Futurism: Can Applied Science Fulfill Its Early Promises?](https://zhuanlan.zhihu.com/p/699505638)
+
+- 暴君7200 - [Time Is Circular: Sorting Out "Retro-Futurism"](https://www.gcores.com/articles/116899)
+
+- Sparkwarrgon - [How Did Loki's TVA Time Management Bureau Make Retro-Futurism So Complete?](https://zhuanlan.zhihu.com/p/388058034)

src/content/post/top-14-free-icon-libraries-for-designers-and-developers/index.mdx

@@ -0,0 +1,151 @@
+---
+title: Icon Freedom! 14 Quality Free Icon Libraries Recommended
+publishDate: 2025-08-27
+read: 8
+description: Top 14 Free Icon Libraries for Designers & Developers
+tags:
+  - Icon Libraries
+  - Free Icon
+  - Free Icon Library Recommendations
+img: "/assets/blog/cover-free-icon-library.jpg"
+img_alt: "14 free icon library recommendations"
+---
+
+Although I'm a designer, I've always felt that drawing icons is quite troublesome - they need to be standardized, concise, precisely express meaning, have design sense, and also meet massive quantity demands. Especially for time-pressed projects, icon production is a tedious and energy-consuming task.
+
+Fortunately, open-source contributors upholding internet open-source culture have contributed many excellent open-source projects, allowing us to directly use these quality results. Below I'll share 14 quality icon libraries from my daily collection, basically covering all icon types, each with different advantages - like supporting React, Vue, Svelte and other common development frameworks, freely adjustable lines, colors, sizes and other details, providing Figma source files and various other needs.
+
+In my personal experience, they completely meet my commercial and personal project needs. Below are specific icon library introductions:
+
+### 1. Free Svg Icons
+
+- URL: [freesvgicons.com](https://freesvgicons.com/)
+- Description: Aggregates multiple common open-source icon libraries, integrating over 250K icons, supports SVG, PNG, React, Ts and other format exports, basically covers all scenario needs.
+- Advantages: Aggregation platform, preview and compare multi-platform icons at once, convenient for cross-border use, can directly download and edit, no complex authorization process needed.
+
+    ![01-freesvgicons.png](01-freesvgicons.png)
+
+
+### 2. Iconsax
+
+- URL: [https://app.iconsax.io/](https://app.iconsax.io/)
+- Description: Multi-style variant (Outline / Bold / Bulk / Two-tone / Broken etc.) modern icon system. Total 40K+ icons, over 6000 free icons.
+- Advantages: Supports React, Vue, Svelte frameworks, customizable size, color and stroke, high style consistency, benefits medium-large design systems, high integration efficiency.
+
+    ![02-iconsax.png](02-iconsax.png)
+
+
+### 3. Mageicons
+
+- URL: [https://mageicons.com/](https://mageicons.com/)
+- Description: Open-source minimalist modern style icon library, includes nearly 1000+ icons, supports Figma, React and Web Fonts.
+- Advantages: Clean beautiful design, supports Stroke Icons, Fill Icons, Brand Icons.
+
+![03-mageicons.png](03-mageicons.png)
+
+### 4. Remix Icon
+
+- URL: [https://remixicon.com/](https://remixicon.com/)
+- Description: Well-known open-source icon library, has over 3000 icons, covers common product, development, commercial scenarios. Neutral versatile style, provides Figma community file, one-click import usage.
+- Advantages: Icon line consistency and standardization, adapts to Web, mobile multi-scenario, high update frequency, supports mainstream development frameworks, active community maintenance.
+
+![04-remixicon.jpg](04-remixicon.jpg)
+
+### 5. Lucide
+
+- URL: [https://lucide.dev/](https://lucide.dev/)
+- Description: Lightweight open-source linear icon library, includes over 1600 icons, with minimalist design language adapts to various interfaces, one of my most commonly used icon libraries, recommended.
+- Advantages: Small size efficient loading, supports custom stroke width and color, compatible with React, Vue frameworks, suitable for projects pursuing lightweight.
+
+![05-lucide.png](05-lucide.png)
+
+### 6. Akar Icons
+
+- URL: [https://akaricons.com/](https://akaricons.com/)
+- Description: Open-source minimalist style icon library, contains over 400 icons, friendly linear icon library with soft rounded end treatment.
+- Advantages: No redundant code easy integration, icon design concise and friendly, suitable for minimalist interface design.
+
+![06-akar.png](06-akar.png)
+
+### 7. QingIcon
+
+- URL: [https://qingicon.com/](https://qingicon.com/)
+- Description: Domestic designer project, designed and developed by Asorn & 胡蝶, over 2000 icons, single and dual color styles, diverse types, suitable for B-end, middle and back office projects.
+- Advantages: Supports SVG, Figma plugin, Wenfont, has detailed guidance documentation, also has an SVG illustration library, meets personalized design needs, recommended!
+
+![07-qingicon.jpg](07-qingicon.jpg)
+
+### **8. Circumicons**
+
+- URL: [https://circumicons.com/](https://circumicons.com/)
+- Description: 285 free icons, icon library with circular/rounded outline as overall visual carrier.
+- Advantages: Unified style high recognition, excellent design, supports size and color customization.
+
+![08-circumicons.jpeg](08-circumicons.jpeg)
+
+### **9. Hero Icons**
+
+- URL: [https://heroicons.com/](https://heroicons.com/)
+- Description: Open-source icon library developed by Tailwind CSS team, contains over 300 icons, divided into outline, solid, Mini, Micro four styles, provides Figma community file.
+- Advantages: Seamless adaptation with Tailwind CSS, icon style simple and unified, supports React, Vue framework component calls, high development integration efficiency.
+
+![09-heroicons.jpeg](09-heroicons.jpeg)
+
+### 10. Boxicons
+
+- URL: [https://boxicons.com/](https://boxicons.com/)
+- Description: Over 3000 free icons, contains Basic / Duotone / Brands categories.
+- Advantages: Supports multiple customization methods, including custom size, color, lines, etc., convenient integration.
+
+![10-boxicons.jpg](10-boxicons.jpg)
+
+### 11. Grassicons
+
+- URL: [https://grassicons.framer.website/](https://grassicons.framer.website/)
+- Description: 100+ linear style, clean design, supports SVG and Figma.
+- Advantages: Contains static and dynamic icons, icon animations concise and smooth.
+
+![11-grassicons.png](11-grassicons.png)
+
+### 12. Isocons
+
+- URL: [https://www.isocons.app/](https://www.isocons.app/)
+- Description: Isometric style 3D perspective light skeuomorphic icons.
+- Advantages: Has three-dimensional depth, enhances information entry attraction, suitable for feature promotion / landing pages / empty page illustration.
+
+![12-isocons-app.jpg](12-isocons-app.jpg)
+
+### 13. Iconoir.com
+
+- URL: [https://iconoir.com/](https://iconoir.com/)
+- Description: Includes over 1600 icons, semantic coverage very comprehensive.
+- Advantages: Framework (React / Vue / Flutter etc.) support, customizable size, stroke and color.
+
+![13-iconoir.jpg](13-iconoir.jpg)
+
+### 14. Doodle Icons
+
+- URL: [https://khushmeen.com/icons.html](https://khushmeen.com/icons.html)
+- Description: Hand-drawn style icon library, includes over 400 icons and an illustration library, lines lively and agile, full of creative sense.
+- Advantages: Unique style different from regular icons, suitable for personalized, youthful design scenarios, supports PNG, Figma, SVG.
+
+![14-doodle-icons.png](14-doodle-icons.png)
+
+### Finally
+
+Good use of excellent open-source icon libraries can let you invest energy into interface information architecture, visual rhythm and interaction strategy that truly have differentiated value.
+
+I've also collected all the above icon libraries into my own resource integration website UIUXDECK. If you find it too troublesome to bookmark one by one, you can check out all my resource collections here.
+
+URL: <a href="https://uiuxdeck.com/search?category=icon-library" target="_blank"> uiuxdeck.com/search?category=icon-library </a>
+
+<a href="https://uiuxdeck.com/search?category=icon-library" target="_blank">
+![uiuxdeck-icon.jpg](uiuxdeck-icons.jpg)
+</a>
+
+
+<a href="https://uiuxdeck.com/search?category=icon-library" target="_blank">
+![uiuxdeck.jpg](uiuxdeck.jpg)
+</a>
+
+I'm Rico, thanks for reading!