Skip to content
DesignMunkDesignMunk Submit a site

Reflow

reflow.ai
Unlock the economics of work with real-time optimization and automation
Analytics Software Framer Homepage Inter Season Serif
Share Visit site
reflow.ai DESKTOP · 1440
Reflow

AI Breakdown

Design export

# Design brief: the Reflow 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/30104741/reflow-ai-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/30104741/reflow-ai-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/reflow/

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

# Reflow: Warm Neutral Canvas With A Decisive Serif Lead

## Overview

Reflow's UI is warm, analytical, and low-glare. It speaks to enterprise operations teams evaluating an observability/automation platform and prefers clarity over spectacle. Tone is serious but not cold: serif display headings signal authority, while compact sans-serif body copy keeps information dense yet orderly. Spacing is generous between sections and controlled within them to support data-heavy layouts.

## Page Structure

- Announcement bar: slim full-width strip above the header with a single line link.
- Global header: left-aligned wordmark, centered/left nav links, right-aligned compact demo CTA; light surface with subtle separators.
- Hero: left-stacked oversized serif headline, short supporting copy, primary CTA; airy canvas with a faint 3D grid motif and a small query bubble on the right.
- Client logo rail: a horizontal row of monochrome logos divided by fine rules.
- Testimonial spotlight: two-column layout with a portrait card and a large quote block on a darker surface plus a "Read case study" link.
- Investor + statement block: brief heading followed by a typographic interlude ("Work has changed...") set as staggered lines.
- Product value + features: a large display heading followed by a row of feature blurbs; later, a KPI grid with labeled stat cards and an "INSIGHT" callout.
- Depth section: sequential value props ("Understand unit economics...") each in its own row; followed by a long list of opportunity cards with metrics.
- Integrations/approach: short scroller/chant ("Zero friction integrations...") then a four-step strip (Measure, Optimize, Automate, Repeat).
- Trust and security: compliance badges, short copy, and paired CTAs (demo + trust center).
- Founder + team: bio with portrait and supporting paragraph.
- Careers teaser: concise copy with "View open roles."
- Testimonials wall: stacked quotes with names/titles/company links.
- FAQ: accordion/list of common questions.
- Final CTA: concise line and primary button above a dense multi-column footer with site links and legal.

## Colors

- Primary (#363532): Deep charcoal for headlines and all core text.
- Secondary (#847c76): Warm taupe accent for subdued highlights and less prominent text.
- Tertiary (#ede6da): Pale sand for section tints and subtle panels.
- Neutral (#fffbf6): Ivory base for the page background and cards.
- Border (#000000): Black for hairline rules, outlines, and data strokes.
- Surface ({colors.neutral}): Surface maps to the neutral ivory for cards and sections.
- On-surface ({colors.primary}): Default on-surface text color, ensuring high legibility on ivory surfaces.

## Typography

- Season Serif TRIAL Regular (custom): Used for all display headings at 60px, 48px, 32px, and 24px with line-heights 1.2–1.3 and tight tracking (-0.01em). Not freely hosted; if you cannot load it, substitute with Google fonts that share its high-contrast, modern serif character: Fraunces, Source Serif 4, or Cormorant.
- Inter (Google): Primary body family at 15px/1.53 for paragraphs, lists, and UI labels. Freely available; load via Google Fonts. Suitable fallbacks: system-ui, Segoe UI, Roboto.
- Weight strategy: Headlines use a mid weight (470) for crisp forms without heavy bolding; body copy runs regular to medium as needed for emphasis.

## Layout

- Spacing scale is compact-to-generous: xs 2px for hairline offsets; sm 12px for inner paddings and control gaps; md 24px for card padding and grid gutters; lg 64px for section padding; xl 100px for hero and major dividers.
- Composition favors single-column reading with frequent two-column splits for media/quotes, and rows of simple cards for features and KPIs.
- Consistent vertical rhythm: large air between major sections (lg–xl), tighter intra-section spacing (sm–md) to keep data blocks efficient.

## Elevation & Depth

- Shadows are minimal; use the sm shadow for floating elements or dark quote panels that need lift: rgba(43,43,48,0.1) 0 1px 1px, plus a subtle 1px outline.
- Most hierarchy comes from tonal shifts (ivory vs pale sand), strong type contrast, and hairline borders in black.
- Avoid heavy multi-layer shadows; depth is primarily semantic and typographic.

## Shapes

- Corner language is small and utilitarian: 4px radius on buttons and cards. This keeps components crisp on a data-first page. Circles are reserved for avatars/badges when present. Use square edges for dividers and panels unless a component explicitly calls for rounding.

## Components

- Buttons
  - Primary: 40px tall; 8px 16px padding; 4px radius; background #363532; text #fffbf6. Use for main CTAs like "Request demo."
  - Secondary: 40px tall; 8px 16px padding; 4px radius; text #363532 on neutral background; pair with a light rule or subtle outline when needed.
  - Link: text #6b655c, no radius; use for inline actions and tertiary links.
- Card: Neutral (#fffbf6) background, text #000000, 12px padding; add the sm shadow for lift where a card sits on a similarly colored surface.

### Announcement Bar
- Full-width strip above the header on a darker tone; single sentence with a trailing arrow link. Compact height and centered/left-aligned text.

### Navigation Bar
- Left wordmark, inline link list, right demo CTA. Sticky-friendly, low contrast separators, compact 64px-ish zone to conserve vertical space.

### Hero With Grid Canvas
- Left stack: headline-lg (60px Season Serif or substitute), body-md intro (15px Inter), primary button. Right side hosts a small query/answer bubble to hint at analytics. Ample xl top/bottom spacing.

### Client Logo Rail
- A row of monochrome customer logos separated by fine rules; low visual weight, generous tracking, equalized heights.

### Testimonial Spotlight
- Two-column: a portrait or product tile on the left; on the right, a dark panel quote with serif sentence case and a small supporting link. Apply sm shadow for separation.

### KPI Cards Grid
- Row of compact stat cards: small label, oversized numeral/value, optional delta/insight callout beneath. Use md gaps and 12px internal padding.

### Opportunity List
- Stacked cards summarizing workflows with priority chips (Low/Medium/High) and run metrics. Dense content with md 24px gutters, 4px radii, and clear left alignment.

### Trust & Compliance Panel
- Icons/badges (SOC2, HIPAA, GDPR) in a row, short reassurance copy, and paired CTAs: primary "Request demo" and link-style "Visit trust center."

## Do's and Don'ts

- Do pair Season Serif (or Fraunces/Source Serif 4 substitute) for headings with Inter body at 15px to preserve the brand voice.
- Do keep surfaces light (neutral/tertiary) and rely on borders and spacing before reaching for dark fills.
- Do use the 4px radius consistently on buttons and cards; reserve circular shapes only for avatars/badges.
- Don't apply heavy multi-layer shadows; if elevation is needed, use the provided sm shadow only.
- Don't introduce bright accent colors; keep accents in #847c76 and text in #363532 for consistency.
- Don't over-expand body copy blocks; prefer shorter paragraphs and grids to maintain scanability for data-heavy content.

## Agent Prompt Guide

Quick color reference — text: #363532, background: #fffbf6, border: #000000, accent: #847c76.

1) Hero (left-aligned)
- Container: background #fffbf6; padding-top/bottom 100px; max-width 1200px.
- H1: Fraunces (stand-in for Season Serif), 60px/1.2, weight 700 approximating 470, color #363532, letter-spacing -0.01em.
- Paragraph: Inter 15px/1.53, color #363532 at 88–100% opacity.
- Primary button: 40px height, padding 8px 16px, radius 4px, bg #363532, text #fffbf6.

2) Client Logo Rail
- Section background #fffbf6; 24px top/bottom padding; top and bottom 1px borders in #000000.
- Row: evenly spaced logos in grayscale; gap 24px; ensure equal logo height.

3) Three-Feature Row
- Section background #ede6da; padding 64px.
- Each card: bg #fffbf6, radius 4px, padding 12px; headline Fraunces 32px/1.3, body Inter 15px/1.53; text #363532.

4) Testimonial Spotlight
- Two-column (40/60). Left: portrait tile. Right: panel bg #363532 at 96% (or a near-black), text #fffbf6; apply sm shadow "rgba(43,43,48,0.1) 0px 1px 1px, rgba(95,99,106,0.08) 0px 0px 0px 1px"; inner padding 24px; quote set in Fraunces 32px/1.3.

5) Trust & Security Band
- Background #fffbf6; icons in a row with 24px gaps; copy in Inter 15px; primary button (as above) and link button (#6b655c) side by side with 12px gap; section padding 64px.

## Similar Brands

- Anthropic: restrained palette and serious voice; Anthropic skews darker and sparser, while Reflow is warmer and more textured.
- Retool: enterprise features presented with pragmatic components; Retool is brighter and more utilitarian, Reflow leans serif-led and narrative.
- Palantir: serif headlines over rigorous data visuals; Palantir is higher contrast and more austere.
- Notion: minimal type-first layouts; Notion's monochrome is cooler and more modular, Reflow adds warmth and richer section variety.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #363532;
  --color-secondary: #847c76;
  --color-tertiary: #ede6da;
  --color-neutral: #fffbf6;
  --color-border: #000000;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 60px;
  --text-headline-lg-weight: 470;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.01em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 470;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.01em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 470;
  --text-headline-sm-leading: 1.3;
  --text-headline-sm-tracking: -0.01em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 470;
  --text-headline-xs-leading: 1.3;
  --text-body-md-size: 15px;
  --text-body-md-weight: 470;
  --text-body-md-leading: 1.53;
  --font-season-serif-trial-regular: "Season Serif TRIAL Regular";
  --font-season-serif-trial-regular: "Season Serif-TRIAL Regular";
  --font-inter: "Inter";

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

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 64px;
  --spacing-xl: 100px;

  /* 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 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: #6b655c;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-border);
  --card-padding: 12px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #363532;
  --color-secondary: #847c76;
  --color-tertiary: #ede6da;
  --color-neutral: #fffbf6;
  --color-border: #000000;
  --color-surface: #fffbf6;
  --color-on-surface: #363532;
  --font-headline-lg: "Season Serif TRIAL Regular";
  --font-headline-md: "Season Serif-TRIAL Regular";
  --font-headline-sm: "Season Serif-TRIAL Regular";
  --font-headline-xs: "Season Serif-TRIAL Regular";
  --font-body-md: "Inter";
  --text-headline-lg: 60px;
  --text-headline-md: 48px;
  --text-headline-sm: 32px;
  --text-headline-xs: 24px;
  --text-body-md: 15px;
  --tracking-headline-lg: -0.01em;
  --tracking-headline-md: -0.01em;
  --tracking-headline-sm: -0.01em;
  --font-weight-headline-lg: 470;
  --font-weight-headline-md: 470;
  --font-weight-headline-sm: 470;
  --font-weight-headline-xs: 470;
  --font-weight-body-md: 470;
  --radius-sm: 4px;
  --spacing-xs: 2px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 64px;
  --spacing-xl: 100px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.212,
                    0.208,
                    0.196
                ],
                "hex": "#363532"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.486,
                    0.463
                ],
                "hex": "#847c76"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.929,
                    0.902,
                    0.855
                ],
                "hex": "#ede6da"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.984,
                    0.965
                ],
                "hex": "#fffbf6"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.984,
                    0.965
                ],
                "hex": "#fffbf6"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.212,
                    0.208,
                    0.196
                ],
                "hex": "#363532"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Season Serif TRIAL Regular",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 470,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Season Serif-TRIAL Regular",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 470,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Season Serif-TRIAL Regular",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 470,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Season Serif-TRIAL Regular",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 470
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 15,
                    "unit": "px"
                },
                "fontWeight": 470
            }
        }
    }
}
```

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

More like this

Browse Analytics →
capsulecrm.com
Capsule Productivity
Capsule
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite