Skip to content
DesignMunkDesignMunk Submit a site

Daybridge

daybridge.com
Bring work and life together in one fast, beautiful calendar
Apps & Mobile Productivity Next.js Homepage Inter
Share Visit site
daybridge.com DESKTOP · 1440
Daybridge

AI Breakdown

Design export

# Design brief: the Daybridge 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/09161044/daybridge-com-en-gb-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09161044/daybridge-com-en-gb-featured.webp
- On DesignMunk: https://designmunk.com/daybridge/

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

# Daybridge: Pastel Event Tiles Sell a Unified Calendar

## Overview

Daybridge is friendly productivity software for people who juggle work and life across accounts. The tone is calm and considered—playful colors with serious typography. Layouts are spacious, with generous line length and breathing room around screenshots. When tokens don't specify, default to light surfaces, ink-slate text, and a single periwinkle accent used sparingly.

## Colors

- **primary (#5d6080):** Slate ink for headlines, body text, icons, and default borders.
- **secondary (#797bd7):** Periwinkle accent for CTAs, highlights, selection, and active states.
- **tertiary (#000000):** Pure black reserved for high-contrast glyphs, tiny labels, or dense data.
- **neutral (#ffffff):** Paper-white base used for pages and cards.
- **brand-pretty-posie (#bbbce4):** Soft violet wash for hero backdrops and decorative gradients.
- **surface ({colors.neutral}):** Alias of neutral; use for containers and card backgrounds.
- **on-surface ({colors.primary}):** Alias of primary; default text and icon color on light surfaces.

## Typography

The system uses InterVariable for all scales: headline-lg 52px/1.08 (500), headline-md 41px/1.2 (500), headline-sm 32px/1.0 (500), headline-xs 25px/1.2 (500), and body-md 20px/1.6 (450). InterVariable is self-hosted (type: custom), so an agent should substitute freely available sans-serifs with similar proportions: Roboto (Google) first, then Open Sans or Ubuntu. Keep letter-spacing as specified (e.g., -0.025em on headline-lg, -0.017em on headline-md) to retain the compact, confident feel. Use a single family across the page to maintain the product-like calm.

## Layout

Spacing runs on a compact-to-roomy scale: 2, 10, 20, 48, and 150px. Use md (20px) for element gaps, lg (48px) for section padding and between major blocks, and xl (150px) to bookend the hero. A 12-column grid with wide gutters matches the airy marketing layout; cards and screenshots typically span 6–12 columns with md gaps. Card padding is fixed at 28px to create consistent interiors regardless of container width.

## Elevation & Depth

Depth is mostly tonal and by outline. Shadows above sm are disabled; use the measured sm shadow as a 1px subtle ring plus a light drop for interactive surfaces. Inputs can use the provided inner shadow for inset borders. Where shadows are absent, rely on white surfaces, slate borders (primary), and generous whitespace for hierarchy.

## Shapes

Corners are rounded but not pill-like by default: sm 4px for utility controls and secondary buttons, md 9.6px for primary buttons and interactive elements, and lg 11.5px for cards and screenshots. Links are square (0px). Larger radii signal higher prominence or container status.

## Components

Buttons and cards are foundational.
- Button — Primary: textColor #5d6080, height 43px, padding 9.6px 21px, radius 9.6px. Use secondary (#797bd7) as the accent layer when a filled style is required.
- Button — Secondary: textColor #5d6080, height 43px, padding 9.6px 21px, radius 4px. Use on neutral surfaces or as outline.
- Button — Link: textColor #5d6080, radius 0px; inline CTA.
- Card: background #ffffff, text #5d6080, radius 11.5px, padding 28px; apply sm shadow for a light ring if separation is needed.

Distinctive components on this page:
### Hero calendar canvas
- Headline uses headline-lg (52px/500) in primary (#5d6080). Backdrop may apply brand-pretty-posie (#bbbce4) as a soft wash. CTA stack centers a primary button (43px) and a small meta line below.
### Platform strip ("Supports / Works with")
- Two inline icon rows with md (20px) gaps between items and lg (48px) above/below. Text set in body-md 20px/1.6. Icons in primary (#5d6080) at low opacity for calm tone.
### Areas list & Filters card
- A left-aligned list of Areas with colored indicators inside a card (28px padding, 11.5px radius). Labels in body-md. Use the inner shadow for focused inputs like "Add filter".
### Tabs bar
- Horizontal set of views (Everything, Work, etc.). Active tab can use secondary (#797bd7) as accent; container and pills use md (9.6px) radii with md gaps.
### Time-zone ruler
- Parallel timelines for cities. Labels in body-md; tick labels may use tertiary (#000000) where dense. Use lg vertical spacing and thin slate borders for lanes.
### Command Palette
- Modal card centered on the page (11.5px radius, 28px padding). Search field uses the inner inset ring; list items use md (20px) vertical rhythm.
### Pricing plan card
- One paid plan and one free plan in cards. Feature bullets in body-md; plan title in headline-xs (25px). Primary action uses the 43px button.
### FAQ accordion
- Each question is a card section with 28px vertical padding and a 1px slate divider; answers in body-md with md gaps.

## Do's and Don'ts

- Do keep body copy at body-md 20px/1.6 and headlines at the specified sizes; avoid introducing smaller caption styles.
- Do use secondary (#797bd7) sparingly for actions and active states; rely on primary (#5d6080) for text and icons.
- Do apply lg (11.5px) radius for containers and md (9.6px) for primary interactive elements to maintain hierarchy.
- Don't introduce heavy drop shadows; use the provided sm ring or inner inset only.
- Don't mix multiple accent colors inside a single component; keep accents to secondary plus neutral surfaces.
- Don't compress spacing—stick to md (20px) gaps and lg (48px) section padding for readability.

## Agent Prompt Guide

Quick color reference — text: #5d6080, background: #ffffff, border: #5d6080 (subtle), accent: #797bd7, decorative wash: #bbbce4.

1) Build the hero
- Page background #ffffff. Center a 960px container with xl (150px) top/bottom padding.
- H1: InterVariable (or Roboto) 52px, weight 500, letter-spacing -0.025em, color #5d6080.
- Subhead: 20px/1.6, weight 450, color #5d6080 at 80% opacity.
- Primary button: height 43px, padding 9.6px 21px, radius 9.6px, text color #5d6080; place md (20px) below subhead. Optional backdrop: a large block with #bbbce4 at low opacity.

2) Three feature cards
- Use a 12-col grid; each card spans 4 cols with md (20px) gaps.
- Card: background #ffffff, radius 11.5px, padding 28px, sm shadow "oklch(0.49 0.001 220 / 0.126) 0px 0px 0px 1px, oklch(0.49 0.001 220 / 0.045) 0px 1px 2px 0px, oklch(0.49 0.001 220 / 0.027) 0px 1px 1px 0px".
- Card title: 25px/1.2, weight 500, color #5d6080; body: 20px/1.6.

3) Tabs with Areas sidebar
- Left card (Areas): width 320px, card spec above; list items with md (20px) vertical gaps.
- Right content: Tabs bar using md (9.6px) radius pills and secondary #797bd7 for the active indicator; content spacing md (20px).

4) Command Palette modal
- Full-screen overlay; centered card (max-width 720px) using the card spec.
- Search input uses the inner shadow "oklch(0.49 0.1116 240 / 0.2) 0px 0px 0px 1px inset, oklch(0.9988 0 240) 0px 0px 0px 1px"; list items at 20px line-height with md (20px) gaps.

## Similar Brands

- Notion Calendar (Cron): similarly clean with strong keyboard workflows; Daybridge is warmer with pastels and larger 20px body copy.
- Fantastical: polished calendar marketing with rich features; Daybridge's layout is airier and relies less on gradients and heavy illustrations.
- Google Calendar: utilitarian grid and blue accent; Daybridge is softer, with rounded cards and a friendlier marketing tone.
- Motion: productivity scheduler with dense UI; Daybridge prioritizes calm visuals and simpler pricing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #5d6080;
  --color-secondary: #797bd7;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-brand-pretty-posie: #bbbce4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.08;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 41px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.017em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1;
  --text-headline-xs-size: 25px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 20px;
  --text-body-md-weight: 450;
  --text-body-md-leading: 1.6;
  --font-intervariable: "InterVariable";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 9.6px;
  --radius-lg: 11.5px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 48px;
  --spacing-xl: 150px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 9.6px 21px;
  --button-primary-height: 43px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 9.6px 21px;
  --button-secondary-height: 43px;
  --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-lg);
  --card-padding: 28px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #5d6080;
  --color-secondary: #797bd7;
  --color-tertiary: #000000;
  --color-neutral: #ffffff;
  --color-brand-pretty-posie: #bbbce4;
  --color-surface: #ffffff;
  --color-on-surface: #5d6080;
  --font-headline-lg: "InterVariable";
  --font-headline-md: "InterVariable";
  --font-headline-sm: "InterVariable";
  --font-headline-xs: "InterVariable";
  --font-body-md: "InterVariable";
  --text-headline-lg: 52px;
  --text-headline-md: 41px;
  --text-headline-sm: 32px;
  --text-headline-xs: 25px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-md: -0.017em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 450;
  --radius-sm: 4px;
  --radius-md: 9.6px;
  --radius-lg: 11.5px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 48px;
  --spacing-xl: 150px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.365,
                    0.376,
                    0.502
                ],
                "hex": "#5d6080"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.475,
                    0.482,
                    0.843
                ],
                "hex": "#797bd7"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-pretty-posie": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.733,
                    0.737,
                    0.894
                ],
                "hex": "#bbbce4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.365,
                    0.376,
                    0.502
                ],
                "hex": "#5d6080"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 150,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 9.6,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 11.5,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "InterVariable",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "InterVariable",
                "fontSize": {
                    "value": 41,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.017,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "InterVariable",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "InterVariable",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "InterVariable",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 450
            }
        }
    }
}
```

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

More like this

Browse Apps & Mobile →
capsulecrm.com
Capsule Productivity
Capsule
agentwork.com
Agentwork AI
Agentwork
time.fyi
Time Productivity
Time
smoothrecorder.com
Smooth Recorder Productivity
Smooth Recorder