CURATED · OPEN · FREE

Firstandforemost

A branding agency website that balances massive, impactful typography with warm, earthy tones and organic illustrations.

EditorialBold TypographyCleanCalmRefined

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://firstandforemost.co

📦 Browse pack contents →

Identity DNA

BoldEarthyResponsibleCollectiveBranding

A modern editorial layout for a design agency that values impact and nature.

Color

#FF4501Ink

#FFF7F1BG

rgba(255,69,1,1.0)Line

A restrained, high-contrast palette using a single vibrant orange as the primary foreground color over a warm, soft off-white background, creating a natural and impactful look.

Typography

humanist-sans

display200px · 900
heading80px · 700
title36px · 400
body16px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding (160px) separates major sections, with tight internal spacing.

Surfaces

sm · 0px

md · 8px

lg · 80px

pill · 999px

1px solid rgba(255,69,1,1.0) for outlines and separators.

rgba(153, 18, 2, 0.36) -32px 32px 80px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column layout with a sticky header and full-width hero.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

opacity transitions (1s) · transform (0.5s ease-in-out)

Cursor changes to pointer on interactive elements; subtle opacity transitions. · Standard pointer interaction.

Components

button Simple text links with hover effects, no solid background buttons visible.
card No distinct cards visible; content is presented in open layouts.
chip No chips visible.
input No inputs visible.
hero Massive, oversized typography spanning the full viewport width, accompanied by an orange botanical illustration at the bottom.

Voice & Don'ts

Tone Direct, professional, and mission-driven.
Headlines Massive, bold, and declarative.
CTAs Minimal and understated, using simple text links.

Don't use multiple competing colors — the palette is strictly orange and off-white.
Don't use thin, delicate typography — the design relies on heavy, bold weights.
Don't use standard grid layouts for everything — the hero breaks the grid with massive type.
Don't use dark backgrounds — the site is strictly light with warm tones.
Don't use complex, busy UI components — the design is minimal and open.
Don't use small, cramped spacing — the layout uses generous whitespace and padding.
Avoid: Corporate jargon
Avoid: Aggressive sales language
Avoid: Dark mode

Inside the pack — real screenshots

Firstandforemost — 桌面首屏（hero） — 桌面首屏（hero）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This website is for a branding agency called First and Foremost. It features a warm, off-white background (#FFF7F1) and a single, dominant vibrant orange (#FF4501) for all text and illustrations. The typography is a humanist sans-serif used at a massive scale, with the hero text reaching 200px. The layout is minimal and editorial, with generous padding between sections and a full-width hero. Key critical don'ts include: never use dark backgrounds, never use multiple competing colors, and never use thin, delicate typography. The overall feel is earthy, bold, and responsible.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko