The Style Guide
Oct 23, 2025
The Visual Identity Behind My Website
Great design feels intentional. Every color, corner radius, and interaction on my website contributes to a clear and cohesive identity. This space serves as both my personal hub and a reflection of the design principles that shape my work. The following is a closer look at the components and visual logic behind the interface you see every time you land on my homepage.
The Colors
The color system supports accessibility, strong contrast, and emotional tone. Each color serves a specific role in the UI.
Light Mode
• Background: #FAFAFA
• Box Surfaces: #F1F2F4
• Interactive Accent: #F87F2C
• Tag & Icons Text: #6E7C87
• Headings (H1–H4) + Body Alternate: #6E7C87
• Headings (H5–H6) + Primary Body Text: #7F8995
Light Mode maintains a clean workspace feel. Neutral surfaces keep attention on content while the warm orange accent drives focus to clickable elements. Gray tones create structure and hierarchy without overpowering the design.
Dark Mode
• Background: A deep brown tone similar to #1C0E06
• Box Surfaces: A slightly warmer dark brown approx. #2A160A
• Interactive Accent: #F87F2C
• Tag & Icons Text: #6E7C87
• Headings (H1–H4) + Body Alternate: #6E7C87
• Headings (H5–H6) + Primary Body Text: #7F8995
Dark Mode introduces a warm café lighting. The interface becomes visually immersive while preserving readability through balanced contrast.
Consistency between both themes ensures that the brand remains recognizable in every context.
The Typography System
Typography defines the voice and reading experience of the website. Each style follows a modular scale for harmony across headings and paragraphs.
Style | Example Label | Size | Line Height |
|---|---|---|---|
H1 | Heading 1 | 40px | 1.1 |
H2 | Heading 2 | 30px | 1.4 |
H3 | Heading 3 | 26px | 1.4 |
H4 | Heading 4 | 22px | 1.4 |
H5 | Heading 5 | 18px | 1.4 |
H6 | Heading 6 | 16px | 1.4 |
Body | Base text | 16px | 1.6 |
Small | Supporting text | 14px | 1.5 |
X-Small | Metadata | 12px | 1.6 |
Headings guide users through storytelling and layout scanning. Body text prioritizes readability for longer articles. Smaller text supports utility elements such as tags and navigation without competing for focus.
Spacing, line height, and weight keep everything approachable and visually smooth.Component Design
The website uses a system of rounded, soft components designed for a friendly and cohesive user experience.
• Cards organize content like the Photo Dump and blog post list into clear browsing zones.
• Category filters such as Review and Life help users explore different content types easily.
• Social link containers support navigation across platforms without overwhelming the visual flow.
• Theme toggles add utility while reinforcing the brand’s visual duality.
• Avatar icons introduce personality and a recurring character element in the interface.
Everything is built to feel like it belongs together.
UI Components With Purpose
• Rounded cards and containers bring cohesion to every section.
• Category filters such as “Review” and “Life” operate as visual anchors.
• Avatar icons and tool buttons add personality to navigation.
• The Light–Dark toggle reinforces user choice and materiality.
• Blog and photo modules prioritize storytelling through layout and balance.
Every component plays a functional role and supports a visually harmonious brand.
A System That Evolves
This design language is not static. It will expand as new content types are added, new interactions are introduced, and the personality of the brand continues to mature. The goal is always the same: create a digital home that feels crafted, intentional, and distinctly mine.
In both daytime clarity and nighttime warmth, the identity remains recognizable, usable, and expressive.
Content First
Design should serve storytelling. In this system, photography receives generous space and breathing room. Featured blog posts highlight the most recent work with clear segmentation. Product lists are displayed with simple links that feel organized and relevant to the content they support.
The interface avoids unnecessary noise. It aims to feel clean, personal, and intentional.
Why This Matters
This design language represents who I am as a visual designer. Craftsmanship. Comfort. A warm aesthetic with a modern approach. A space that grows as the work evolves.
The website is both a living portfolio and a personal journal, where thoughtful design enhances the content rather than competing with it. As I continue releasing new articles, photos, product reviews, and future creative experiments, this foundation ensures everything remains aligned with the identity I am building.