Fundamentals

What is Utility-First CSS?

Tailwind uses a utility-first approach to styling. Instead of writing custom CSS, you apply small utility classes directly in your HTML to control layout, spacing, color, and more.

For example:

                                                        
                                                        
                                                            <div class="p-4 bg-level-00 text-high rounded-md">
                                                          Hello from Nova!
                                                        </div>
                                                        
                                                            

This method offers several benefits:

• Clear and visible styling directly in markup
• Faster development—no need to write custom CSS
• Consistency across projects
• Easy to understand and maintain

Nova builds on this principle by providing tokens and utilities that reflect our design decisions.

Avoid Custom CSS

You should avoid writing custom CSS whenever possible. Instead, use:

• Tailwind utility classes directly in your markup
• Nova’s semantic tokens (e.g., —color-level-00-background, —color-content-high-text)
• The @apply directive (if needed in CSS files—explained later)

Using the Tailwind-based approach ensures consistency, enables dark mode support, and simplifies maintenance.

Don’t Copy CSS from Figma

Figma often shows styles as raw CSS (e.g., color: #1242e0;). Avoid copying these values into your code.

Instead, translate designs using Nova tokens. For example:

If unsure how to map a Figma style, consult the Design Tokens documentation or reach out to the design team.

Tailwind Class Naming in Nova

Nova follows Tailwind’s naming conventions with a few key differences:

• Semantic names for colors (e.g., bg-level-00, text-high)
• Token-based spacing, sizing, and typography
• No arbitrary values (e.g., px-[13px])—use predefined tokens

This means you can use your Tailwind knowledge while relying on Nova’s system for consistent styling.

Example: Simple Component Layout

Here’s how you might style a basic card layout using Nova’s Tailwind configuration:

                                                        
                                                        
                                                            <div class="p-6 bg-level-10 rounded-lg shadow-md">
                                                          <h2 class="text-2xl mb-2">Card Title</h2>
                                                          <p class="text-md text-medium mb-4">
                                                            This is a short description inside a card layout.
                                                          </p>
                                                          <nv-button>Click me</nv-button>
                                                        </div>
                                                        
                                                            

Everything above uses Nova’s utility classes—no custom CSS is needed.