Postforge · Design tokens

Colors and controls from the product

Same brand scale powering the landing page, /tool, and slides. Prefer semantic surfaces and text tokens over raw hex.

Logo green

brand-500

#4BB793

Mint accent

brand-100

#E3FFCC

Hero dark

brand-950

#040C0B

Brand

Figma Brand primitives + logo ocean. Tailwind: bg-brand-*, text-brand-*.

12 shades

25

50

100

200

300

400

500

600

700

800

900

950

brand-25

#F6FDEE

brand-50

#F2FCE2

brand-100

#E3FFCC

brand-200

#C5EFB0

brand-300

#9DD98A

brand-400

#73C4A2

brand-500

#4BB793

brand-600

#275144

brand-700

#1B3D36

brand-800

#122E29

brand-900

#0A1B25

brand-950

#040C0B

Grays

Figma Neutrals / Grays. Tailwind: bg-gray-*, text-gray-*.

12 shades

25

50

100

200

300

400

500

600

700

800

900

950

gray-25

#F8FAF9

gray-50

#F4F4F4

gray-100

#E6EAEA

gray-200

#D7D9D8

gray-300

#B7BDBD

gray-400

#999E9E

gray-500

#6F7575

gray-600

#525151

gray-700

#3B4140

gray-800

#232726

gray-900

#0F1816

gray-950

#040C0B

Gradients

Landing hero wash — var(--gradient-hero).

Hero

Dark marketing heroes

background: linear-gradient(180deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 70%);

Semantic aliases

Theme-aware surfaces and text used across the app.

Token	Light	Dark	Usage
--surface-primary	#F8FAF9	#040C0B	Page canvas
--surface-secondary	#F6FDEE	#0A1B25	Soft brand wash / footer light
--surface-tertiary	#F2FCE2	#091A24	Elevated mint tint
--surface-invert	#040C0B	#F8FAF9	Inverted surface
--surface-border	#999E9E	#3B4140	Default border
--surface-border-hover	#6F7575	#6F7575	Hover border
--surface-border-error	#E2280D	#E2280D	Error
--surface-border-disabled	#B7BDBD	#3B4140	Disabled
--brand-primary	#0A1B25	#E3FFCC	Primary brand / CTAs
--brand-secondary	#275144	#4BB793	Secondary brand
--brand-accent	#E3FFCC	#E3FFCC	Mint accent
--brand-accent-2	#FF6140	#FF6140	Warm accent
--brand-accent-3	#E9D3EE	#E9D3EE	Violet accent
--brand-gradient-start	#064D4C	#064D4C	Hero gradient
--brand-gradient-end	#091A24	#091A24	Hero gradient
--text-primary	#0A1B25	#F4F4F4	Body / headings
--text-secondary	#232726	#E6EAEA	Secondary copy
--text-tertiary	#525151	#999E9E	Labels / muted
--text-invert	#F4F4F4	#040C0B	Pairs with surface-invert
--text-on-brand	#F4F4F4	#F4F4F4	On brand gradient / dark nav
--text-placeholder	#6F7575	#999E9E	Inputs
--text-link	#E3FFCC	#E3FFCC	Links on dark
--text-info	#999E9E	#6F7575	Meta

Dashboard accents

sky

Active nav, LinkedIn, email links

blue

Facebook Ads chips

amber

Google Ads, Competitive Exams

violet

Email Marketing, College Admissions

rose

NEET, Content Marketing

sand

Affiliate, Startup Funding

Figma → scale

Grays/25

#F8FAF9

→ gray-25 · surface-primary

Grays/950

#040C0B

→ gray-950 · surface-invert

Brand/25

#F6FDEE

→ brand-25 · surface-secondary

Brand/Accent 1

#E3FFCC

→ brand-100 · brand-accent

Brand/Primary

#0A1B25

→ brand-900 · brand-primary

Brand/Secondary

#275144

→ brand-600

HeroUI

Controls used in /tool — buttons, fields, switches, segments, and sliders on brand tokens.

Buttons

Primary maps to logo green (brand-500) in the social / slides designers.

Switch + segment

Show logo

Fields

Slider

1.5×

Preview 1.5×

Same control pattern as social post typography

Brand components

Custom primitives from the Postforge design tokens.

Logo

Motion presets via animation.

Static

Postforgeanimation="none"

Leap — hover

Postforgeanimation="leap"

Assemble — mount

Postforgeanimation="assemble"

Wave — idle

Postforgeanimation="wave"

Glint — hover

Postforgeanimation="glint"

Mark only · leap

import { Logo } from "@/components/Logo";
// none | leap | assemble | wave | glint
<Logo height={28} animation="leap" />

MonogramCutout

top-left + bottom-right

top-right + bottom-left

HeroMonogramPattern

Outline field for dark heroes — hover to redraw.

Hover to animate

Screen-blended outline monogram

Usage

Prefer semantic tokens in product UI.

Tailwind

<div className="bg-brand-500 text-brand-950" />
<div className="border-leap-line text-text-primary" />
<div className="bg-surface-secondary" />

CSS variables

.cta {
  background: var(--brand-500);
  color: var(--brand-950);
}
.panel {
  border-color: var(--leap-line);
}

Primary CTA

brand-500 on brand-950

Soft accent

brand-100 on brand-950

Dark surface

brand-950 on brand-100