Skip to content

DESIGN.md

Latest commit

 

History

History
263 lines (229 loc) · 8.32 KB

DESIGN.md

File metadata and controls

263 lines (229 loc) · 8.32 KB
Raw
version 1.0
name maarmapa
description Urban artist. Dark editorial aesthetic meets Wu-Tang mysticism. Cinematic, high-contrast, intentional.
colors
primary secondary accent accent_gold accent_teal accent_red neutral_dark neutral_light
#080808
#F5F5F0
#B8422E
#D4AF37
#2E8B8B
#C41E3A
#1A1C1E
#E8E8E8
typography
h1 h2 body_lg body_md label_caps serif_quote
fontFamily fontSize fontWeight lineHeight letterSpacing
Bebas Neue
3rem
700
1
0.05em
fontFamily fontSize fontWeight
Bebas Neue
2.5rem
700
fontFamily fontSize fontWeight lineHeight
Public Sans
1.125rem
400
1.6
fontFamily fontSize fontWeight lineHeight
Public Sans
1rem
400
1.6
fontFamily fontSize fontWeight letterSpacing textTransform
Space Grotesk
0.75rem
600
0.1em
uppercase
fontFamily fontSize fontWeight fontStyle lineHeight
Crimson Text
1.5rem
400
italic
1.8
rounded
none sm md lg
0px
4px
8px
12px
spacing
xs sm md lg xl 2xl
4px
8px
16px
24px
32px
48px
visual_styles
dark_editorial cinematic brutalist
description backgroundColor textColor accentColor
Deep ink, matte blacks, high-contrast. Broadsheet aesthetic. Film grain, vignette.
{colors.primary}
{colors.secondary}
{colors.accent}
description backgroundColor textColor accentColor
Wu-Tang dark anime. Katsuhiro Otomo. Cel-shading, bold ink outlines, occult energy.
{colors.primary}
{colors.accent_gold}
{colors.accent_teal}
description backgroundColor textColor accentColor
2x2 grid, bold geometry, industrial. High contrast. No curves.
{colors.primary}
{colors.secondary}
{colors.accent}
components
slide_01 slide_02 slide_03 slide_04 slide_05 slide_06 slide_07
description backgroundColor textColor typography rounded padding effect
Hero slide. Title + Ghost image. Dark atmospheric.
{colors.primary}
{colors.secondary}
{typography.h1}
{rounded.none}
{spacing.lg}
film_grain_12pct vignette
description backgroundColor textColor typography rounded padding effect
Insight slide. Key concept on white background.
{colors.secondary}
{colors.primary}
{typography.h2}
{rounded.none}
{spacing.lg}
high_contrast
description backgroundColor textColor accentColor typography effect
Data slide. Architecture + stat. Dark with accent line.
{colors.primary}
{colors.secondary}
{colors.accent}
{typography.h1}
film_grain_10pct accent_line
description backgroundColor textColor typography rounded effect
Quote slide. Serif italic quote on dark. Contemplative.
{colors.primary}
{colors.secondary}
{typography.serif_quote}
{rounded.none}
subtle_quote_mark
description backgroundColor textColor layout rounded effect
Brutalist grid. 4 key concepts. Bold white on dark.
{colors.primary}
{colors.secondary}
2x2_grid
{rounded.none}
brutalist
description backgroundColor textColor typography rounded
Provocation slide. Question on white. Engaging.
{colors.secondary}
{colors.primary}
{typography.h2}
{rounded.none}
description backgroundColor textColor accentColor effect
Conclusion slide. @maarmapa.eth + hashtags. Finale.
{colors.primary}
{colors.secondary}
{colors.accent_gold}
urban_pattern_5pct cinematic_fade

maarmapa — Design System

Overview

Urban artist. Dark editorial aesthetic meets Wu-Tang mysticism.

maarmapa creates content at the intersection of:

  • Art & Culture — Street expression, urban identity, visual rebellion
  • Technology & Blockchain — Web3, NFTs, decentralized culture
  • Marketing & Branding — Authentic storytelling, growth hacking
  • Architecture & Cities — Urban planning, spatial narratives

The design system reflects this duality: high-contrast editorial polish with dark, occult energy.

Colors

The palette is rooted in deep blacks and warm creams, with strategic accent colors.

  • Primary (#080808): Deep ink. Headlines, core text, dominant backgrounds.
  • Secondary (#F5F5F0): Warm limestone. Neutral surfaces, high-contrast text.
  • Accent (#B8422E): "Boston Clay" — the sole warm accent for CTAs and emphasis.
  • Accent Gold (#D4AF37): Heritage, luxury, Wu-Tang mysticism.
  • Accent Teal (#2E8B8B): Electric energy, technology, depth.
  • Accent Red (#C41E3A): Urgency, passion, street energy.

Usage:

  • Dark backgrounds with light text for editorial gravitas
  • White backgrounds with dark text for contrast and clarity
  • Accent colors sparingly for emphasis and emotional direction

Typography

Font Pairing:

  • Bebas Neue — Headlines, power, uppercase drama
  • Public Sans — Body copy, clarity, modern editorial
  • Space Grotesk — Labels, caps, technical precision
  • Crimson Text — Quotes, italic serif, contemplative moments

Hierarchy:

  1. H1 (3rem) — Massive headline. Bebas Neue. Page statements.
  2. H2 (2.5rem) — Section titles. Bold presence.
  3. Body Large (1.125rem) — Featured text, captions.
  4. Body Medium (1rem) — Primary copy. Long-form reading.
  5. Labels (0.75rem) — Metadata, numbers, technical info.
  6. Quotes (1.5rem) — Serif italic. Contemplative voice.

Visual Styles

Dark Editorial

The foundation. High-contrast, intentional, like a premium broadsheet.

  • Deep black backgrounds (#080808)
  • Cream text (#F5F5F0)
  • Film grain 10-12% opacity
  • Vignette edges
  • Vertical accent lines
  • No soft edges

Cinematic

Wu-Tang dark anime meets Akira. Occult energy, mysticism, power.

  • Same palette but with gold accents (#D4AF37)
  • Cel-shading aesthetic implied
  • Bold ink outlines suggested
  • Teal energy (#2E8B8B) for electric moments
  • Neon rim lights
  • Smoke and vignette

Brutalist

Industrial geometry. 2x2 grids. No curves. Pure power.

  • Dark background, bold white shapes
  • Geometric precision
  • Grid systems
  • High contrast
  • No rounded corners
  • Sequential motion rhythm

Slide Progression

The 7-slide carousel follows a narrative arc:

  1. Hero — Title + atmosphere. Set the tone.
  2. Insight — Key concept. Break the surface.
  3. Data — Facts + accent. Ground the idea.
  4. Quote — Contemplation. Depth and nuance.
  5. Grid — 4 concepts. Breadth and power.
  6. Question — Provocation. Engagement hook.
  7. Conclusion — Branding + close. Leave them thinking.

Each slide uses a different proportion of dark/light to maintain rhythm.

Video Motion

Runway videos use cinematic pacing and intentional motion:

  • Slide 1: Fade in dark atmosphere. Text slides left.
  • Slide 2: Scale, blur, sharp impact. Clean editorial.
  • Slide 3: Vertical lines animate. Numbers float upward.
  • Slide 4: Fade upward like smoke. Contemplative drift.
  • Slide 5: Grid cells flash. Sequential brutalist rhythm.
  • Slide 6: Letters scatter outward explosion. Kinetic typography.
  • Slide 7: Deep fade to black. Pulsing finale. Film noir ending.

Duration: 4 seconds per video for Instagram Reels pacing.

Brand Voice

  • Authentic — No corporate fluff. Real insights, real stakes.
  • Urban — Street culture, rebellion, authenticity.
  • Intellectual — References art, philosophy, culture.
  • Visual-first — Image before text. Show, then tell.
  • Cinematic — Film language. Moments, not slides.

Usage Guidelines

DO:

  • Use deep blacks and creams as primary palette
  • Pair Bebas Neue headlines with Public Sans body
  • Include 10-12% film grain on dark backgrounds
  • Create high-contrast layouts (dark text on light, light on dark)
  • Use accent colors strategically (not everywhere)
  • Think in 4-second video moments

DON'T:

  • Use soft edges, rounded corners on dark slides
  • Mix too many accent colors (pick one per piece)
  • Forget the vignette on atmospheric shots
  • Use light grays or medium tones (go dark or light, not in-between)
  • Ignore safe zones (120px margins for Instagram)
  • Create cluttered layouts

Version: 1.0
Last Updated: May 3, 2026
Maintained by: maarmapa design system