diff --git a/src/content/posts/design-principles/cover.png b/src/content/posts/design-principles/cover.png
new file mode 100644
index 000000000..5d328c0cb
Binary files /dev/null and b/src/content/posts/design-principles/cover.png differ
diff --git a/src/content/posts/design-principles/index.md b/src/content/posts/design-principles/index.md
new file mode 100644
index 000000000..1eea752d2
--- /dev/null
+++ b/src/content/posts/design-principles/index.md
@@ -0,0 +1,36 @@
+---
+title: Design Principles
+published: 2024-12-17
+description: Learning Design for Web Development
+image: cover.png
+tags: [Technology]
+category: English
+draft: false
+---
+
+:::note[References]
+
+- Robin Williams, [_Non-Designers Design Book_](https://123dok.com/document/q51xl8wy-designers-design-design-typographic-principles-visual-novice-edition.html), Peachpit Press; 4th edition, 2014
+
+:::
+
+4 Basic Principles of Design
+----------------------------
+
+1. Proximity
+2. Alignment
+3. Repetition
+4. Contrast
+
+### Proximity
+
+:::tip[Principle of Proximity]
+
+__Group related items together__
+
+:::
+
+The purpose of the principle is to give viewer an instant visual clue to the organization and content of the page. When
+several items are in close proximity to each other, they become one visual unit rather than several separate units.
+
+To be continued ...