Transactional

Brand Guidelines

Design system and brand assets for Transactional

Mark
Icon-only usage
Wordmark
Text-only usage
ransactional
Full Logo
Mark + Wordmark
Transactional
Transactional
Transactional

Colors

Our color palette uses emerald as the primary brand color with a zinc-based neutral scale.

Primary

Main brand color (Emerald)

--primary

Light: 158 64% 42%

Dark: 160 84% 39%

Background

Page background

--background

Light: 0 0% 100%

Dark: 240 10% 3.9%

Foreground

Primary text color

--foreground

Light: 240 10% 3.9%

Dark: 0 0% 98%

Muted

Subtle backgrounds

--muted

Light: 240 4.8% 95.9%

Dark: 240 3.7% 15.9%

Muted Foreground

Secondary text

--muted-foreground

Light: 240 3.8% 46.1%

Dark: 240 5% 64.9%

Border

Borders and dividers

--border

Light: 240 5.9% 90%

Dark: 240 3.7% 15.9%

Destructive

Error states

--destructive

Light: 0 84.2% 60.2%

Dark: 0 62.8% 30.6%

Success

Success states

--success

Light: 142.1 76.2% 36.3%

Dark: 142.1 70.6% 45.3%

Warning

Warning states

--warning

Light: 38 92% 50%

Dark: 38 92% 50%

Semantic Usage

Default
Secondary
Outline
Destructive
Success
Warning

Typography

Inter for UI text and JetBrains Mono for code. Clean, readable, and modern.

Inter
Primary sans-serif font for UI

Aa Bb Cc

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

JetBrains Mono
Monospace font for code

Aa Bb Cc

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Type Scale

text-5xlHeading 1
text-4xlHeading 2
text-3xlHeading 3
text-2xlHeading 4
text-xlHeading 5
text-lgLarge Text
text-baseBody Text
text-smSmall Text
text-xsExtra Small

Components

Interactive UI components built with Radix UI primitives.

Buttons

Form Controls

Cards

Card Title
Card description goes here.

Card content with some text.

With Icon

Cards can include icons and other elements.

Tabs

Content for Tab 1

Accordion

Avatars

CNJDAB

Table

NameStatusEmailAmount
John Doe
Active
john@example.com$250.00
Jane Smith
Pending
jane@example.com$150.00
Bob Wilson
Inactive
bob@example.com$350.00

Tooltips

Modals & Dialogs

Alerts

Toast Notifications

Banners

Icons

We use Lucide React for our icon library. Here are commonly used icons.

View all icons at lucide.dev/icons

Spacing

Consistent spacing scale based on Tailwind CSS defaults.

00px
0.52px
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px

Design Principles

Core principles guiding our design decisions.

Sharp & Modern

Zero border radius for a bold, technical aesthetic. Clean lines and precise edges.

Accessible

Built on Radix UI primitives for proper ARIA support, keyboard navigation, and screen reader compatibility.

Consistent

Unified design tokens ensure visual consistency across all components and pages.