Brand Guidelines

NuclomBrand Identity

Official guidelines for using the Nuclom brand, including logo, colors, typography, and design language.

Logo & Icon

The Nuclom logo combines a play button icon with the wordmark. Use these assets consistently across all platforms.

Primary Logo

For use on light backgrounds

Nuclom

Primary Logo (Dark)

For use on dark backgrounds

Nuclom

App Icon

48x48px minimum for web

Apple Touch Icon

180x180px for iOS

Social Avatar

Square format for profiles

Multiple Sizes

Responsive scaling

Logo Usage

Follow these guidelines to ensure consistent brand representation.

Use the official brand gradient (#7c3aed to #9333ea)
Maintain clear space around the logo (minimum 1x icon height)
Use the play button with circular progress ring consistently
Use rounded corners (22% radius) on icon containers
Ensure sufficient contrast between logo and background

Don't

Stretch or distort the logo proportions
Change the gradient direction or colors
Add effects like shadows, outlines, or glows
Place on busy or low-contrast backgrounds
Recreate or modify the icon shape

Color Palette

Our color system is designed for accessibility and consistency across light and dark themes.

Brand Gradient

The signature Nuclom gradient used for icons and accents

CSS

background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);

Tailwind

bg-linear-to-br from-[#7c3aed] to-[#9333ea]

Primary Colors

Primary (Light)

#6633ff

hsl(250, 100%, 60%)

Light mode primary

Primary (Dark)

#7c66ff

hsl(250, 100%, 67%)

Dark mode primary

Gradient Start

#7c3aed

hsl(262, 83%, 58%)

Gradient End

#9333ea

hsl(271, 81%, 56%)

Background & Foreground

Background (Light)

#ffffff

hsl(0, 0%, 100%)

Background (Dark)

#0d0f17

hsl(222, 47%, 6%)

Foreground (Light)

#0f172a

hsl(222, 47%, 11%)

Foreground (Dark)

#f8fafc

hsl(210, 40%, 98%)

Semantic Colors

Success

#22c55e

hsl(142, 71%, 45%)

Success states, confirmations

Warning

#f59e0b

hsl(38, 92%, 50%)

Warnings, caution states

Destructive

#ef4444

hsl(0, 84%, 60%)

Errors, destructive actions

Muted

#64748b

hsl(220, 8%, 46%)

Secondary text, subtle elements

Typography

We use Inter as our primary typeface for its excellent readability and modern aesthetic.

Primary Typeface

Inter - Sans Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Font Stack:

"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Type Scale

Heading and body text sizes

H148-72px / Bold

H236-48px / Bold

H330px / Semibold

H424px / Semibold

Body16px / Regular

Small14px / Regular

Design Language

Key design principles and UI patterns that define the Nuclom visual identity.

Border Radius

Rounded corners for a modern feel

Small

4px (0.25rem)

Medium

8px (0.5rem)

Large

12px (0.75rem)

Extra Large

16px (1rem)

Shadows

Elevation and depth

Small

Subtle elevation

Medium

Cards, dropdowns

Large

Modals, popovers

Extra Large

Hero elements

Spacing

Consistent spacing scale

8px (0.5rem) - Tight

16px (1rem) - Base

24px (1.5rem) - Comfortable

32px (2rem) - Relaxed

48px (3rem) - Section

64px (4rem) - Large Section

Component Examples

Buttons

Primary actions and interactions

Voice & Tone

How we communicate as a brand - professional yet approachable.

Clear

We communicate simply and directly. No jargon, no fluff. Every word serves a purpose.

Confident

We know our product and stand behind it. We're assertive without being arrogant.

Helpful

We're here to make knowledge management easier. We anticipate needs and provide solutions.

Human

We're professional but personable. We use conversational language and avoid being robotic.