Design
Design system for haritssr.com and harimaki.com.
Principles
- The devil is in the details.
- Show, don’t tell.
- User Interface Principles
- Navigation should stay out of the way while browsing, yet be instantly available when needed.
- Hide the bottom tab bar on content pages.
- Concise explanations accelerate progress.
- Recognize patterns through repeated observation and reflection.
- Use Oklab or Oklch for perceptually balanced colors and gradients.
- Every modal should appear instantly, with no animation or transition.
- Strive for one line navigation layer on all screen views as possible.
- Defining feature or update make it easy for sharing and documentation.
- Responsive design system: works on phone, tablet, and desktop screen sizes.
- Inspired by Laws of UX, NN/g, Apple’s design principles, Linear, Raycast, Dub, and Vercel.
- Use blue for actions, red for danger, errors, and warnings, green for success, orange for progress.
- Principles explain why; code shows how.
- Each page should make it clear where users are, what they can do, what sections are available, and how to leave.
- Digital services should expand what people can do (ability) yet respect limits of attention and working memory (cognitive load).
- Use distinct links for navigation and buttons for actions, with clear hover, active, and focus-visible states where relevant.
- Minimize borders for grouping and separation. Use spacing, color, translucency, or strategically show and hide elements instead.
- Use subtle shadows for emphasis, raising them on hover and lowering them on press. Floating controls sit higher; disabled controls and selects stay flat. Keep keyboard focus visible.
Layout
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5
Components
LogoLogo.tsx
Harits Syahharitssr.com
Harimakiharimaki.com