Brand Kit | Markster

01 Logo System

The mark and the wordmark

The Markster identity is built on two elements: the M mark -- a stacked-chevron letterform -- and the wordmark. Always use approved file variants. Never recreate, distort, or recolor these elements.

Primary -- Dark Background

Primary -- Light Background

Icon Mark Variants

Green + Black

Black + White/Green

White + Black/Green

Green + White

Logo Rules

Don't

Stretch, squish, or rotate the logo

Don't

Change logo colors outside approved variants

Don't

Place on busy or low-contrast backgrounds

Don't

Add drop shadows, outlines, or effects

Do

Maintain minimum 24px clear space on all sides

02 Color Palette

Green and black. Nothing else.

The Markster palette is minimal by design. Brand green (#00FF01) is used with restraint -- it signals action, highlight, and identity. Black anchors everything else.

Primary Brand Colors

Brand Green

#00FF01

Logo mark, buttons on dark, badges, profile rings

Green UI

#00CC44

Buttons on white, links, interactive states

Green Label

#00A84D

Section eyebrows, accent text on white

Green Hover

#00B33C

Hover state for UI green buttons

Black and Dark

Black

#000000

Headings, button text on green

Near-Black

#0a0a0a

Dark sections, hero backgrounds, CTA sections

Green Tint

#f0fff2

Subtle badge backgrounds, success states

Text and Neutrals

Text Body

#4e4b66

Body paragraphs, standard prose

Text Secondary

#62668a

Supporting copy, captions

Text Muted

#8a8eb2

Placeholder text, disabled states

Border

#e7e8f1

Card borders, dividers, inputs

Backgrounds

White

#ffffff

Primary page and card backgrounds

Surface

#f8f9fc

Alternating section backgrounds

Warm Surface

#faf8f5

Testimonial sections, warm alternating

Section Background Rhythm

Hero

#0a0a0a

Features

#ffffff

Proof

#f8f9fc

How It Works

#ffffff

Testimonials

#faf8f5

CTA

#0a0a0a

03 Typography

Plus Jakarta Sans

A single typeface family. Variable weights from 300 to 800 cover every context. No mixing with other fonts.

Plus Jakarta Sans -- Primary Typeface

Aa BbCc

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 & @ # ! ? . , : ;

Aa300 Light

Aa400 Regular

Aa500 Medium

Aa600 SemiBold

Aa700 Bold

Aa800 ExtraBold

H1

52px / 800 / -0.03em

Growth system.

H2

40px / 800 / -0.025em

Installed in 14 days.

H3

28px / 700 / -0.02em

Nothing goes out without your approval.

H4

20px / 700 / -0.01em

Outbound in your voice, running from day one.

H5

16px / 600 / 0

We install the system. You run your business.

Body Large

18px / 400 / 1.65lh

Markster installs and runs a complete growth department inside your business -- handling prospect research, outreach, content, SEO, CRM, and market intelligence from day one.

Body

16px / 400 / 1.7lh

Two founders. Zero employees. 12 years of agency operations encoded into a system. The system executes with the context and judgment that took 12 years to build.

Small

14px / 400 / 1.6lh

The Growth Install is the required entry point for every DFY client. Everything produced becomes the client's property.

Section Label

11px / 700 / 0.14em / UC

How It Works

Caption

12px / 400 / 1.5lh

Client results as of Q1 2026. Confirmed via official government filings.

04 Spacing

8-point grid

All spacing values are multiples of 8. Generous spacing is the single biggest differentiator between generic and premium layouts.

4

xs

8

sm

16

md

24

lg

32

xl

48

2xl

64

3xl

96

4xl

Section Padding

Section TypeDesktopMobile

Hero120px / 140px80px / 96px

Standard96px / 96px64px / 64px

Generous120px / 120px80px / 80px

Compact48px / 48px32px / 32px

CTA (dark)80px / 80px56px / 56px

05 Components

UI building blocks

Consistent components applied across every page. Use exactly as defined -- do not invent variations.

Buttons

Button copy rule: Always specific and action-oriented. "Book a fit call" not "Get Started". "Browse case studies" not "Learn More".

Section Labels (Eyebrows)

How It WorksOn white / light backgrounds

ResultsOn dark backgrounds

Spec: 11px / weight 700 / letter-spacing 0.14em / uppercase / color: #00A84D on light, #00FF01 on dark. 16px margin before the heading.

Badges and Tags

Live AI-native Most Popular Featured Coming Soon 6.2x Year 1

Cards

Voice Extraction

We capture how you communicate in 30 minutes. Every email and post goes out in your exact voice.

Most Important

Day 1 Execution

Prospect list built, email infrastructure warmed, first sequence live. The system is operational from day one.

Pipeline Intelligence

Weekly pipeline reports delivered without asking. You see exactly what moved and what needs attention.

Shadow System

Subtle

0 1px 3px rgba(0,0,0,.04)
0 4px 12px rgba(0,0,0,.04)

Cards at rest

Medium

0 4px 12px rgba(0,0,0,.06)
0 12px 32px rgba(0,0,0,.07)

Cards on hover, featured elements

Strong

0 8px 24px rgba(0,0,0,.08)
0 24px 56px rgba(0,0,0,.10)

Modals, overlays, featured cards

Border Radius

4px

Tags

6px

Inputs

8px

Buttons

12px

Panels

16px

Cards

20px

Testimonials

100px

Badges

Testimonial

"Markster's system does market research and proposals while I sleep. My team didn't grow -- my system did."

TK

Tamas Kiss

Founder, Kontext Group -- 6.2x Year 1

06 Voice Rules

Say it plainly. Say it once.

Founder-to-founder. Plain language. No jargon. Specific over general. If a number exists, use it. If it doesn't, say nothing.

Always Say

+"Growth system" -- the approved term

+"The Growth Install" -- the mechanism name

+"6.2x Year 1" -- not "significant growth"

+"Nothing goes out without your approval"

+"In your voice" -- not "personalized"

+"AI-native managed growth department"

+"Sales and marketing system"

Never Say

-"Revenue system" -- BANNED

-"Revenue infrastructure" -- BANNED

-"Growth department" -- HR connotation

-"AI agents" -- don't lead with AI externally

-"9.2x" -- wrong number, NEVER

-"14 days" -- not proven for new clients

-Em-dashes, en-dashes, double-hyphens

Format Rules

Punctuation: No em-dashes, en-dashes, ellipsis. Hyphens only for compound adjectives (AI-native, done-for-you).

Paragraphs: One idea per paragraph. Short. No throat-clearing. Lead with the answer.

Proof: Always specific. "6.2x Year 1" not "strong results". If no number, say nothing.

07 CSS Tokens

Copy-paste reference

Drop this into any page :root block and all brand tokens are available.

/* Markster CSS Design Tokens v1.0 */
:root {

  /* -- Brand Green -- */
  --mstr-green:        #00FF01;   /* on dark bg */
  --mstr-green-ui:     #00CC44;   /* on light bg */
  --mstr-green-hover:  #00B33C;   /* hover states */
  --mstr-green-label:  #00A84D;   /* section labels */
  --mstr-green-tint:   #f0fff2;   /* subtle bg tint */

  /* -- Black -- */
  --mstr-black:        #000000;
  --mstr-near-black:   #0a0a0a;   /* dark sections */

  /* -- Text -- */
  --mstr-text:         #000000;   /* headings */
  --mstr-text-body:    #4e4b66;   /* paragraphs */
  --mstr-text-2:       #62668a;   /* secondary */
  --mstr-text-muted:   #8a8eb2;   /* placeholder */

  /* -- Backgrounds -- */
  --mstr-white:        #ffffff;
  --mstr-surface:      #f8f9fc;
  --mstr-surface-warm: #faf8f5;
  --mstr-border:       #e7e8f1;

  /* -- Shadows -- */
  --mstr-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --mstr-shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.07);
  --mstr-shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 24px 56px rgba(0,0,0,.10);

  /* -- Typography -- */
  --mstr-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* -- Border Radius -- */
  --mstr-radius-sm:   6px;    /* inputs */
  --mstr-radius:      8px;    /* buttons */
  --mstr-radius-md:   12px;   /* panels */
  --mstr-radius-lg:   16px;   /* cards */
  --mstr-radius-xl:   20px;   /* testimonials */
  --mstr-radius-pill: 100px;  /* badges */

  /* -- Container -- */
  --mstr-container: 1160px;
}