mARTket AI Back to Site
Official Brand Guidelines

mARTket
Brand System

Version 1.0 — April 2026 · For internal and partner use
01

Color Palette

Our palette draws from the intersection of urban art and premium craftsmanship. Cream and ink provide the canvas; terracotta, gold, sage, and stone add warmth, depth, and texture.

Primary Colors

Cream
--cream
#f5f0e8
RGB: 245, 240, 232
Ink
--ink
#0a0a0a
RGB: 10, 10, 10
Terracotta
--terracotta
#c4553a
RGB: 196, 85, 58

Secondary & Accent Colors

Terracotta Dark
--terracotta-dark
#a03d28
RGB: 160, 61, 40
Gold
--gold
#c9a96e
RGB: 201, 169, 110
Sage
--sage
#7a8b6f
RGB: 122, 139, 111
Stone
--stone
#9e958a
RGB: 158, 149, 138

Color Usage Rules

Backgrounds

Cream (#f5f0e8) is the primary background for light sections. Ink (#0a0a0a) for dark, immersive sections. Never use pure white (#fff) as a page background.

Text

Ink on cream for light sections. Cream on ink for dark sections. Stone (#9e958a) for secondary text, captions, and metadata.

Accents & CTAs

Terracotta is the primary accent. Used for the "ART" in our logo, hover states, interactive highlights, section markers, and button hover fills.

Highlights

Gold for labels, badges, premium indicators, and the cursor hover ring. Use sparingly to maintain its impact.

02

Typography

Two typefaces create a clear hierarchy: Space Grotesk for bold, architectural headings; DM Sans for clean, readable body text.

Primary / Headings
Space Grotesk

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ # $ %

Secondary / Body
DM Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ # $ %

Type Scale
Where Art Meets Brand
Selected Work
Product Collaborations

We connect 300+ artists across Latin America and Europe with brands seeking authentic creative collaborations. From murals to packaging, every project starts with a conversation.

Quito · Bogota · Buenos Aires · Barcelona

Element Font Size Weight Line Height Spacing
H1 / Hero Space Grotesk clamp(3rem, 7vw, 6.5rem) 700 0.95 -0.03em
H2 / Section Space Grotesk clamp(2rem, 4vw, 3.5rem) 700 1.0 -0.02em
H3 / Subsection Space Grotesk 1.4rem 600 1.1 -0.01em
Body DM Sans 1rem 400 1.6 normal
Body (large) DM Sans 1.2rem 400 1.7 normal
Navigation DM Sans 0.8rem 500 — 0.1em uppercase
Labels / Tags DM Sans 0.65–0.75rem 500–600 — 0.15–0.25em uppercase
CTA / Buttons Space Grotesk 0.9rem 600 — 0.05em uppercase
04

Visual Style

Our visual language celebrates urban art, contemporary culture, and the raw creative energy of street art — elevated to a premium context.

Murals & Street Art

Bold colors, large-scale compositions, urban textures

Studio & Process

Artists at work, materials, creative tools, hands

Product & Brand

Art-infused packaging, installations, retail spaces

Photography Direction

  • Urban environments: concrete, brick, industrial spaces
  • Natural lighting preferred; warm color temperature
  • Close-up textures: paint drips, spray layers, brush strokes
  • Wide establishing shots for murals and installations
  • Desaturate slightly; boost warmth in post

Image Treatment

  • Gradient overlays using brand palette (terracotta to ink, gold to ink)
  • Brightness reduction + saturation boost on hover
  • Bottom-to-top gradient for text legibility: rgba(10,10,10,0.9) to transparent
  • Crop to 4:5 aspect ratio for card grids
  • Never over-filter; let the art speak

Texture & Pattern

  • Subtle animated gradient backgrounds (terracotta → gold)
  • Floating circular shapes at low opacity (0.04) for depth
  • Glassmorphism: backdrop-filter: blur(20px) on overlays
  • Fine borders at low opacity for structure: rgba(0,0,0,0.06)

Color Grading

  • Warm palette: lean into copper, bronze, earth tones
  • Avoid cool blues and stark whites
  • Dark sections use true black (#0a0a0a), not gray
  • Maintain cream undertone even in neutral areas
05

Brand Voice

mARTket speaks with the confidence of a creative authority and the warmth of an artist collective. Premium but accessible. Bold but never arrogant.

01

Art as Brand Language

Every brand has a story. We believe the most powerful way to tell it is through art. Not decoration — transformation.

02

Global Creative Network

300+ artists across 2 continents. 4 cities. One vision: connecting brands with the world's most authentic creative talent.

03

Premium Craft

From concept to production. Silk-screening, embossing, finishing. We don't just design — we manufacture experiences.

04

Bold Partnership

We work with brands who dare. BRAND × ARTIST isn't a formula — it's a philosophy of creative collision.

Tone Guidelines

Attribute We Are We Are Not
Confident Direct, decisive, authoritative Arrogant, dismissive, exclusive
Creative Visionary, original, unexpected Quirky for the sake of it, chaotic
Premium Refined, considered, high-quality Pretentious, inaccessible, cold
Bold Provocative, energetic, ambitious Aggressive, reckless, loud
Example — Hero Copy
Where Art
Meets Brand
Short. Declarative. The verb "meets" implies partnership, not hierarchy.
Example — CTA
Start a Project
Action-oriented. "Start" implies beginning, not commitment. Lowers friction.
Example — Card Label
BRAND × ARTIST
The multiplication sign suggests collaboration creates something greater than the sum of parts.
06

UI Elements

Interactive components follow a consistent design language: minimal chrome, purposeful animation, and unmistakable brand personality.

Primary Button
Specs: Ink bg, cream text, Space Grotesk 600, 0.9rem uppercase.
Hover: Terracotta slides in from left via ::before. Arrow shifts +4px right.
Secondary Button
Nav CTA Button
Secondary: No background. Stone text, DM Sans 500. Hover: terracotta.
Nav CTA: Same slide-fill as primary, smaller padding (0.7rem 1.6rem).

Work Card Pattern

Product Collaborations

BRAND × ARTIST

Limited edition collection

Card Specs
Aspect ratio: 4:5
Border radius: 4px
Background: Ink base with gradient overlay
Label: Glassmorphism (backdrop-filter: blur(10px))

Hover Behavior
Image: scale(1.08) + brightness down
Content: Slides up from translateY(20px) to 0
Arrow: Fades in from top-right
Easing: cubic-bezier(0.16, 1, 0.3, 1)
Duration: 0.5s
07

Animation & Interaction

Motion is purposeful. Every animation reinforces the brand’s sense of premium craft and creative energy. Never decorative — always functional.

Signature Easing

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

Used on every interactive element. Quick launch, smooth deceleration. Feels responsive and premium — like a well-weighted door handle.

Scroll Reveal Patterns

Pattern Transform Duration Usage
Fade Up translateY(40px) → 0, opacity 0→1 0.8s Default for all content blocks
Slide Left translateX(-60px) → 0 0.8s Left-aligned content
Slide Right translateX(60px) → 0 0.8s Right-aligned content
Scale In scale(0.9) → 1 0.8s Cards, images
Stagger Same as above + delay +0.1s per item Grid items, lists

Interactive Elements

Element Effect Duration Details
Custom Cursor 8px terracotta dot + 40px ring 0.15s / 0.3s Ring expands to 60px on hover; color shifts to gold. mix-blend-mode: difference. Desktop only.
Magnetic Buttons Proximity attraction 0.3s Button translates toward cursor: translate(x*0.2, y*0.2). Resets on leave.
Parallax Shapes Mouse-follow displacement Continuous Hero background shapes move relative to mouse position. Speed = (i+1) * 15px. Desktop only.
Nav Link Underline Width 0 → 100% 0.3s 1.5px terracotta line slides from left on hover
Counter Animation Number counts up 1.5s easeOutCubic via requestAnimationFrame. Triggers on scroll visibility.
Word-by-Word Reveal Each word fades up 0.6s + 0.08s stagger Hero title. translateY(40px) → 0 per word.
Page Loader Logo fade + progress bar 1.2s fill, 1.4s total Ink background, centered logo, horizontal progress bar. Auto-removes.

Background Animations

Animation Keyframe Duration Applied To
Float 1 translate + scale cycle 20s infinite Large terracotta shape (600px)
Float 2 translate + rotate cycle 15s infinite Medium gold shape (400px)
Float 3 translate cycle 12s infinite Small sage shape (200px)
Gradient Shift background-position 0%→100% 8s infinite Hero gradient overlay
Ping Dot scale(1)→scale(2.5), opacity 1→0 2s infinite City card pulsing dots