GOAT Finance
Brand documentation.

GOAT Finance is not a consumer brand. It is an institutional counterparty — a regulated group that moves money and crypto at scale for corporations, funds, family offices, and high-net-worth individuals.

The brand's central idea is regulation as moat. Where most crypto-fiat operators treat compliance as a cost to minimize, GOAT Finance positions it as the primary differentiator: four licensed entities across three continents, each independently capable of settling fiat and crypto on their own rails.

The brand persona is closest to a private bank that also operates a trading desk. Not a startup. Not a protocol. Not a consumer wallet. The visual language borrows from the editorial precision of Swiss banking design, the typographic boldness of financial journalism, and the technical legibility of market data interfaces.

GOAT carries two meanings that work simultaneously. The colloquial acronym — Greatest Of All Time — signals confidence without braggadocio: the kind a seasoned trader uses, not a meme coin. But the goat is also a mountain animal: sure-footed, built for difficult terrain, navigating heights that would stop others.

That second reading is the one the brand leans into. Finance follows without abbreviation. Not "Fin". Not "Fi". The full word, unashamed. It signals seriousness; it signals that the company is not embarrassed to be in the business of moving money.

In written text, the brand name is always set as GOAT Finance — all-caps GOAT, sentence-case Finance. The wordmark version uses slightly different proportions. In running copy, treat it like a proper noun: capitalize both words, never lowercase.

The wordmark is letters only — deliberately. There is no goat silhouette, no mountain glyph, no abstract icon. The decision came from the same logic that governs the best private banks and law firms: when the institution is the brand, the name is sufficient.

The wordmark has three components working together:

• GOAT — set in Fraunces, the optical-size display serif, at weight 500. The letterforms carry warmth and editorial authority without the coldness of a pure grotesque.
• · — a single gold dot. The separator is deliberate punctuation. It creates a breath between the company name and its category descriptor, and it introduces the brand's signature gold into the most reduced possible form.
• FINANCE — set in Geist Mono, uppercase, tracked wide. The contrast between a humanist serif and a technical monospace is the brand's typographic signature in miniature.

The palette is built around a near-black ink and warm bone — two neutrals with enough warmth to feel human, not clinical. The single accent is warm gold, used sparingly. Two semantic colors complete the system: signal green for live/positive states, alert red-orange for negative.

Color philosophy

Gold is used at high contrast against ink backgrounds for maximum impact. It should never be used as a background fill for large areas — its role is as an accent, a separator, a call-to-action, or a status indicator. Overuse of gold dilutes its authority.

Signal green and alert orange are semantic only — they carry live data meaning (up/down, active/inactive). They should not appear in decorative contexts.

Light mode

The brand operates primarily in dark mode, but supports a full light theme. In light mode, the palette inverts: ink becomes paper-white, bone becomes near-black, and gold adjusts to a slightly deeper value (#9A7B33) to maintain sufficient contrast on white.

Usage rules

• Never place gold text on bone — contrast is insufficient.
• Text on any dark surface must use --bone (primary) or --text-dim (secondary). Never pure white (#FFFFFF).
• Opacity-based text colors (--text-dim, --text-faint) preserve warmth across different backgrounds — prefer them over separate hex values.

Three typefaces, each with a distinct role. The system works because of contrast: a humanist serif for emotion, a geometric sans for clarity, a monospace for data.

Type scale

GOAT Finance speaks to professionals who have seen every pitch deck, every whitepaper, every "disruptive" crypto startup claim. They are bored of breathlessness. The brand voice is the opposite of hype.

Words we use

Words we avoid

Motion at GOAT Finance is purposeful and slow. The brand does not jump or bounce. It slides, fades, and eases — always with the custom cubic-bezier that feels like a heavy door swinging on perfect hinges.

Duration guidelines

• Micro (80–150ms): Hover states, color changes, small icon transforms.
• Short (200–300ms): Dropdown openings, card reveals, nav transitions.
• Medium (400–600ms): Page-level entrances, section reveals on scroll.
• Long (1000–1400ms): Counter animations, hero text reveal, orbit animation cycle pieces.

The orbit

The hero background features large, dim currency glyphs (€ $ £ ₿ Ξ ¥) rotating slowly around a central point. This is the brand's only purely decorative animation. It runs at 40s per revolution — slow enough to be subliminal, present enough to suggest a living, breathing market.

Every surface in the GOAT Finance UI carries a faint film grain overlay. This single detail does more for the brand feeling than almost anything else: it moves the interface away from the pure digital flatness of most fintech products and toward something that feels physical, like a high-quality printed document or a Bloomberg terminal screen.

The grain is implemented as an SVG fractal noise filter, applied via a fixed-position pseudo-element at 4% opacity with mix-blend-mode: overlay. In light mode, it switches to mix-blend-mode: multiply at 5% opacity.

Implementation

.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
      <filter id='n'>
        <feTurbulence type='fractalNoise' baseFrequency='0.9'
          numOctaves='2' stitchTiles='stitch'/>
      </filter>
      <rect width='100%' height='100%' filter='url(#n)'/>
    </svg>");
}

The visual components of the brand share a consistent vocabulary. Understanding each element's role prevents inconsistency across contexts.

Buttons

• Gold (primary): One per page section, maximum. Reserved for the most important action — "Open account", "Request onboarding". Always pill-shaped (border-radius: 999px).
• Ghost (secondary): Used alongside a gold primary, never alone as the only option. Inherits the gold border on hover to maintain the accent system.

Status indicators

The pulsing green dot is the brand's liveness signal. It means: real-time, operational, live. Never use it on a dead or static element. The gold variant means "planned / coming" — use it for future entities like KK Japan.

Section numbering

Every major section carries a two-digit index and a short label in monospace, uppercase, tracked. This editorial device — borrowed from long-form journalism and annual reports — gives the page structure and helps users orient within a long scroll. The gold underline on the separator (border-bottom: 1px solid --gold-soft) reinforces the accent system.

The gold dot separator

A recurring micro-element: a 3–4px gold circle used to separate pieces of text in horizontal runs (nav eyebrows, CTA meta, status bars). It replaces the slash or bullet with something that connects to the wordmark's central gold element.

Editorial line rule

Horizontal rules use var(--line) (8% white opacity on dark) — never a solid color, never pure white. The rule should be barely visible, a structural signal rather than a decorative element.

All brand values are expressed as CSS custom properties in styles/tokens.css. Never hardcode hex values, font stacks, or easing curves directly — always reference the token.

/* Color */
--ink:        #0A0A0B;   /* darkest surface */
--ink-2:      #0F0F11;   /* secondary surface */
--ink-3:      #151519;   /* tertiary surface */
--bone:       #F4F1EA;   /* primary text, light surface */
--gold:       #C9A961;   /* brand accent */
--gold-2:     #E6C98A;   /* gold hover */
--gold-soft:  rgba(201, 169, 97, 0.18);  /* gold at low opacity */
--signal:     #7FEBA0;   /* live / positive */
--alert:      #FF6B4A;   /* negative / warning */
--text-dim:   rgba(244, 241, 234, 0.62);
--text-faint: rgba(244, 241, 234, 0.38);

/* Typography */
--font-display: 'Fraunces', Georgia, serif;
--font-sans:    'Geist', system-ui, sans-serif;
--font-mono:    'Geist Mono', ui-monospace, monospace;

/* Motion */
--ease:        cubic-bezier(0.22, 1, 0.36, 1);
--ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Font loading

The production site loads Fraunces, Geist, and Geist Mono via next/font/google, which self-hosts the files, eliminates render-blocking and emits CSS variables (--font-fraunces, --font-geist, --font-geist-mono) consumed by the design tokens.

Stylesheet order

/* app/globals.css — imported once from app/layout.jsx */
@import 'flag-icons/css/flag-icons.min.css';
@import '../styles/tokens.css';
@import '../styles/main.css';
@import '../styles/sections.css';
@import '../styles/more.css';
@import '../styles/pages.css';
@import '../styles/brand.css';
@import '../styles/contact.css';

Always load tokens first. main.css and downstream stylesheets depend on the custom properties declared in tokens.css.

Light mode

/* Applied to <html> by the inline pre-hydration script in app/layout.jsx */
<html data-theme="light">

/* Token overrides are in tokens.css under: */
[data-theme="light"] {
  --ink:    #FAF8F3;
  --bone:   #141416;
  --gold:   #9A7B33;
  /* ... */
}

Grain application

/* Add class to <body> in app/layout.jsx */
<body className="grain">

/* The .grain::before pseudo-element handles the rest */

Flag icons (for entity chips)

/* Imported once from app/globals.css */
@import 'flag-icons/css/flag-icons.min.css';

/* Usage */
<span class="fi fi-ch"></span>  /* Switzerland */
<span class="fi fi-us"></span>  /* United States */
<span class="fi fi-lv"></span>  /* Latvia */

Contact for brand questions