postnext.io website design: fonts, colors and UI patterns

Overview

PostNext presents a contemporary SaaS aesthetic built for social media creators and marketers. The visual system balances professional credibility with approachable personality through a distinctive typographic pairing: clean geometric sans-serifs for structure and readability, complemented by handwritten script faces for category labels and playful accents. The interface rests on a light gray canvas that keeps attention on content, while purple-blue gradient buttons provide clear action hierarchy. Cards serve as the primary content container, appearing with subtle borders and generous rounded corners that soften the technical nature of a scheduling platform. The overall density is moderate—content breathes with ample section spacing, yet information remains scannable through consistent typographic rhythm and clear visual grouping.

Colors

The palette centers on a near-black ink family against warm light grays, with a vibrant purple-blue gradient as the singular action color. Green appears sparingly as a positive accent for savings indicators and toggle states.

The system operates in a light mode exclusively across visible surfaces. The purple gradient serves as the only chromatic action element, creating strong contrast against the neutral canvas. Green accents function as semantic highlights for pricing incentives rather than interactive elements. Photography and platform icons introduce their own color, but the UI itself maintains disciplined restraint.

Typography

PostNext employs a multi-family approach that mixes Swiss-influenced geometric sans-serifs with expressive handwritten scripts. Roboto and Inter handle display and structural text, while Akkurat Std carries body content. Caveat and Covered By Your Grace provide personality for labels and decorative accents.

Gt America is designed by Noël Leu and published by Grilli Type GmbH. Noto Sans is designed by the Monotype Design Team and published by Monotype Imaging Inc. Roboto credits include Google and Christian Robertson. Verify licensing for these families before production use.

Layout

The layout follows a centered single-column pattern for marketing content, with maximum content widths that create comfortable reading measure. Sections stack vertically with generous breathing room, typically 5rem to 6rem between major content blocks. The navigation bar spans full width with internal horizontal padding, floating above the hero with a subtle shadow that separates it from the canvas.

Content alignment is predominantly center-justified for headlines and descriptive text, creating a calm, symmetrical presentation. Cards and grids introduce left-aligned text within their containers while maintaining overall centering of the card groups themselves. The platform grid in particular demonstrates this: six equal cards arranged horizontally with centered icons and labels, the group centered on the page.

Spacing follows a 2px base unit system, with practical values clustering around 16px for internal padding, 32px for card gaps, and 80px for section margins. Card padding varies by component role: feature cards use asymmetric padding with more left indent (28px left, 14px elsewhere), while pricing cards receive generous uniform padding of 36px to 56px horizontal and 64px bottom.

The pricing page introduces a three-column layout at desktop widths, with the center column elevated through a thicker border and "POPULAR" ribbon. This is the most complex layout visible, with cards of equal height and internal feature lists that align across tiers.

Visual language

The visual personality balances SaaS professionalism with creator-friendly warmth. The handwritten script elements—Caveat for functional labels, Covered By Your Grace for decorative plan names—prevent the interface from feeling sterile without undermining credibility. These scripts appear in purple to maintain color discipline, never competing with the black structural typography.

Cards are the fundamental surface unit, appearing with 12px to 16px border radius and subtle 1px borders in light gray. Elevation is minimal: a soft shadow appears on the navigation bar and occasional featured elements, but most cards rely on border definition rather than depth. The platform cards in particular are remarkably flat—white rectangles with rounded corners, no border visible, separated by gutter spacing alone.

Iconography is functional and platform-native: social media logos appear in their brand colors within neutral cards, while UI icons use simple line style. The checkmark in feature lists uses a green circle with white check, providing the only color in otherwise monochrome lists.

The gradient CTA buttons are the most visually energetic elements, shifting from bright purple (#5D5FEF) to deeper indigo (#4338CA) at 135 degrees. These appear with fully rounded pill shapes, creating a button family distinct from the squarer cards. A small arrow icon consistently accompanies button text, reinforcing forward motion.

Components

Navigation bar

Anatomy: Logo mark and wordmark left, horizontal link list center-right, two action buttons far right.

Surface: White background with subtle shadow (rgba(0, 0, 0, 0.1) 0px 4px 6px -1px), full width with internal horizontal padding.

Typography: Links use {typography.navigation} in near-black; active or emphasized states may use {colors.action}.

Shape: Bar height accommodates generous vertical padding; buttons use 8px radius for secondary actions, 999px pill for primary.

Composition: Flex row with space-between alignment; links spaced with 20px gaps.

Hero section

Anatomy: Script accent label, large display headline, descriptive paragraph, primary CTA button, social proof row with avatar stack and rating text, product preview card.

Surface: Light gray canvas background; preview card is white with rounded corners and subtle shadow.

Typography: Label uses {typography.script-accent} in purple; headline uses {typography.hero-display}; body uses {typography.body} at 18px with muted ink color.

Shape: Preview card uses 16px radius; CTA button is full pill.

Spacing: Generous vertical padding between elements; avatar stack overlaps horizontally with small negative margins.

Feature cards

Anatomy: Icon or emoji prefix, bold title, descriptive paragraph.

Surface: White background with 1px border in {colors.border-subtle}; 12px border radius.

Typography: Title uses {typography.label}; body uses {typography.body} in muted ink.

Spacing: Asymmetric padding with 28px left, 14px top/right, 0px bottom; internal gap of approximately 12px between title and body.

Variants: Active or highlighted cards may receive purple left border (4px) or full purple border for featured state.

Platform grid cards

Anatomy: Platform icon centered above platform name.

Surface: White background, 12px radius, no visible border; separated by gutter spacing.

Typography: Platform name uses {typography.body} centered, weight 600.

Composition: Six cards in horizontal row at desktop; equal width with consistent internal padding of 24px.

Pricing cards

Anatomy: Plan name with script accent, price figure with period suffix, description, feature list with checkmarks, savings badge, CTA button.

Surface: White background, 16px radius, 1px border; featured variant uses 4px purple border and "POPULAR" ribbon.

Typography: Plan name combines {typography.label} for "PostNext" with {typography.script-display} for tier name; price uses {typography.price}; features use {typography.body} at 16px weight 500.

Shape: CTA buttons are full pill with gradient background; savings badges are pill-shaped with green background.

Spacing: Generous internal padding (36px-56px horizontal, 64px bottom); feature list items separated by 4px negative margin overlap technique or tight vertical spacing.

Toggle switch

Anatomy: Two-option segmented control with active indicator.

Surface: Active option uses {colors.accent-green} background; inactive uses white with border.

Typography: Label text uses {typography.body} weight 500.

Shape: Full pill radius (100px); compact padding of 8px vertical, 12px horizontal per option.

Primary action button

Anatomy: Text with right arrow icon.

Surface: Purple gradient background ({components.primary-action.background}); white text.

Typography: {typography.button}.

Shape: Full pill (999px radius); generous horizontal padding of 50px.

States: Standard and hover inferred from gradient richness; no disabled state visible.

Responsive behavior

The visible desktop layouts suggest a single breakpoint strategy for smaller viewports. The platform grid of six cards should collapse to three-across on tablets and two-across or stacked on mobile. Pricing cards, currently three-across, would stack vertically with the featured card maintaining center position.

Typography scales down proportionally: hero display at 54px desktop may reduce to 40px on tablet and 32px on mobile. Section display at 48px follows similar reduction. Body text remains at 16px across breakpoints for readability.

Navigation collapses to a hamburger menu on mobile, with the full link list hidden behind a toggle. The two action buttons may reduce to a single primary CTA or icon-only variant.

Card padding reduces by approximately 30% on mobile: pricing card padding from 56px horizontal to 24px, feature card left indent from 28px to 16px.

Practical implementation guidance

### Preserve - The distinctive script-and-sans typographic pairing; it defines brand personality - Purple gradient buttons as the sole chromatic action element - Generous section spacing (80px+) that lets content breathe - Asymmetric feature card padding with left indent - Green savings accents limited to pricing incentives and positive indicators - Platform icon cards with their clean, borderless white treatment

### Avoid - Adding additional accent colors beyond the purple-green pairing - Making script fonts smaller than 16px; they lose legibility and character - Using the gradient on non-interactive elements; it dilutes action hierarchy - Borders heavier than 1px except for featured pricing card emphasis - Center-aligned body text beyond headlines and short descriptions

### Recommended build order 1. Establish the 2px base unit and spacing scale 2. Implement typography with all five families and their roles 3. Build the navigation bar with shadow and button variants 4. Create the hero section with script label, display headline, and gradient CTA 5. Develop card components: feature, platform, and pricing variants 6. Implement the pricing page with three-column layout and toggle 7. Add responsive collapse behavior for grids and navigation

### Accessibility - Ensure gradient buttons maintain 4.5:1 contrast ratio; the purple-to-indigo shift may require testing at lighter stops - Script fonts should never carry critical information alone; always provide plain-text equivalent - Platform icons require text labels for screen reader context - Pricing toggle needs clear focus states and keyboard operability - Card borders at 1px in #E5E7EB may be too subtle for low-vision users; consider 1.5px minimum or additional shadow

Scope note

This guide covers the marketing homepage and pricing page surfaces visible in the supplied images. Dashboard interfaces, mobile navigation patterns, form validation states, loading skeletons, and dark mode are not represented. Measurements are practical adaptation targets derived from the documented pixel values. Motion, micro-interactions, and hover states require additional research beyond static view.

Related design patterns

• AI enabled
• Generative AI
• Accent color
• Primary text color
• Secondary text color
• Moderate density
• Technology and software
• Software SaaS

More website design guides

Browse website design guides by pattern and website.