Skip to content
DesignMunkDesignMunk Submit a site

Fernand

getfernand.com
Calm customer support for SaaS founders: AI on the front line.
AI Communication Nuxt Homepage Inter
Share Visit site
getfernand.com DESKTOP · 1440
Fernand

AI Breakdown

Design export

# Design brief: the Fernand 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/09160321/getfernand-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09160321/getfernand-com-featured.webp
- On DesignMunk: https://designmunk.com/fernand/

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

# Fernand: Calm Support with Paste-Into-AI Onboarding

## Overview

Fernand's UI aims for calm and focus suited to SaaS founders and small teams. The palette is restrained and light, with a single deep-navy accent for actions. Typography is modern and readable with medium line heights, and spacing trends spacious in heroes with tighter stacks for demos. Interactions are minimal and confident: straightforward buttons, soft shadows at small scales, and border-led separation elsewhere.

## Colors

- **primary (#8c8f9a):** Soft slate for secondary text, links, and subtle accents.
- **secondary (#7c7c7c):** Muted gray for tertiary copy, labels, and de-emphasis.
- **tertiary (#1a2035):** Deep navy for primary actions, headlines, and strong emphasis.
- **neutral (#ffffff):** Pure white surface for pages, cards, and secondary buttons.
- **border (#131e40):** Night indigo for hairline borders, outlines, and icon strokes.
- **brand-dreamless-sleep (#111111):** Near-black for rare high-contrast text or overlays.
- **brand-leadbelcher (#cacaca):** Soft steel for dividers, muted icons, and disabled states.
- **surface (#ffffff):** Alias of neutral; default canvas for sections and cards.
- **on-surface (#8c8f9a):** Alias of primary; preferred body/secondary text on white.

## Typography

- Family: Inter (Google). Freely available; use weights 400–700. Roles: headlines at 38/31/25/21px with relaxed line heights (1.26→1.19), body at 17px/1.65 for readability.
- Substitutes if Inter is unavailable: Roboto (Google), system UI sans stack (e.g., -apple-system, Segoe UI). Keep weights at 400 for running text, 600–700 only for strong emphasis.
- Headline usage: prefer sentence case; avoid ultra-bold—clarity over drama. Body copy should maintain 60–80ch measure where possible.

## Layout

Spacing scale is compact-to-roomy: 6, 14, 24, 32, 120. Use xl (120px) for hero top/bottom padding on large screens, 32px between major home sections, and 24px within cards. Grids are simple: two-column hero (copy + demo/supporting block), then single-column stacks with responsive two–three-up feature grids. Keep gutters at 24–32px.

## Elevation & Depth

Hierarchy is conveyed with small and medium shadows early (sm/md) and by borders and tonal contrast elsewhere. Large shadows are intentionally absent. Use border #131e40 at low opacity for separation, and rely on whitespace and typographic scale rather than heavy drop shadows to lift components.

## Shapes

Corners are consistently rounded at 8px. Buttons, cards, inputs, and pills share this radius to signal interactivity and approachability. Links remain square (0px) to read as text actions.

## Components

- Buttons
  - Primary: background #1a2035, text #ffffff, 47px tall, 13×20px padding, 8px radius. Use for the key CTA (e.g., Try for free).
  - Secondary: background #ffffff, text #1a2035, 47px tall, 13×20px padding, 8px radius. Use alongside primary for alternative intent (e.g., Book a demo).
  - Link: text #8c8f9a, radius 0px. Use for low-emphasis actions within text.
- Card: background #ffffff, text #131e40, 24px padding, 8px radius. Apply sm or md shadow as needed.

### Hero with AI-setup block
Two-column on desktop. Left: headline (38px), body (17px). Right: a copyable code/instructions card using card spec; sm shadow, on-surface text #8c8f9a, and a small copy button.

### Demo video frame with pill CTA
Large media card using md shadow; 8px radius. Overlay a pill button ("Watch a 2 minute demo") using secondary styling with an icon and subtle sm shadow.

### Channel grid
A 2–3 column grid of feature tiles (Email, Live chat widget, Knowledge base, Slack, DMs, Contact forms, Headless API). Each tile is a card: 24px padding, headline-xs (21px), body-md, and a link action.

### Team & assignment panel
Compact card showing avatars and "Assign conversation to...". Use border #131e40 for separators and 8px avatars. Actions are button-secondary.

### Rules builder
Split card with "When/Then" columns. Use headline-xs for labels, body-md for rows. Use brand-leadbelcher (#cacaca) lines to group conditions and actions.

### Smart snippets composer
Editor-like card with input, shortcut badges, and action chips. Chips are small rounded 8px with on-surface text; primary action uses button-primary.

### Support widget configurator
Right rail with toggles (On/Off) and segmented controls (Left/Right, Light/Dark). Container is a card; controls inherit 8px radius and border #131e40.

### Pricing rail
Stack of copy at body-md with a strong single line "$29/human/month". Use primary button for "Try for free" and secondary for "Book a demo".

## Do's and Don'ts

- Do use #1a2035 for primary actions and headlines; reserve #8c8f9a for secondary text and links.
- Do keep 8px corners across interactive elements; avoid mixing radii.
- Do space major sections by 32px (desktop) and heroes by 120px; don't collapse sections tighter than 24px inside cards.
- Don't introduce heavy/layered shadows; use sm/md only and prefer borders (#131e40) for separation.
- Don't add new bright accent colors; stay within the slate/navy/white palette.
- Don't exceed weight 700; most headings should remain at 400 for the calm tone.

## Agent Prompt Guide

Quick color reference
- Text: #1a2035 (strong), #8c8f9a (secondary)
- Background: #ffffff
- Border: #131e40
- Accent/Action: #1a2035

1) Build a hero with dual CTAs and an AI-setup card
- Canvas #ffffff with 120px top/bottom padding.
- Left column: Inter, headline-lg 38px/1.26 weight 400; body-md 17px/1.65 color #8c8f9a.
- CTAs: Primary button #1a2035 on #ffffff (text #ffffff), Secondary button #ffffff (text #1a2035); both 47px tall, 13×20px padding, 8px radius.
- Right column: Card #ffffff, 24px padding, 8px radius, small shadow (sm), text #131e40; include a small "Copy" link in #8c8f9a.

2) Create a 3-up feature grid (channels)
- Section padding 32px. Grid of three cards per row.
- Each card: #ffffff background, 24px padding, 8px radius, border 1px #131e40 at low opacity or sm shadow.
- Title: Inter 21px/1.19 weight 400 color #1a2035. Body: 17px/1.65 color #8c8f9a. "Learn more →" in #8c8f9a.

3) Rules builder panel (When/Then)
- Container card: #ffffff, 24px padding, 8px radius, md shadow.
- Column headings in Inter 21px, body rows 17px. Use dividers #cacaca at 1px. Primary action uses button-primary spec (#1a2035).

4) Support widget configurator
- Two-column layout: preview left, controls right (card #ffffff, 24px, 8px radius, sm shadow).
- Toggle and segmented controls use border #131e40, text #1a2035; secondary labels #8c8f9a. Keep all corners 8px.

5) Testimonial quote card
- Card #ffffff, 24px padding, 8px radius, sm shadow.
- Quote body 17px/1.65 #1a2035; attribution in #8c8f9a. Optional avatar circle 32px.

## Similar Brands

- Intercom — similar restrained palette, product-first demos; Intercom leans brighter with more gradients and heavier illustration.
- Help Scout — calm typography and clear pricing; Fernand shows more workflow UI (rules/snippets) in situ.
- Front — collaboration-forward support; Front's visuals are denser and more enterprise, while Fernand keeps the tone lighter.
- Linear — shared love of navy, sparse UI, and small shadows; Linear uses tighter spacing and bolder motion.
- Crisp — comparable widget focus; Fernand's onboarding and AI-agent copy block are more opinionated and technical.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #8c8f9a;
  --color-secondary: #7c7c7c;
  --color-tertiary: #1a2035;
  --color-neutral: #ffffff;
  --color-border: #131e40;
  --color-brand-dreamless-sleep: #111111;
  --color-brand-leadbelcher: #cacaca;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 38px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.26;
  --text-headline-md-size: 31px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.23;
  --text-headline-sm-size: 25px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 17px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.65;
  --font-inter: "Inter";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 47px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-tertiary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 47px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-border);
  --card-rounded: var(--radius-sm);
  --card-padding: 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #8c8f9a;
  --color-secondary: #7c7c7c;
  --color-tertiary: #1a2035;
  --color-neutral: #ffffff;
  --color-border: #131e40;
  --color-brand-dreamless-sleep: #111111;
  --color-brand-leadbelcher: #cacaca;
  --color-surface: #ffffff;
  --color-on-surface: #8c8f9a;
  --font-headline-lg: "Inter";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 38px;
  --text-headline-md: 31px;
  --text-headline-sm: 25px;
  --text-headline-xs: 21px;
  --text-body-md: 17px;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 120px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.561,
                    0.604
                ],
                "hex": "#8c8f9a"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.125,
                    0.208
                ],
                "hex": "#1a2035"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.075,
                    0.118,
                    0.251
                ],
                "hex": "#131e40"
            }
        },
        "brand-dreamless-sleep": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.067,
                    0.067,
                    0.067
                ],
                "hex": "#111111"
            }
        },
        "brand-leadbelcher": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.792,
                    0.792,
                    0.792
                ],
                "hex": "#cacaca"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.561,
                    0.604
                ],
                "hex": "#8c8f9a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 31,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## 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 Fernand**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork