Styles and Design

The UI of Raccoon Survey is built with a “Dark Mode First” philosophy, ensuring a modern, elegant, and visually comfortable experience. The design relies on a utility-first CSS framework, TailwindCSS, which allows for rapid development and a highly maintainable codebase.

—

Design Philosophy

  • Dark Mode First: The entire interface is designed primarily for a dark theme, using a palette of neutral grays, deep blues, and vibrant accent colors for interactive elements. This reduces eye strain and provides a sleek, professional look.

  • Minimalism and Clarity: The design prioritizes simplicity, with generous whitespace, clean typography, and a clear visual hierarchy to guide the user.

  • Consistency: A consistent design language is used across all components, from buttons and forms to modals and notifications, creating a cohesive and predictable user experience.

—

Technology Stack

  • TailwindCSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in the HTML. This avoids the need for writing custom CSS and ensures a consistent and scalable styling system.

  • PostCSS: Used to process the TailwindCSS directives and generate the final CSS bundle.

  • Google Fonts: The project uses modern, readable fonts like Inter and Poppins, imported from Google Fonts to ensure high-quality typography.

—

Responsive Design

The application is fully responsive and adapts to a wide range of screen sizes, from mobile phones to large desktop monitors. The responsive design is achieved using Tailwind’s breakpoint prefixes (sm:, md:, lg:, xl:), which make it easy to apply different styles at different screen sizes.

Example: Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- This will be a single column on mobile, two columns on medium screens, and three columns on large screens -->
  <div class="bg-gray-800 p-4 rounded-lg">Item 1</div>
  <div class="bg-gray-800 p-4 rounded-lg">Item 2</div>
  <div class="bg-gray-800 p-4 rounded-lg">Item 3</div>
</div>

—

Global Styles and Configuration

  • `tailwind.config.js`: This file, located in the src/ui/ directory, is used to customize the default TailwindCSS configuration. It defines the color palette, fonts, spacing, and other design tokens to match the project’s brand identity.

  • `static/css/main.css`: This is the main stylesheet where the TailwindCSS directives (@tailwind base;, @tailwind components;, @tailwind utilities;) are included. It is processed by PostCSS to generate the final CSS file with all the utility classes.