Skip to content
DesignMunkDesignMunk Submit a site

Strata

strata.ws
The all-in-one real-time platform for your knowledge archive
Productivity Software Homepage Montreal
Share Visit site
strata.ws DESKTOP · 1440
Strata

AI Breakdown

Design export

# Design brief: the Strata 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/09170944/strata-ws-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09170944/strata-ws-featured.webp
- On DesignMunk: https://designmunk.com/strata/

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

# Strata: Canvas-First Layout With Orchid Accents And Soft Cards

## Overview

Strata presents a canvas-first product for teams and individuals. The tone is technical yet approachable: deep grape text on white, with orchid accents sparingly used for emphasis. Layouts are spacious at the top, denser around product previews. Interactions should feel modular and tactile—like arranging objects on a desk—without excessive ornament.

## Page Structure

- Top Navigation: compact horizontal bar; left-aligned product links and version; right-aligned Sign In link plus a small pill CTA.
- Hero: oversized centered headline over a short paragraph; a small row of capability badges sits beneath.
- Feature Chips Row: icon-plus-label chips in a single horizontal line ("Modular Drag," "Recursive Spaces," "Block System").
- Canvas Preview Board: large white board card spanning most of the width; left column lists inputs with avatars and audio rows; center shows abstract thumbnails with caption; right side features a floating asset bundle card overlaying the board.
- "Shape your spaces with applets": compact explanatory block leading the transition to audience content; persona tags appear inline.
- Designed For Split: two-column section—Individuals and Teams—each with short copy and supporting audience lists.
- Packs Row: a horizontal run of Pack cards (Office, Education, Creative) with folder/artwork, short metadata lines, and item counts.
- Footer: playful microcopy line followed by a dense utility strip—copyright, build number, domain, terms, privacy, cookies, and contact.

## Colors

- Primary (#2a1232): Deep grape ink for headlines and core text.
- Secondary (#948494): Muted mauve for secondary text and metadata.
- Tertiary (#8921b0): Vivid orchid accent for highlights, icons, and action text.
- Neutral (#ffffff): Paper white background and surfaces.
- brand-jam-session (#d3ced5): Lavender mist for subtle dividers, strokes, and UI chrome.
- Surface (#ffffff): Surface color alias; use for cards and boards.
- On-surface (#2a1232): Text and icon color on white surfaces.

## Typography

- Montreal (custom/self-hosted): Single family across display and body. Used at 700 for headlines (headline-lg 32px, headline-md 24px, headline-sm 20px, headline-xs 18px) and 400 for body (body-md 16px). Not freely loadable via Google Fonts. Suitable substitutes: Inter, Manrope, or Work Sans.
- Roboto (Google): Available to load and may be used as a pragmatic fallback for long-form body or micro-UI if Montreal isn't available. Pair at 400/500 for body and 700 for headings when needed.

## Layout

- Spacing scale is asymmetric and compact at the low end: 6, 14, 24, 36, 48px. Use xs/sm for chip paddings and control gaps; md for intra-card gutters; lg/xl for section spacing and hero breathing room.
- Sections are largely single-column with occasional two-column splits; the canvas preview occupies a wide content container with comfortable outer margins.
- Content blocks favor centered alignment in the hero, then left-aligned grids in functional areas.

## Elevation & Depth

- Depth is subtle and layer-based. Cards use the md shadow stack for lift; interactive chips rely on a 1px ring or soft border rather than heavy blur.
- sm shadow functions as a white hairline ring; use for focus or light separation on white.
- Larger shadow tiers are disabled; hierarchy is carried by spacing, tone, and borders (brand-jam-session) rather than dramatic elevation.

## Shapes

- Two radii define the language: sm 8.3px for interactive controls (buttons, chips) and md 12px for containers (cards, board surfaces, overlays).
- Avoid fully rounded pills; square-ish rectangles with softened corners keep the interface technical and modular.

## Components

Buttons
- Primary Button: background #f8e8ff, text #8921b0, 8.3px radius, 6px × 16px padding, 24px height. Use for the main CTA within content.
- Secondary Button: identical styling to primary; reserve for secondary actions near the primary to maintain consistency.
- Link Button: text-only with #2a1232 and no radius; use inline or as tertiary actions.

Card
- Background #ffffff, text #2a1232, 12px radius, padding 10px 12px 8px. Apply md shadow for lift and use #d3ced5 borders where needed.

### Top Navigation Bar
- Single-line bar with left nav items and version text; right side holds a text link and one standout CTA. Outer spacing uses sm; link color #2a1232.

### Hero Headline Block
- Centered stack: headline (Montreal 700), short body (Montreal 400), then a small capability row. Max-width constrained; xl spacing above/below.

### Feature Chips Row
- A row of small chips (8.3px radius) with icon + label; text #2a1232, subtle border #d3ced5, background #ffffff. Use xs internal padding and sm gaps.

### Canvas Preview Board
- Wide 12px-radius card with md shadow. Inside: a narrow left rail for inputs and audio rows, media grid in the center, and a floating mini-window overlaying the right edge.

### Floating Bundle Card
- Compact 12px-radius overlay card listing file items. Use the md shadow to read above the board; borders #d3ced5; body text #948494.

### Designed-For Split
- Two equal columns, left for Individuals, right for Teams. Headings in #2a1232, supporting lists in #948494. md gaps between columns.

### Packs Cards Row
- A row of 12px-radius cards (Office, Education, Creative). Each shows an icon or preview, a short descriptor line, and an item count. Background #ffffff; borders #d3ced5; use md vertical and sm internal spacing.

### Site Footer
- Two stacked lines: a playful one-liner, then a dense utility strip. Text #948494; links #2a1232; tight xs/sm spacing.

## Do's and Don'ts

- Do keep text #2a1232 on white and reserve #8921b0 for true accents and actions.
- Do use 12px radius and the md shadow for primary containers; use 8.3px radius for interactive chips and buttons.
- Do keep feature chips monochrome with subtle #d3ced5 borders; avoid filled pills that compete with content.
- Don't introduce additional accent colors; stick to orchid (#8921b0) and the lavender neutrals.
- Don't overuse elevation—lg/xl shadows are off; rely on spacing and borders for hierarchy.
- Don't mix rounded scales on the same element (e.g., 8.3px corners on a card).

## Agent Prompt Guide

Quick color reference — Text: #2a1232; Background: #ffffff; Border: #d3ced5; Accent: #8921b0.

1) Build a centered hero
- Container: max-width 880px, margin auto, padding-top/bottom 48px (#ffffff background).
- Headline: font-family "Montreal", Inter, Roboto, sans-serif; weight 700; size 32px; line-height 1.19; color #2a1232; center.
- Body: font-family "Montreal", Inter, Roboto, sans-serif; weight 400; size 16px; color #948494; margin-top 14px; center.
- Add a small row of feature badges below with 8.3px radius, 1px border #d3ced5, xs (6px) vertical padding and 14px horizontal gaps.

2) Create a feature chips row
- Horizontal stack centered, gap 14px.
- Each chip: background #ffffff; border 1px solid #d3ced5; radius 8.3px; padding 6px 16px; label color #2a1232; secondary text #948494.

3) Canvas preview card with overlay
- Main card: background #ffffff; radius 12px; padding 24px; text #2a1232; apply the md shadow value exactly as measured.
- Inside layout: three columns—narrow left rail, flexible center, and space for a right-edge overlay. Use 24px internal gutters.
- Overlay card: background #ffffff; radius 12px; border 1px solid #d3ced5; body text #948494; md shadow.

4) Packs card row (3-up)
- Grid: responsive row of three cards with 24px gaps.
- Each card: background #ffffff; radius 12px; padding 10px 12px 8px; border 1px solid #d3ced5; title color #2a1232; metadata #948494; accent highlights #8921b0 where needed.

5) Buttons
- Primary/Secondary: background #f8e8ff; text #8921b0; radius 8.3px; height 24px; padding 6px 16px; no additional shadows. Link button: text #2a1232; underline on hover; radius 0.

## Similar Brands

- Notion — similarly calm, document-first layout with restrained color; Strata uses more accent orchid and soft multi-layer shadows.
- Coda — modular docs and packs; Strata leans harder into a canvas metaphor and floating overlays.
- Anytype — spatial knowledge management; Strata's cards are lighter with clearer borders.
- Muse — canvas and boards aesthetic; Strata is more web-centric with nav and chips rather than gesture-heavy UI.
- Craft — clean white surfaces and rounded modules; Strata's typography is bolder and accents skew orchid rather than blue.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #2a1232;
  --color-secondary: #948494;
  --color-tertiary: #8921b0;
  --color-neutral: #ffffff;
  --color-brand-jam-session: #d3ced5;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 32px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.19;
  --text-headline-md-size: 24px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --font-montreal: "Montreal";

  /* Rounded */
  --radius-sm: 8.3px;
  --radius-md: 12px;

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

  /* Components */
  --button-primary-background-color: #f8e8ff;
  --button-primary-text-color: var(--color-tertiary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 6px 16px;
  --button-primary-height: 24px;
  --button-secondary-background-color: #f8e8ff;
  --button-secondary-text-color: var(--color-tertiary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 6px 16px;
  --button-secondary-height: 24px;
  --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: 10px 12px 8px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #2a1232;
  --color-secondary: #948494;
  --color-tertiary: #8921b0;
  --color-neutral: #ffffff;
  --color-brand-jam-session: #d3ced5;
  --color-surface: #ffffff;
  --color-on-surface: #2a1232;
  --font-headline-lg: "Montreal";
  --font-headline-md: "Montreal";
  --font-headline-sm: "Montreal";
  --font-headline-xs: "Montreal";
  --font-body-md: "Montreal";
  --text-headline-lg: 32px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8.3px;
  --radius-md: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 48px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.165,
                    0.071,
                    0.196
                ],
                "hex": "#2a1232"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.58,
                    0.518,
                    0.58
                ],
                "hex": "#948494"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.537,
                    0.129,
                    0.69
                ],
                "hex": "#8921b0"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-jam-session": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.827,
                    0.808,
                    0.835
                ],
                "hex": "#d3ced5"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.165,
                    0.071,
                    0.196
                ],
                "hex": "#2a1232"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8.3,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Montreal",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Montreal",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Montreal",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Montreal",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Montreal",
                "fontSize": {
                    "value": 16,
                    "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 Strata**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Productivity →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery