Brand Assets | Tatsumaki Ramen & Lounge

Brand Kit

Our brand reflects our commitment to authentic tradition and modern elegance. This guide provides the tools to maintain Tatsumaki's visual identity across all platforms.

Logomark

The Tatsumaki logo is the primary identifier of our brand. It should always be used with sufficient clear space and contrast.

On Dark

Vector (SVG)

On Light

Vector (SVG)

Typography

Our typefaces are chosen to balance readability with high-impact personality.

Display Font

Knewave

Display 2XL

Brand Identity

Display LG

Authentic Ramen

龍

Accent Font

Yappa Fude

あ

Stylized Text

竜巻ラーメン

Usage

Used sparingly for Japanese translations and decorative elements to emphasize authenticity.

Body Font

Figtree

Ramen is a Japanese noodle soup. It consists of Chinese-style wheat noodles served in a meat or fish-based broth, often flavored with soy sauce or miso, and uses toppings such as sliced pork, nori, menma, and scallions.

BoldSemiboldMediumRegular

Body Medium

The quick brown fox jumps over the lazy dog.

Body Small

The quick brown fox jumps over the lazy dog.

Color Palette

Our colors are inspired by the rich tones of ramen broth, fresh ingredients, and modern interior design.

Brand Colors

Neutral Colors

Texture & Mood

The "Tatsumaki Vibe" is created through specific texture overlays and lighting effects.

Film Grain / Noise

A subtle noise overlay (3% opacity) is applied globally to create a matte, film-like finish that softens the stark digital blacks.

Neon Glows

Deep red glows and borders are used to evoke a nightlife atmosphere, reminiscent of neon signs and city lights.

UI Elements

Our interface components are designed to be tactile, identifiable, and accessible.

Dietary Indicators

VGFS

Compact, color-coded badges used to quickly identify Vegetarian (Green), Gluten-Free (Orange), and Spicy (Red) items.

Glassmorphic Interactions

Hover Interaction

Interactive elements feature a subtle lighten effect and enhanced glow on hover, inviting user engagement.

Electric Highlighting

Premium Nightlife

Dynamic turbulent displacement border

The ElectricBorder component uses SVG filters (turbulent displacement) to create a "live" energetic border. This is reserved for premium features, high-impact CTA sections, or special announcements.

High ImpactSVG Filter