Nertia | Brand Systems Studio

Design System

A comprehensive guide to Nertia's visual language, components, and patterns.

Colors

Semantic color tokens that adapt to light and dark mode automatically.

Background

--background

Light: #ffffff

Dark: #0a0a0a

Click to copy

Foreground

--foreground

Light: #171717

Dark: #ededed

Click to copy

Muted

--muted

Light: #6b7280

Dark: #9ca3af

Click to copy

Accent

--accent

Light: #22c55e

Dark: #22c55e

Click to copy

Accent Hover

--accent-hover

Light: #16a34a

Dark: #4ade80

Click to copy

Card Background

--card-bg

Light: #f9fafb

Dark: #111111

Click to copy

Card Border

--card-border

Light: #e5e7eb

Dark: #262626

Click to copy

Accent: Green 500

The primary accent color used for CTAs, active states, and interactive elements. Hex: #22c55e

Typography

Two font families: Helvetica Neue for headings, Space Mono for body text.

Font Families

Headings

Helvetica Neue

--font-heading

Body

Space Mono

--font-body / --font-space-mono

Type Scale

Displaytext-5xl lg:text-6xl font-bold

Brand systems that move.

Heading 1text-4xl sm:text-5xl font-bold

Page Headline

Heading 2text-2xl sm:text-3xl font-bold

Section Title

Heading 3text-xl font-semibold

Subsection Title

Bodytext-base leading-relaxed

Body text for paragraphs and general content. Uses Space Mono for a technical, precise feel.

Small / Labeltext-sm text-muted

Labels and secondary text

Microtext-xs tracking-[0.2em] uppercase text-muted

Section Label

Icons

Custom icon set for consistent visual language. Click any icon to copy usage code.

Brand Inputs

Navigation

Content

Communication

Status

Usage:

import { Icon } from '@/components/design-system/IconSystem';
<Icon name="logo" className="w-6 h-6" />

Components

Reusable UI patterns used throughout the site.

Buttons

Text Link →

Primary: bg-green-500 text-white hover:bg-green-400

Secondary: border border-[var(--card-border)] hover:border-[var(--accent)]

Cards

Card Title

Card content with hover state that highlights the border in accent color.

Bordered Container

Simple bordered container without background fill.

Navigation Tabs

Alerts / Callouts

Default Alert

Standard alert with left border accent matching the foreground color.

Accent Alert

Highlighted alert using the brand accent color for important callouts.

Muted Alert

Subtle alert for secondary information or notes.

Alert without a title - just the message content.

<Alert variant="accent" title="Title">Content</Alert>

Form Elements

Text Input

Textarea

Motion System

Animation guidelines for consistent, purposeful motion across the interface.

Duration Scale

Fast

duration-150(150ms)

Micro-interactions, tooltips

Default

duration-300(300ms)

Most transitions, hovers

Slow

duration-500(500ms)

Page transitions, modals

Easing Functions

Ease Out

ease-out

Default for most interactions

Ease In Out

ease-in-out

Symmetrical animations

Linear

linear

Progress bars, loading

Interactive Demos

Hover over the elements below to see animations in action.

Border Color

Hover me

hover:border-[var(--accent)] transition-colors duration-300

Scale

Hover me

hover:scale-[1.02] transition-transform duration-300

Lift

Hover me

hover:-translate-y-1 hover:shadow-lg transition-all

Background Fill

Hover me

hover:bg-[var(--card-bg)] transition-colors

Text Color

Hover me

group-hover:text-[var(--accent)] transition-colors

Combined

Hover me

All effects combined

Button Animations

active:scale-95 transition-all duration-150 for click feedback

Loading States

animate-pulse

animate-spin

animate-bounce

Motion Guidelines

• Use motion to provide feedback
• Keep animations under 500ms
• Use ease-out for enter, ease-in for exit
• Respect reduced-motion preferences

Don't

• Animate for decoration only
• Use bouncy/elastic easings
• Delay essential interactions
• Animate large layout shifts

Tables

Table styling patterns for displaying structured data.

Basic Table

Service	Duration	Deliverables
Product Positioning	2-4 weeks	Messaging framework, value props
Brand System	4-6 weeks	Identity, tokens, guidelines
Web Development	4-8 weeks	Production site, CMS
GTM Strategy	2-3 weeks	Battlecards, one-pagers

border-b border-[var(--card-border)] for row separators

Striped Rows

Service	Duration	Deliverables
Product Positioning	2-4 weeks	Messaging framework, value props
Brand System	4-6 weeks	Identity, tokens, guidelines
Web Development	4-8 weeks	Production site, CMS
GTM Strategy	2-3 weeks	Battlecards, one-pagers

Alternating bg-[var(--card-bg)] for visual rhythm

Hover State

Service	Duration	Deliverables
Product Positioning	2-4 weeks	Messaging framework, value props
Brand System	4-6 weeks	Identity, tokens, guidelines
Web Development	4-8 weeks	Production site, CMS
GTM Strategy	2-3 weeks	Battlecards, one-pagers

hover:bg-[var(--card-bg)] transition-colors for interactive rows

Comparison Table

Feature	Nertia	Traditional Agency
Technical Positioning	✓	—
Design System	✓	✓
Production Code	✓	—
Direct Founder Access	✓	—
Scalable Pricing	✓	—

Use text-center for boolean/comparison columns

Bordered Table

Service	Duration	Deliverables
Product Positioning	2-4 weeks	Messaging framework, value props
Brand System	4-6 weeks	Identity, tokens, guidelines
Web Development	4-8 weeks	Production site, CMS
GTM Strategy	2-3 weeks	Battlecards, one-pagers

Full borders with border-r border-[var(--card-border)] on cells

Responsive Tables

Wrap tables in overflow-x-auto to enable horizontal scrolling on mobile devices. This preserves table structure while maintaining usability on smaller screens.

Data Visualization

Patterns for displaying metrics, processes, and structured information with a technical, infographic aesthetic.

Stat Cards

10+

Years Experience

40+

Projects Shipped

Active Clients

100%

Direct Access

Large accent-colored numbers with muted labels below

Numbered Section Labels

text-xs tracking-[0.2em] uppercase text-muted

Use zero-padded numbers (01, 02, 03) for section labels to create visual rhythm and hierarchy.

Process Timeline

Understand the story

Map product architecture, interview buyers, reverse-engineer competitors.

Shape the narrative

Craft positioning framework and messaging strategy.

Design the system

Build modular brand frameworks and visual languages.

Ship it

Architect and build. Website, enablement, components.

Numbered circles with content to the right, border separators

Progress Indicators

Project Progress75%

Phase Completion3 of 4

Capacity40%

Comparison Layout

Do

✓Direct, confident, no hedging
✓Technical specificity
✓Let the work speak

Don't

✗Corporate fluff
✗Vague claims
✗Overselling

Green accent border for positive, red for negative

Metric Highlight

$10M+

Revenue Generated

Across client engagements (2020-2024)

Hero-style metric for emphasis. Use sparingly.

Code Blocks

// Design tokens
:root {
  --accent: #22c55e;
  --background: #ffffff;
  --foreground: #171717;
}

Dark background with monospace font for code samples

Data Visualization Guidelines

• Use the accent color (#22c55e) for primary data points
• Keep numbers large and bold for impact
• Use muted gray for secondary labels and context
• Maintain consistent spacing with the 8px grid
• Zero-pad numbers (01, 02) for technical aesthetic

Spacing

Consistent spacing scale based on Tailwind defaults.

Section Padding

p-8 lg:p-12

32px / 48px

Card Padding

p-8 (2rem)

32px

Component Gap

gap-6

24px

Text Gap

space-y-4

16px

Inline Gap

gap-2

8px

Visual Scale

2px

4px

6px

8px

12px

16px

24px

32px

48px

Logo

Logo variants for different contexts and backgrounds.

Hero Logo
/logo-hero.svg

Light Logo (dark bg)
/logo-light.svg

Dark Logo (light bg)
/logo-dark.svg

Wordmark
/wordmark-[light|dark].svg

Clear Space

Maintain minimum clear space around the logo equal to the height of the "n" in the wordmark. This ensures the logo remains legible and impactful across all applications.

Grid System

12-column grid with 3/9 split for content sections.

12-Column Grid

grid grid-cols-12

Section Layout (3/9 Split)

Sidebar
col-span-3

Content Area
col-span-9

Primary layout pattern used for all content sections. Sidebar contains section labels and navigation; content area contains the main content.

Voice & Tone

Writing guidelines for consistent communication.

Do

• Direct, confident, no hedging
• Builder-focused: emphasize what was shipped
• Technical specificity: "Grafana-style dashboard"
• First person where appropriate
• Let the work speak for itself

Don't

• Corporate fluff: "leverage," "synergy"
• Vague claims: "cutting-edge solutions"
• Passive voice when active works
• Overselling or exaggerating
• Jargon without substance

Example

Before

"Leveraging cutting-edge technologies to deliver world-class solutions that drive synergistic outcomes."

After

"Built production-ready dashboard components. Shipped as embeddable HTML."

Design System

Colors

Accent: Green 500

Typography

Font Families

Type Scale

Icons

Brand Inputs

Navigation

Content

Communication

Status

Components

Buttons

Cards

Card Title

Bordered Container

Tags

Navigation Tabs

Alerts / Callouts

Form Elements

Motion System

Duration Scale

Easing Functions

Interactive Demos

Button Animations

Loading States

Motion Guidelines

Tables

Basic Table

Striped Rows

Hover State

Comparison Table

Bordered Table

Responsive Tables

Data Visualization

Stat Cards

Numbered Section Labels

Process Timeline

Understand the story

Shape the narrative

Design the system

Ship it

Progress Indicators

Comparison Layout

Do

Don't

Metric Highlight

Code Blocks

Data Visualization Guidelines

Spacing

Visual Scale

Logo

Clear Space

Grid System

12-Column Grid

Section Layout (3/9 Split)

Voice & Tone

Do

Don't

Example