The
Nomu
brand, in one page.

Logos, colors, type, components and the assets you need to put Nomu on a page. Treat this as the source of truth. If something here disagrees with a deck, this wins.

Sizing

Logo at various sizes

The logotype is built for clarity at small sizes. Below 16px height the wordmark loses legibility. Use the logomark instead.

16px
24px
32px
48px
72px

Logomark sizes

For favicons, app icons, avatars.

16px
24px
32px
48px

Min sizes

  • Logotype: 16px height
  • Logomark: 16px square
  • Clearspace: height of the “n” on every side
Do & don’t

How to handle the mark

The logo carries the brand. These are the things that quietly break it, even when they look fine in isolation.

Use the supplied lock-ups
Keep clearspace around it
Pair with the right contrast
Don’t recolor
Don’t rotate or skew
Don’t distort the proportions
Don’t add effects or shadows
Don’t place on low contrast
Don’t outline or stroke the mark
Color

Color palette

A two-color core (foreground navy + cream) lit up by an orange accent. Use the highlight scale for surfaces and hover states; reach for secondary blue only inside specific components.

#0F151D

Foreground

--foreground

Primary text, logo, dark surfaces

#FFF9F6

Cream

--background

Page background, light surfaces

#FF7448

Primary

--primary

CTAs, active states

#FF8D69

Highlight 1

--highlight-1

Accent, hover, kickers

#FFA88D

Highlight 2

--highlight-2

Soft accent, surfaces

#FFC8B7

Highlight 3

--highlight-3

Pale accent, backgrounds

#D3E1FF

Secondary

--secondary

Hover surfaces, pills

Usage

How to use the brand

A few rules of thumb that keep everything we ship feeling like one product.

Voice

Confident, direct, no fluff

Short, punchy sentences. Action-oriented CTAs: Buy the drop, Launch yours, Get in touch. Cut anything that sounds like a press release.

Vocabulary

Frame it as rewards

Avoid “blockchain” or “crypto” in headlines and CTAs. Frame the mechanic as rewards, ownership, access. That’s the user benefit.

Surfaces

Cream first, dark with intent

Cream is the default canvas. Dark surfaces (#0F151D) and orange accent panels are reserved for moments that should anchor the eye. Not the default.

Typography

Type system

Inter for everything readable, NomNom for moments that need brand. The semantic classes below are the source of truth. Don't reach for raw text-* utilities for landing copy.

Body

Inter

The workhorse. Used for headings, body, UI. Loaded via --font-inter.

Regular 400Medium 500Semibold 600

Brand

NomNom

Custom display face. Use sparingly: hero accents, brand moments, and the wordmark only. Never body copy.

Get rewarded

Semantic scale

.landing-title-hero

Hero H1, page-opening statement

The quick brown fox jumps over the lazy dog

.landing-title-xl

Section H2

The quick brown fox jumps over the lazy dog

.landing-title-lg

Card H3

The quick brown fox jumps over the lazy dog

.landing-lead

Paragraph under a section title

The quick brown fox jumps over the lazy dog

.landing-body

Standard body copy

The quick brown fox jumps over the lazy dog

.landing-caption

Meta, stat labels

The quick brown fox jumps over the lazy dog

.landing-eyebrow

Uppercase kicker above titles

The quick brown fox

Components

UI components

The small pieces. Buttons and pills cover most surfaces. For everything else, the source of truth is shadcn/ui in /components/ui.

Buttons

Pills

Brand kitSolidSecondaryHighlight

Eyebrows

Default eyebrow

Accent eyebrow

Border radius

Radius scale

Two anchors run side by side. --radius: 3.125rem (50px) on desktop, --radius-mobile: 1.5rem (24px) on mobile so cards don’t turn into pills on a 375px viewport. Always pair them: rounded-mobile-lg md:rounded-lg.

In actual use

Card

The canonical card pair. ~60 occurrences site-wide.

rounded-mobile-lg24px
md:rounded-lg50px

Inset

Smaller surfaces inside a card. ~17 occurrences.

rounded-mobile-md22px
md:rounded-md48px

Hero

Generous radius for headline panels. ~19 occurrences.

rounded-mobile-2xl32px
md:rounded-2xl58px

Pills & buttons

rounded-full

Default for buttons, eyebrows, badges. The most-used radius on the site by a wide margin.

Don’t

  • Don’t use a desktop token without its mobile pair. A 50px radius on a 320px-wide card swallows the content.
  • Don’t reach for rounded-3xl+. Those tokens exist but barely ship; if you need that much radius you probably want rounded-full.
  • Don’t hand-roll rounded-[12px] when a token fits.
Assets

Download

SVG masters for the logotype and logomark. These are the only formats you should be sharing. Bitmaps live downstream, exported from these.

Logotype (on light)

Wordmark in foreground navy. Use on cream/light surfaces.

SVG

Logotype (on dark)

Wordmark in off-white. Use on dark or photo surfaces.

SVG

Logomark (on light)

Mark only, foreground navy. Avatars, favicons.

SVG

Logomark (on dark)

Mark only, off-white. Avatars on dark surfaces.

SVG

Need something else (PNG, EPS, lockup with tagline)? Ping tidiane@nomu.dev.