Refactoring the Nutrihabits Homepage: A Modernized Design Approach

Improving User Experience

Consistency is the bedrock of a scalable user interface. In the Nutrihabits project, we recently focused on a major overhaul of our homepage to align with the v3 design guidelines. The goal was to unify our styling patterns, reduce technical debt, and ensure that our visual language is as maintainable as the application logic itself.

The Challenge of Growing Styles

As a project grows, CSS often becomes a dumping ground for overrides and legacy selectors. We found that our homepage was suffering from scattered styling definitions, making it difficult to update components without introducing accidental regressions. To solve this, we moved toward a more modular SCSS structure, focusing on shared mixins and variable-driven layouts.

Standardizing with Sass

By leveraging Sass, we established a clear hierarchy for our design tokens. Instead of hardcoding values, we transitioned to using functions and variables that keep the design system consistent across different viewports. Here is an example of how we simplified our button and container components using these patterns:

$primary-color: #2ecc71;
$container-padding: 20px;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage-container {
  @include flex-center;
  padding: $container-padding;
  background-color: lighten($primary-color, 40%);

  .cta-button {
    background-color: $primary-color;
    color: white;
    border-radius: 4px;
    padding: 10px 20px;
  }
}

Architectural Impact

Beyond just aesthetics, this refactor allows our backend integration—powered by PostgreSQL—to remain decoupled from the UI. By keeping our SCSS logic separate from the data-fetching layers, we can iterate on the interface design without touching the database queries that power the habit-tracking functionality.

Key Takeaways

1. Modularize Early: Don't wait for your CSS to become a monolith. Use Sass mixins to extract repetitive patterns.
2. Design Tokens Over Values: Define your spacing and colors in variables to make global theme changes a single-line update.
3. Decouple UI and Logic: Keep styling layers distinct from data-handling layers to ensure that frontend updates don't break database-driven features.

By treating your CSS with the same rigor as your application logic, you ensure that the project remains a joy to maintain, not just a joy to use.

Generated with Gitvlg.com