Brand Guidelines

Myriade Graphic Charter

Our design system, colors, typography and UI patterns — everything you need to build consistent Myriade experiences.

Identity

Logo

Two interlocking circles — white and gold — symbolizing the union of data and intelligence. Available in two variants.

Myriade

icon.svg — Navy bg (var(--navy-bg)) + white/gold circles

Myriade

icon-white.svg — Transparent bg, white/gold circles

Logo colors

Background: var(--navy-bg)

Circle 1: #FFFFFF (stroke)

Circle 2: #FAAF03 (stroke)

Colors

Color Palette

Warm olive surfaces paired with a 4-step dark navy scale. Gold for CTAs, cyan for info/secondary. Semantic colors for success, error, warning states.

Surfaces

#FFFFFF

White

Main page background

--surface-white

#f7f7f4

Warm Page

Alternate sections

--surface-base

#F2F1ED

Warm Card

Card backgrounds, footer

--surface-soft

var(--navy-bg)

Navy

Legacy dark sections

--navy-bg

var(--navy-deep)

Navy Deep

Immersive dark gradients, topbar

--navy-deep

Dark Background Scale

#080C1A

Deepest

Page bg / footer on dark

--surface-dark-1

#0D1326

Base

Card backgrounds on dark

--surface-dark-2

#162040

Elevated

Hover states, active cards

--surface-dark-3

Accents & Semantic

#FAAF03

Gold

Primary CTA, headline accents

#F7C948

Gold Light

Small text labels, badges (AAA contrast)

#38BDF8

Cyan

Secondary accent, info, data viz

#69DB7C

Success

Trusted data, checkmarks, positive

#FF6B6B

Error

Alerts, failures, critical

#FAAF03

Warning

Caution states

#6C8EEF

Cool (AI)

AI signal markers (legacy)

Text on Light

Primary

--fg

100%

Secondary

--fg-sec

60%

Tertiary

--fg-ter

40%

Border

--fg-border

10%

Text on Dark

Primary

--dark-h1

100%

Subtitle

--dark-subtitle

90%

Body

--dark-body

55%

Muted (WCAG AA)

--dark-muted

—

Dim / decorative

--dark-dim

35%

Typography

Plus Jakarta Sans + Manrope

Plus Jakarta Sans for headings (h1, h2, h3). Manrope for body text, buttons, and labels. Weight 500–600 for headings, 400 for body, 600 for buttons and labels. Never bold (700) for display text.

The quick brown fox

jumps over the lazy dog

Section heading — 18px / 500

Body text at 16px, weight 400, with 0.005em letter-spacing and 1.5 line-height. Manrope for body creates a clean, geometric but friendly reading experience.

LABEL — 11PX / 600 / 0.08EM

mono — JetBrains Mono, 11px, weight 400

Element	Font	Size	Weight	Spacing	Line Height
H1	Plus Jakarta Sans	clamp(38px, 5vw, 60px)	500	-0.04em	1.08
H2	Plus Jakarta Sans	clamp(28px, 3.5vw, 40px)	500	-0.03em	1.12
H3	Plus Jakarta Sans	18px	500	—	—
Body	Manrope	16–17px	400	0.005em	1.5
Label	Manrope	11px	600	0.08em	uppercase
Mono	JetBrains Mono	11–12px	400	0.06em	—

Interactions

Buttons

Gold gradient primary with inner highlight. Ghost for secondary. Always pill-shaped (9999px radius).

.btn-primary — Gold gradient, dark text

.btn-secondary — Transparent, border

Same btn-primary — works on any bg

.section-dark .btn-secondary

Components

Cards & Shadows

Four card tiers with distinct purposes. Warm-tinted shadow system on light, deep shadows on dark.

Standard Card

Default card for content. Warm background, subtle border, low shadow. Lifts on hover.

.card

Signal Card

Layered dark backgrounds with glow shadows. For hero output cards, dark section content.

.card-dark

Quiet Card

Minimal card for secondary content. No shadow, subtle border. Small lift on hover.

.card-simple

Shadow Scale

Low

Default card

0 1px 3px rgba(38,37,30,0.04), 0 1px 2px rgba(38,37,30,0.03)

Mid

Card hover / elevated

0 4px 16px rgba(38,37,30,0.06), 0 1px 4px rgba(38,37,30,0.04)

High

Hero containers

0 8px 40px rgba(38,37,30,0.08), 0 2px 8px rgba(38,37,30,0.04)

Dark Glow

Cards on dark bg

0 4px 24px rgba(0,0,0,0.3), 0 0 48px rgba(245,166,35,0.06)

Shape

Radius System

Four radius tokens. Cards use 12–16px. Buttons and pills use 9999px for full rounding.

Small

12px

--radius-sm

Standard cards, inputs

Medium

12px

--radius-md

Default card radius

Large

16px

--radius-lg

Elevated cards, modals

Pill

9999px

--radius-pill

Buttons, tags, pills

Texture

Grainy Noise Overlay

Dark backgrounds use a canvas-generated noise texture for depth. 256x256 grayscale pixels, alpha 40, rendered as a repeating overlay at 70% opacity with mix-blend-mode: overlay.

Noise overlay active

Implementation

import { NoiseOverlay } from "@/components/noise-overlay";

<section style={{ background: "linear-gradient(180deg, var(--navy-bg), var(--navy-deep))" }}>
  <NoiseOverlay opacity={0.7} />   {/* recommended for hero */}
  <NoiseOverlay />                 {/* defaults to 0.35 */}
  ...
</section>

Layout

Spacing System

Tight card gaps (10px) for density. Generous section padding for rhythm.

Use	Value
Section padding	96px
Hero padding	128px top, 64px bottom
Max content width	1200px
Horizontal padding	20px
Card gap	10px
Grid gap (2-col)	64px
Card padding	20–24px
Label margin-bottom	14–16px

Motion

Animation Timing

Two motion tiers — micro for hovers, component for transforms. Subtle 2px translateY for entrances.

Micro

140ms ease-out

Buttons, borders, hover color changes

Component

220ms cubic-bezier(0.16, 1, 0.3, 1)

Card transforms, tab switches, scroll-triggered entrances

Structure

Section Backgrounds

Alternating warm and navy sections create a visual rhythm across the page.

HeroRadial gradient across dark scale + noise#0D1326

Trust Carousel#f7f7f4

Problem#f7f7f4

Benefits#f7f7f4

Testimonials#FFFFFF

Differentiators#F2F1ED

Final CTA#f7f7f4

Footer#F2F1ED

Principles

Design Rules

Surface hierarchy

Light: Warm > Warm Card > White. Dark: 4-step scale — dark-1 (deepest) → dark-4 (surface). Never use pure gray.

Dual font system

Plus Jakarta Sans for headings (h1/h2/h3). Manrope for body, buttons, labels. Weight 500–600 for headings, 400 for body, 600 for buttons/labels.

Motion discipline

Two tiers only — micro (140ms) and component (220ms). Subtle 2px translateY.

Card system

4 types with distinct purposes. Dark cards use --surface-dark-2 bg with --border-dark borders and glow shadows.

Buttons

Gold gradient primary. Ghost for secondary. Always pill-shaped (9999px).

Accent separation

Gold for CTAs and headlines. Cyan (#38BDF8) for info/secondary. Green (#69DB7C) for success. Never mix roles.

Small text contrast

Use --gold-light (#F7C948, 7.6:1 AAA) for labels/badges. Use --dark-muted (#8A90A4, 4.6:1 AA) for captions on dark.

Borders

Light: rgba(38,37,30,0.10). Dark: solid --border-dark (#1E2D55) — no more transparent white borders.

Dark textures

Dark sections use grainy noise overlay + radial gradients across the dark scale for depth.