Skip to content
DesignMunkDesignMunk Submit a site

Nova Benefits Blog

novabenefits.com
Discover healthcare that employees love
Finance Health Webflow Blog Inter Recoleta
Share Visit site
novabenefits.com DESKTOP · 1440
Nova Benefits Blog

AI Breakdown

Design export

# Design brief: the Nova Benefits Blog design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/10171402/novabenefits-com-blog-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10171402/novabenefits-com-blog-featured.webp
- On DesignMunk: https://designmunk.com/nova-benefits-blog-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Nova Benefits: Calm Editorial Blog with Anchored Sidebar

## Overview

Nova Benefits presents an editorial-first layout aimed at HR leaders and benefits decision-makers. The tone is confident and calm: high legibility, generous whitespace, and minimal color, allowing vibrant article art to stand out. Density is moderate; content blocks breathe with 20–42px rhythm, and navigation remains in view for quick scanning.

## Colors

- Primary (#2e3749): Deep ink for headlines, body text, and primary links.
- Secondary (#0d3c4c): Dark teal accent for icons, highlights, or emphasis text in components.
- Neutral (#ffffff): Base surface for the page, cards, and inputs.
- Border (#e5e7eb): Subtle dividers, card outlines, rail separators, and input strokes.
- Brand-bongo-skin (#decf99): Warm supporting hue for illustrations or promotional banners.
- Brand-arona (#849ca4): Cool grey-blue for metadata, iconography, and muted states.
- Surface ({colors.neutral}): Default canvas for layouts and cards.
- On-surface ({colors.primary}): Default on-surface text and icon color.

## Typography

- Recoleta (headline-lg, 74px/1.2, 500, -0.04em): Display serif for marquee headings like All Articles. Source type is custom/self-hosted; agents should not assume availability. Close, obtainable substitutes: Fraunces, Playfair Display, or DM Serif Display.
- Inter (headline-md 50px/1.2, headline-sm 34px/1.21, headline-xs 23px/1.22, body-md 16px/1.5 at 500): Workhorse sans for section titles, card titles, metadata, and UI text. Inter is a Google font and can be loaded directly. Prefer weight 500 for body to match tokens; use 600–700 sparingly for emphasis.

## Layout

Spacing follows a 10–60px scale (10, 20, 30, 42, 60). Use 20px as the base gutter inside cards and between stacked items; 30–42px between major sections. The blog index composes as a two-column main content and a fixed-width left sidebar; on smaller breakpoints, stack with the sidebar collapsing above content. Keep card media aspect ratios consistent within each section, using the spacing tokens for internal padding.

## Elevation & Depth

Hierarchy is conveyed primarily through borders and spacing. Use shadow-sm for subtle lift on interactive tiles and shadow-md for spotlight/feature cards. Large shadows are disabled (lg/xl: none), so avoid heavy depth; prefer the Border token for delineation. Inner shadow provides a gentle 2px inset outline for focused inputs or active cards.

## Shapes

Corners are friendly and consistent: 6px (sm) for buttons and chips; 8px (md) for cards, input fields, and spotlight containers. Avoid mixed radii within a single component; radius signals interactivity and containment, not decoration.

## Components

- Button — Primary: 32px height, 8x12px padding inside, 6px radius, #2e3749 background with white text.
- Button — Secondary: 32px height, 8x12px padding, 6px radius, white background with #5d6a83 text; pair with Border token for outline if needed.
- Button — Link: Text-only control in #2e3749, radius 0; use for inline CTAs like Read More.
- Card: White surface, #2e3749 text, 8px radius, 16px padding; apply shadow-sm for hover or md for featured.

### Category Sidebar
- Vertical list of category items using 8px radius and Border (#e5e7eb). Active item uses on-surface text (#2e3749); spacing: 10–20px between items.

### Spotlight Feature
- Large article card with hero illustration, category tag, title in display style (Recoleta or Fraunces), author row. Card padding 16px, radius 8px, shadow-md.

### Trending Rail
- Compact list of 3–4 items: thumbnail, two-line title in Inter headline-xs (23px) or body-md for smaller screens, light dividers (#e5e7eb) between rows.

### Article Tiles (Grids)
- Two-up grid of article cards per category; consistent media aspect, title in Inter headline-xs, body/author in body-md. Use 20–30px gutters.

### Section Header with Read More
- Row with section label on left and a link-style or secondary button on right. Keep Read More as Button — Link with #2e3749.

### Newsletter Signup
- Title in Inter headline-sm or xs, email input with 8px radius and Border; success/error messages in body-md. Submit is Primary button at 32px height.

## Do's and Don'ts

- Do use #2e3749 for all core text and actionable links; reserve color accents for illustrations and tags.
- Do keep card padding at 16px and corners at 8px to match the rest of the library.
- Do prefer Border (#e5e7eb) and whitespace for separation; add shadow-md only to spotlight elements.
- Don't mix multiple radii inside a single module; controls stay at 6px, containers at 8px.
- Don't introduce new accent colors for UI states; use secondary (#0d3c4c) or brand-arona (#849ca4) for emphasis and metadata.
- Don't exceed Inter 500 for routine body copy; heavier weights are for short labels and headings only.

## Agent Prompt Guide

Quick color reference:
- Text: #2e3749
- Background: #ffffff
- Border: #e5e7eb
- Accent: #0d3c4c

1) Build a "Spotlight Feature" card
- Container: 100% width up to section max, background #ffffff, radius 8px, shadow md, padding 16px.
- Title: Fraunces 700 at 34px (use as Recoleta substitute), line-height 1.21, color #2e3749, letter-spacing -0.02em.
- Meta row: Inter 16px/1.5 500, color #849ca4.
- Primary CTA: 32px height button, padding 8px 12px, radius 6px, background #2e3749, text #ffffff.

2) Create a left Category Sidebar
- Stack of links in a white column; each item: background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px, text Inter 16px/1.5 500 #2e3749, gap between items 10–20px.
- Active state: text #2e3749, border 2px #0d3c4c.

3) Trending list item
- Row: thumbnail (64–80px), title to the right in Inter 23px/1.22 500 #2e3749, max two lines; row padding 20px top/bottom; divider 1px #e5e7eb below.
- Hover: apply shadow-sm and underline on title.

4) Article Tile (grid)
- Card: background #ffffff, radius 8px, padding 16px, border 1px #e5e7eb.
- Title: Inter 23px/1.22 500 #2e3749; author/meta Inter 16px/1.5 500 #849ca4.
- Grid gap: 20–30px; section margin-top: 42px.

5) Newsletter signup row
- Heading: Inter 34px/1.21 500 #2e3749.
- Input: background #ffffff, border 1px #e5e7eb, radius 8px, padding 12–16px; focus uses inner shadow (inset 2px) per token.
- Submit: Primary button (32px height, 8px 12px, radius 6px, #2e3749 on #ffffff).

## Similar Brands

- Gusto: Similar calm editorial blog with navy text and white cards; Gusto leans warmer and uses larger iconography.
- Oscar Health: Clean health-insurance editorial with light borders; Oscar uses brighter blues and heavier sans display.
- Zenefits: HR/benefits content in a restrained palette; Zenefits employs stronger shadows and more colorful badges.
- Hiver Blog: Business/ops editorial using Inter and light dividers; Hiver's cards are denser with less vertical spacing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #2e3749;
  --color-secondary: #0d3c4c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-bongo-skin: #decf99;
  --color-brand-arona: #849ca4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 74px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.04em;
  --text-headline-md-size: 50px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --font-recoleta: "Recoleta";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 6px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 42px;
  --spacing-xl: 60px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 12px;
  --button-primary-height: 32px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: #5d6a83;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 12px;
  --button-secondary-height: 32px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #2e3749;
  --color-secondary: #0d3c4c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-bongo-skin: #decf99;
  --color-brand-arona: #849ca4;
  --color-surface: #ffffff;
  --color-on-surface: #2e3749;
  --font-headline-lg: "Recoleta";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 74px;
  --text-headline-md: 50px;
  --text-headline-sm: 34px;
  --text-headline-xs: 23px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.04em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 500;
  --radius-sm: 6px;
  --radius-md: 8px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 42px;
  --spacing-xl: 60px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.18,
                    0.216,
                    0.286
                ],
                "hex": "#2e3749"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.235,
                    0.298
                ],
                "hex": "#0d3c4c"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-bongo-skin": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.871,
                    0.812,
                    0.6
                ],
                "hex": "#decf99"
            }
        },
        "brand-arona": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.612,
                    0.643
                ],
                "hex": "#849ca4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.18,
                    0.216,
                    0.286
                ],
                "hex": "#2e3749"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 30,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 42,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Recoleta",
                "fontSize": {
                    "value": 74,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.04,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Nova Benefits Blog**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Finance →
getmaple.ca
Maple Health
Maple
billow.so
Billow Finance
Billow
rekordsoftware.com
Rekord Finance
Rekord
orderx.com
OrderX AI
OrderX