Brand Identity System

Design with intention.
Build with clarity.

A complete brand identity kit for Forma — a modern, minimal, and professional visual system built for scale across every touchpoint.

FormaBrand Name
Neo-Minimalism 2.0Design Style
DM Serif + DM SansType System
Navy · Amber · StoneColor Palette
2026Version Year

Color Palette

A refined palette built on deep navy authority, warm amber energy, and neutral stone — designed for accessibility and versatility.

Primary Colors
#1A3C5E

Navy Deep

Primary brand color. Authority, trust, depth.

#2B5F96

Navy Light

Hover states, secondary actions, links.

#EBF1F8

Navy Tint

Backgrounds, subtle highlights, cards.

Accent Colors
#C8873A

Amber Core

Accent, CTAs, highlights, warmth.

#E8A85C

Amber Light

Hover states, icon fills, decorative.

#FDF3E7

Amber Tint

Alert backgrounds, warm section fills.

Neutral Scale
#0E0E0E

Ink

Primary text, headings.

#5A5A5A

Ink 60

Body text, secondary copy.

#ADADAD

Ink 30

Placeholders, disabled states.

#F0EFED

Stone

Borders, dividers, subtle fills.

#FAFAF8

Paper

Page background, warm white.

#FFFFFF

White

Cards, modals, elevated surfaces.

Semantic Colors
#2D7A4F

Success

Confirmations, positive states.

#B8860B

Warning

Caution, pending states.

#C0392B

Error

Errors, destructive actions.

Primary Usage

Navy Deep is the dominant brand color. Use it for primary buttons, navigation, headings on light backgrounds, and key UI elements. It should appear on 60–70% of branded surfaces.

Accent Usage

Amber is the energy color — use it sparingly for CTAs, highlights, and decorative accents. It should never compete with Navy. Limit to 10–15% of any composition.

Neutral Usage

The neutral scale handles all supporting roles: body text, borders, backgrounds, and disabled states. Paper and White are the primary surface colors for all layouts.

Semantic Usage

Semantic colors are reserved exclusively for system feedback — success confirmations, warning alerts, and error states. Never use them for decorative purposes.

Type System

Two typefaces in deliberate tension — a refined serif for display and a geometric sans for body — creating warmth within structure.

Display Font — Headings & Titles
DM Serif
Display
DM Serif Display Designed by Colophon Foundry. A transitional serif with elegant contrast and refined details. Use for all H1–H3 headings, pull quotes, and display text. The italic variant adds expressive personality to key phrases.

Weights: Regular (400), Italic
Use for: Headlines, hero text, section titles, quotes
Body Font — UI & Copy
DM Sans
Clean & Clear
DM Sans A low-contrast geometric sans-serif with optical sizing support. Pairs naturally with DM Serif Display, sharing the same design DNA. Highly legible at small sizes.

Weights: Light (300), Regular (400), Medium (500), SemiBold (600)
Use for: Body copy, UI labels, captions, navigation, buttons
Type Scale
Display / H1
The Future of Work
H2
Design with Purpose
H3
Build Better Systems
H4 / Lead
A clear, confident voice that guides without overwhelming.
Body
The body text is set at 16px with generous line-height for comfortable reading across all devices and contexts.
Small / Caption
Supporting captions, metadata, and secondary information at 13px.
Label / Eyebrow
Section Label · Category Tag · Navigation Item

UI Components

The building blocks of the Forma design system — spacing, buttons, icons, and border radii that create a consistent visual language.

Buttons

Spacing Scale

4px — xs
8px — sm
16px — md
24px — lg
32px — xl
48px — 2xl
64px — 3xl
96px — section

Border Radius

4
10
20
32
4px — Inputs, tags, small chips
10px — Cards, dropdowns, tooltips
20px — Large cards, modals, panels
32px — Hero sections, feature blocks
— Pills, badges, avatar chips

Iconography — Lucide

zap
layers
target
chart
shield
globe
users
settings
mail
arrow

Lucide icon set. Stroke width: 1.5px. Size: 16–24px. Color: Navy Primary or Ink 60 for secondary.

Elevation & Shadow

Shadow SM
Cards, inputs, subtle lift
Shadow MD
Dropdowns, popovers, hover
Shadow LG
Modals, drawers, overlays

Brand Patterns

Diagonal stripe, gradient mesh, and brand gradient. Use sparingly for backgrounds and decorative sections.

Social Templates

Ready-to-use templates for every major platform — consistent brand presence across Instagram, LinkedIn, Twitter/X, and Stories.

Clarity is the
new creativity.
When design removes friction, ideas move faster. Build systems that think ahead.
FormatSquare Post
Dimensions1080 × 1080 px
Ratio1:1
PlatformInstagram Feed

Template Notes

  • Navy primary background with radial glow accents
  • DM Serif Display headline at 32px
  • Amber accent for CTA and decorative elements
  • Logo lockup top-left, CTA bottom-left
Professional Services · Strategy · Design
Where clarity
meets craft.
forma.studio
FormatProfile Banner
Dimensions1584 × 396 px
Ratio4:1
PlatformLinkedIn Profile / Page
Good design is
invisible. Great design
is unforgettable.
The best systems disappear into the background — until you notice everything works perfectly.
FormatPost Card
Dimensions1200 × 675 px
Ratio16:9
PlatformTwitter / X
F
@forma.studio
Just now
Design that
earns trust.
Every pixel is a promise. Build with intention and your audience will feel the difference.
Swipe Up to Read
Swipe up
FormatVertical Story
Dimensions1080 × 1920 px
Ratio9:16
PlatformInstagram / Facebook Stories

Tone & Personality

Forma speaks with quiet confidence — never loud, never vague. Three core voice attributes guide every word.

Precise

Every word earns its place. We say exactly what we mean — no filler, no jargon, no hedging. Clarity is a form of respect.

We build systems that scale. Not tools that complicate.

Warm

Professional doesn't mean cold. We write like a trusted advisor — knowledgeable, direct, and genuinely invested in your success.

Let's figure this out together. Here's where we'd start.

Forward

We look ahead. Our language is active, optimistic, and grounded in possibility — not in problems or limitations.

The next version of your brand starts here.

Do's & Don'ts

Protect the integrity of the Forma brand by following these core usage rules across all applications.

✓ Do
  • Use the logo on approved background colors only (white, paper, navy, ink)
  • Maintain minimum clear space around the logo at all times
  • Use DM Serif Display for all display headings and titles
  • Apply the amber accent sparingly — one focal point per composition
  • Use the full color palette as defined, with exact hex values
  • Ensure all text meets WCAG AA contrast requirements (4.5:1 minimum)
  • Scale the icon mark proportionally — never stretch or distort
  • Use Lucide icons at 1.5px stroke weight consistently
  • Apply generous white space — let the design breathe
  • Use the type scale hierarchy consistently across all materials
✗ Don't
  • Never place the logo on busy photographic backgrounds without a clear field
  • Never stretch, rotate, skew, or distort the logo or icon mark
  • Never use unauthorized typefaces — always use DM Serif + DM Sans
  • Never use the amber accent as a primary background color
  • Never add drop shadows, outlines, or effects to the logo
  • Never use low-contrast color combinations that fail accessibility
  • Never recreate the logo in a different typeface or style
  • Never use semantic colors (success/warning/error) decoratively
  • Never crowd the layout — avoid dense, cluttered compositions
  • Never mix the brand gradient with photography in the same layer