Brand Guidelines

Visual Identity
& Design System

The definitive reference for how Green Pants Studio presents itself across digital, print, and every touchpoint in between.

v2.0March 2026Confidential

Brand Overview

Green Pants Studio is a 15-person creative and technical studio. We partner with ambitious teams to design, build, and grow what matters, with the craft and care of a partner who's truly in it with you.

Brand Philosophy

We believe the best work comes from genuine partnership, not vendor relationships. Our name reflects our ethos: be different, be yourself, do serious work without taking yourself too seriously.

Every brand decision should reinforce three ideas: precision in craft, warmth in relationships, and clarity in communication.

Brand Personality

Modern

Contemporary without being trendy

Professional

Capable and reliable

Creative

Inventive and expressive

Technical

Precise and systematic

Trustworthy

Honest and dependable

Collaborative

Partnership-first mindset

Design Principles

Clarity First

Every element has a purpose. Remove anything that doesn't serve the user or the message.

Quiet Confidence

Communicate competence without shouting. Restraint is a feature, not a limitation.

Warm Precision

Technical excellence paired with human warmth. Clean grids, generous spacing, natural tones.

Systematic Craft

Build with systems, finish with craft. Tokens and patterns scale; final polish is done by hand.

Tone of Voice

Direct and clear

Don't

Jargon-heavy or vague

Confident but humble

Don't

Arrogant or self-congratulatory

Conversational and warm

Don't

Stiff or overly formal

Specific and concrete

Don't

Generic or wishy-washy

Logo System

Our logo is the primary brand identifier. It must be used consistently and never altered, distorted, or redrawn.

Primary Logo

Light backgrounds (default)|Dark backgrounds (inverted)

Logo Mark

Use the mark when space is limited: favicons, app icons, avatars, and small-format placements.

Clear Space

Maintain clear space equal to the height of the “P” in “Pants.” No elements may intrude into this area.

Minimum Size

Below these thresholds, switch to the logo mark.

DigitalMinimum 90px wide

PrintMinimum 25mm wide

Favicon / AvatarLogo mark only

Incorrect Usage

Don't stretch

Don't rotate

Don't recolor

Don't add effects

Color System

Rooted in forest green, reflecting growth, craft, and nature. Warm and restrained, avoiding cold grays in favor of natural, earthy neutrals.

Primary

Forest

Forest Light

Forest Dark

Sage

Secondary & Accents

Sage Light

Moss

Mint

Warm

Warm Light

Neutrals

Charcoal

Graphite

Stone

Silver

Fog

Sand

Cream

Ivory

Status Colors

Success

#0A6B0E / #E2F0E3

Warning

#D4920A / #FEF5E0

Error

#CC3333 / #FDEAEA

Info

#2B7AB8 / #E5F0F8

Usage Rules

Primary CTAs and brand elements always use Forest (#004D02)
Body text uses Charcoal (#1A1A1A), secondary text uses Stone (#6B6B6B). Never pure black.
Page backgrounds alternate between White, Ivory, and Cream for visual rhythm
Green-on-white must maintain 4.5:1 contrast minimum (WCAG AA)

Typography System

DM Sans for all text. Geist Mono for numbers, labels, and code. Fluid sizing via clamp() for seamless responsiveness.

Typefaces

Primary

DM Sans

Geometric sans-serif with humanist touches. Headings, body, and UI.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Monospace

Geist Mono

Technical contexts: numbers, labels, overlines, code.

Aa Bb Cc Dd Ee Ff Gg 0123456789 !@#$%

Type Scale

DisplayThe quick brown fox jumpsclamp(3rem, 6vw, 5.5rem) / w500 / -0.03em

H1The quick brown fox jumpsclamp(2.25rem, 4vw, 3.75rem) / w500 / -0.025em

H2The quick brown fox jumpsclamp(1.875rem, 3.5vw, 3rem) / w500 / -0.02em

H3The quick brown fox jumpsclamp(1.5rem, 2.5vw, 2rem) / w500 / -0.015em

H4The quick brown fox jumpsclamp(1.25rem, 2vw, 1.5rem) / w600

Body LargeThe quick brown fox jumps18px / w400 / 1.7 leading

BodyThe quick brown fox jumps16px / w400 / 1.7 leading

Body MDThe quick brown fox jumps15px / w400 / 1.7 leading

DetailThe quick brown fox jumps13px / w400

OverlineTHE QUICK BROWN FOX11px / w500 / 0.14em tracking / mono

Font Weights

400 RegularBody text, descriptions, secondary content

500 MediumHeadings (Display–H3), navigation links, overlines

600 SemiboldH4 headings, emphasis, button labels

700 BoldSparingly, strong emphasis only

Layout & Grid

Fluid containers, 4px base unit, generous whitespace. All spacing aligns with Tailwind's default scale.

Containers

.container-widemax-width 1280px: grids, hero sections, full layouts

.container-narrowmax-width 960px: content sections, features

.container-textmax-width 720px: long-form text, legal, articles

All containers: padding-inline clamp(1.25rem, 4vw, 3rem), margin auto

Breakpoints

640px

768px

1024px

1280px

2xl

1536px

Section Spacing

.sectionclamp(5rem, 10vw, 8rem): standard section padding

.section-smclamp(3rem, 6vw, 5rem): compact sections

--spacing-blockclamp(2rem, 4vw, 3rem): internal block spacing

Spacing Scale

4px

8px

12px

16px

24px

32px

48px

64px

UI Components

Built on shadcn/ui with custom theming. Keyboard navigation, focus states, and reduced-motion preferences are built in.

Buttons

HoverBackground lightens, -translate-y-0.5 lift on CTAs, shadow increase

Focusring-3 with ring at 50% opacity, visible keyboard indicator

Disabledopacity-50, pointer-events: none

Cards

Default Card

rounded-xl, subtle border, white bg, p-6

Flat Card

No border, cream bg, no shadow. Stats and features.

Dark Card

Forest bg, white text. CTAs and emphasis.

Form Elements

Text Input

Textarea

Defaultborder-fog, rounded-lg, white bg

Focusborder-sage, ring-3 ring-sage/20

Errorborder-error, ring-3 ring-error/20

Disabledopacity-50, bg-cream, cursor-not-allowed

Badges & Navigation

DefaultSecondaryAccentOutline

Badges use rounded-full (pill shape), text-xs. Desktop nav uses text-detail with hover/active states. Mobile nav is full-screen overlay with heading-3 links.

Iconography

Outline-style SVG icons with consistent stroke weight. Light, precise, and aligned with brand restraint.

Specifications

StyleOutline only (not filled)

Stroke1.5px default, 2px for emphasis

Grid24x24 default, 16x16 small, 32x32 large

CornersRound caps & joins

ColorcurrentColor (inherits)

LibraryLucide React

Examples

Arrow

Check

External

Mail

User

Imagery & Photography

Authentic, warm, and human. Real moments, real people, real environments. Never stock photo aesthetics.

Photo Style

LightingNatural light, warm tones, soft shadows

CompositionRule of thirds, generous negative space

Color GradingSlightly warm WB, subtle desaturation

SubjectsReal team, workspaces, clients. Candid > posed.

Image Treatment

Border Radiusrounded-xl (12px) cards, rounded-2xl hero

Aspect Ratios4:3 projects, 3:4 portraits, 1:1 headshots

Hoverscale(1.02–1.03), 400–500ms, overflow hidden

PlaceholderGradient cream → sand with subtle shine

Team & Culture Photography

Headshots

Clean background (ivory or forest). Natural light. Genuine expression. Consistent framing across team.

Culture Moments

Candid shots of meetings, events, travel, and collaboration. Energy and camaraderie without staging.

Workspace

Clean setups, screens with real work, whiteboard sessions. Show craft without clutter.

Motion Guidelines

Natural and purposeful, never decorative. Every animation orients, provides feedback, or establishes hierarchy.

Principles

Subtlety over spectacle; if users notice the animation, it's too much
Ease-out-expo [0.16, 1, 0.3, 1] for entrances, natural deceleration
Stagger related elements by 100ms for reading rhythm
Disable all motion when prefers-reduced-motion is set

Animation Variants

fade-upopacity 0→1, Y +32→0 (default)

fade-inopacity 0→1 only

slide-leftopacity 0→1, X -40→0

slide-rightopacity 0→1, X +40→0

scaleopacity 0→1, scale 0.95→1

Duration Scale

Fast200ms

Hover, color transitions, toggles

Normal400ms

Menus, transforms, page transitions

Slow700ms

Scroll entrances, hero animations

Slower1000ms

Complex stagger sequences, page load

Print Design

Same visual DNA as digital. CMYK values, proper bleed, and typographic standards.

Common Formats

Business Cards3.5 x 2 inbleed 0.125 in

Letterhead8.5 x 11 inbleed 0.25 in

Flyers8.5 x 11 inbleed 0.125 in

Posters18 x 24 inbleed 0.25 in

CMYK Conversion

ForestC100 M0 Y97 K70

CharcoalC0 M0 Y0 K90

SageC56 M0 Y54 K45

IvoryC0 M0 Y1 K2

Print Rules

Always use CMYK, never RGB conversion at print time
Min font: 8pt body, 6pt fine print. 300 DPI raster minimum.
Safe area: 0.25 in from trim for all critical content

Voice & Messaging

Direct, warm, and confident. We write like a smart colleague who respects your time.

Voice Attributes

Direct

Lead with the point. Cut filler. If a sentence works without a word, remove it.

Warm

Use contractions. "We'd love to" > "We would be pleased to."

Confident

"We build" > "We strive to build." Own the expertise.

Specific

"14-person studio" > "small but mighty team."

Headline Examples

Good

“We partner with you to build what matters.”

“Full-spectrum capability. Studio-quality craft.”

“Strategy, design, and engineering, under one roof.”

Avoid

“Leveraging synergies to unlock growth potential”

“Your one-stop-shop for all things digital”

“Disrupting the industry with innovative solutions”

Writing Standards

Punctuation

Em dashes (—) for asides
Oxford comma: always
One space after periods
No exclamation marks in pro copy

Formatting

Sentence case for headings
ALL CAPS only for overlines
Bold for emphasis, not italics
Spell out 1–9, digits for 10+

Terminology

"Studio" not "agency"
"Team members" not "resources"
"Partner with" not "vendor"
"Build" not "leverage"

Accessibility

Not optional. We design for all users. Minimum target: WCAG 2.1 AA compliance.

Color Contrast

Charcoal on White

16.75:1AAA

Forest on White

9.82:1AAA

Stone on White

4.56:1AA

White on Forest

9.82:1AAA

Silver on White

2.81:1Decorative

Standards

Font size16px body min, 14px absolute min

Touch targets44x44px minimum on mobile

Focusring-3 on all interactive elements

Alt textDescriptive for meaningful, empty for decorative

HeadingsNever skip levels: H1 → H2 → H3

MotionHonor prefers-reduced-motion. No exceptions.

ColorNever convey info by color alone

Asset Organization

Consistent folder structure so every team member finds what they need.

Directory Structure

brand-assets/

logos/— SVG, PNG, EPS: primary, mark, inverted

icons/— App icons, favicons, social avatars

colors/— Swatch files (ASE, CLR, Figma)

typography/— Font files and license docs

images/— team/, culture/, projects/

social/— templates/ and exports/

presentations/— Keynote, Slides, PowerPoint

print/— business-cards/, letterhead/, templates/

videos/— intros/, thumbnails/, lower-thirds/

Conventions

Naminglowercase, hyphens, no spaces (e.g., green-pants-logo-primary.svg)

VersioningAppend version: proposal-v2.pdf

FormatsSVG logos, PNG raster, WebP web images, MP4 video

Brand Guidelines v2.0, March 2026Internal use only. hr@greenpantsstudio.com

Brand Overview

Brand Philosophy

Brand Personality

Design Principles

Clarity First

Quiet Confidence

Warm Precision

Systematic Craft

Tone of Voice

Logo System

Primary Logo

Logo Mark

Clear Space

Minimum Size

Incorrect Usage

Color System

Primary

Secondary & Accents

Neutrals

Status Colors

Usage Rules

Typography System

Typefaces

Type Scale

Font Weights

Layout & Grid

Containers

Breakpoints

Section Spacing

Spacing Scale

UI Components

Buttons

Cards

Form Elements

Badges & Navigation

Iconography

Specifications

Examples

Imagery & Photography

Photo Style

Image Treatment

Team & Culture Photography

Motion Guidelines

Principles

Animation Variants

Duration Scale

Social Media

General Rules

Print Design

Common Formats

CMYK Conversion

Print Rules

Voice & Messaging

Voice Attributes

Headline Examples

Writing Standards

Accessibility

Color Contrast

Standards

Asset Organization

Directory Structure

Conventions