Sun Yellow
#ffde3bPrimary action buttons, card highlights, decorative shapes, the signature pop — the only color with true filled-button authority
Streamtime
streamtime.netWebsite preview
The design language
Streamtime reads like a creative agency scrapbook rendered in software: a warm cream canvas (#f1e8de) holds the page together while a small arsenal of vivid accent colors — sun yellow, hot pink, lime, blue, green — explode across cards, buttons, and decorative shapes like paper cutouts. Typography does the heavy lifting: both Ease Standard and Ease Display run at a single 400 weight, so hierarchy is built through scale (12px body to 100px display) and tight negative tracking, not through bolding. The system alternates between light editorial sections and one dramatic near-black (#2f2c29) hero band, creating a print-magazine rhythm. Surfaces stay mostly flat with hairline black borders and soft warm shadows rather than elevations; the only round elements are large pill buttons (96-160px radius) that feel like sticker labels pressed onto a page.
Color palette
brand
accent
Hot Pink
#ff4dd5Decorative borders, accent shapes, image overlays — used as visual punctuation, never as fill
Lime Burst
#c1f32bDecorative strokes, border accents, secondary highlight — energetic counterweight to Sun Yellow
Periwinkle
#6483ffCard background, secondary action — the cool blue in an otherwise warm palette
Spring Green
#c6dc3cCard backgrounds, nav highlights — warmer, more muted companion to Lime Burst
Bubblegum
#ee84d5Soft pink accent for secondary nav elements and tag pills
neutral
Warm Linen
#f1e8dePrimary page canvas, soft shadow color, border tint — the warm cream that holds the whole system together
Paper White
#fbf8f5Card surfaces, elevated content blocks — barely warmer than pure white, just enough to feel like paper
Pure White
#ffffffHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Charcoal
#2f2c29Dark hero section background, high-contrast text container — not pure black, a warmer near-black
Stone
#c3b7acMuted card backgrounds, secondary surfaces, neutral button fills
Sand
#eadcceWarm neutral for soft fills, secondary card backgrounds
Ink
#000000Primary text, hairline borders, icon strokes, logo — the structural color, used at extreme scale
Fog
#999999Muted borders, secondary dividers, disabled states
Typography
Type scale
Minor Third (1.2) · 20px basedisplay
100px · 400 · 1 · -1.4px trackingThe quick brown fox jumps
heading-lg
68px · 400 · 1 · -2.31px trackingThe quick brown fox jumps
heading
30px · 400 · 1.1 · -1.02px trackingThe quick brown fox jumps
subheading
28px · 400 · 1.1 · -1.6px trackingThe quick brown fox jumps
body-lg
18px · 400 · 1.2 · -1.44px trackingThe quick brown fox jumps
body
16px · 400 · 1.2 · -1.28px trackingThe quick brown fox jumps
caption
12px · 400 · 1.2 · -0.96px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Ease Standard
- Weights
- 400
- Sizes
- 12px, 16px, 18px
- Line height
- 1.10-1.20
- Letter spacing
- -0.0600em to -0.0800em
- Fallback
- Inter, Söhne, GT America Standard
Body, nav, labels, captions, button text — the workhorse at a single 400 weight with tight negative tracking
Additional typeface
Ease Display
- Weights
- 400
- Sizes
- 16px, 28px, 30px, 68px, 100px
- Line height
- 1.00-1.20
- Letter spacing
- -0.0140em to -0.0600em
- Fallback
- Inter Display, Söhne Breit, GT America Compressed
Display headlines, hero text, section titles, decorative logo — runs at 400 weight only, so display impact comes from extreme scale (up to 100px) and tight tracking, never from bolding
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 20-30px
- Element gap
- 16-24px
Border radius
tags
5pxcards
5pxbuttons
96pxprimaryAction
160pxSpacing scale
4px5px7px8px9px12px16px20px24px28px30px32px40px48px56px61px64px79px80px89px96px120px200pxGuidelines
Do
- Use Sun Yellow (#ffde3b) as the only filled primary action button color — it carries the system's entire conversion hierarchy.
- Build all typography hierarchy through size and tracking, never through font weight — both Ease faces are 400 only.
- Apply 5px radius to all cards, tags, and rectangular elements; reserve 96-160px pill radius exclusively for buttons and nav controls.
- Let the warm linen canvas (#f1e8de) breathe — avoid adding background colors to sections that could sit on the cream.
- Use accent colors (pink, lime, periwinkle, green) as decorative borders, shape fills, and card backgrounds — never for text or primary actions.
- Place one Charcoal (#2f2c29) dark editorial section per page for rhythm, decorated with collage shapes in the full accent palette.
- Set display text at 68-100px with line-height 1.0 and letter-spacing -0.014em to -0.060em — the tight tracking is what makes the system feel editorial.
Don’t
- Do not introduce a bold or semibold weight — neither font family supports it; the system is deliberately 400-weight-only.
- Do not use Hot Pink, Lime Burst, or Periwinkle as primary CTA fills — they are decorative accents, not action colors.
- Do not add drop shadows to cards or content blocks — the system uses tonal surface steps and warm-tinted shadows only, on nav and floating panels.
- Do not use pure white (#ffffff) for card surfaces on the warm canvas — use Paper White (#fbf8f5) to maintain the paper-like tonal progression.
- Do not apply large border-radius to cards or images — 5px is the structural radius; pill shapes are button-exclusive.
- Do not stack multiple dark sections consecutively — one Charcoal section per page, surrounded by warm light sections.
- Do not use blue/cool tones for body text or large surfaces — the palette is warm-first, with periwinkle as a single cool accent only.
Components
Primary CTA Pill (Book a demo)
Main conversion actionSun Yellow (#ffde3b) fill, black text in Ease Standard 16px/400, fully rounded at 160px radius, approximately 16px 24px padding. This is the system's only high-confidence filled action — it glows against the warm linen canvas.
Ghost Pill Button (Log in, Sign up)
Secondary navigation actionsPure White (#ffffff) fill, 1px black border, black Ease Standard text 16px/400, 96px radius, approximately 8px 20px padding. Sits beside the yellow CTA as a quiet alternative.
Menu Button
Primary navigation triggerBlack (#000000) fill, white text 'Menu' in Ease Standard, 5px radius (not pill — the only squared nav element), with a yellow circular logo badge to the left.
Article Card
Content card in editorial gridsColored fill background (lime #c1f32b, yellow #ffde3b, periwinkle #6483ff, or sand #eadcce), image with 5px radius border, 20-30px internal padding, black Ease Standard body text at 16-18px below. No shadow, no border — the color IS the container.
White Content Card
Elevated content on warm canvasPaper White (#fbf8f5) or Pure White fill, 5px radius, 20-30px padding, no visible border. Distinguished from the cream canvas by tonal step, not by outline.
Dark Editorial Section
Alternating dark content bandCharcoal (#2f2c29) background, white Ease Standard body text at 16-18px with tight tracking, decorative collage elements (circles, triangles, textured paper shapes) in the full accent palette scattered as atmosphere. This is the system's only dark surface and should appear sparingly for rhythm.
Tag Pill
Category labels and small accents5px radius, 4-8px padding, Ease Standard 12px/400, typically on colored backgrounds (Stone, Bubblegum, or Spring Green). Small, quiet, functional.
Decorative Shape Element
Brand personality and page atmosphereHand-drawn-feeling shapes — zigzag, triangle, circle, starburst, textured paper swatches — in the full accent palette. These are NOT icons; they are atmosphere. Appear around the wordmark, in dark sections, and as card decorations.
Display Wordmark
Brand identity elementEase Display at 100px/400, letter-spacing -0.014em, pure black. Each letter can be individually decorated with a shape or texture from the accent palette. This treatment should not be used for regular headings — reserved for the brand mark only.
Section Heading
Section titles in content flowEase Display at 28-30px/400, letter-spacing -0.034em to -0.060em, pure black, centered or left-aligned depending on section rhythm. No bolding — the size and tight tracking carry the weight.
Hairline Divider
Content separation without visual noise1px black or fog (#999999) horizontal line, no spacing buffer. Used sparingly; the warm canvas and tonal surface steps do most of the separation work.
Surfaces & elevation
Level 1
Warm Linen
#f1e8dePage canvas — the warm cream that defines the entire system
Level 2
Paper White
#fbf8f5Card and content block surface — a single step lighter than canvas
Level 3
Pure White
#ffffffInverted elements, pill buttons, clean section breaks
Level 4
Charcoal
#2f2c29Dark dramatic section — editorial contrast break
Navigation
rgba(0, 0, 0, 0.13) 1px 0px 5px 0px, rgba(0, 0, 0, 0.08) 2px 2px 4px 1px
Floating panels
rgba(115, 115, 115, 0.16) 0px 3px 10px 0px, rgba(115, 115, 115, 0.16) 0px 2px 4px 0px
Layout & imagery
Layout
Page layout is centered and editorial, max-width ~1200px. The hero is a full-width white section with centered tagline text and the large decorated wordmark below. One dark Charcoal editorial section follows, with asymmetric collage layout (photos and shapes scattered, text in a centered column). Content sections are white with centered headings and 4-column card grids for articles/resources. The navigation is a minimal top bar: logo + Menu button on the left, pill buttons (Log in, Book a demo, Sign up) on the right. Section rhythm alternates light → dark editorial → light card grid, with 64px+ vertical gaps between sections. No sidebar, no mega-menu, no sticky behavior beyond the nav's own shadow.
Imagery
Imagery is collage-driven and tactile: real photography (candid workspace shots, portraits, product stills) mixed with hand-cut shape elements — circles, triangles, zigzags, starbursts, textured paper swatches — in the full accent palette. Photos appear in two treatments: raw editorial crops (people, environments) and rounded-rectangle containers (5px radius) inside colored card fills. The visual language is craft/print-zine: nothing is clean SaaS stock. Shapes sit over, beside, and behind photos as overlapping layers. Icons are minimal and appear mostly as SVG strokes; the decorative shapes carry the brand personality far more than iconography. Density varies: dark sections are image-rich with collage layering, light card grids are image-in-card with generous whitespace around the grid.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 (Ink) - background: #f1e8de (Warm Linen) - card surface: #fbf8f5 (Paper White) - border: #000000 (1px hairline) - primary action: #ffde3b (filled action) - dark section: #2f2c29 (Charcoal) Example Component Prompts: 1. Create the hero section: Warm Linen (#f1e8de) canvas, centered tagline 'A way better way of working' in Ease Display 30px/400 black, letter-spacing -1.02px. Below: the wordmark 'STREAMTIME' in Ease Display 100px/400 black, letter-spacing -1.4px, line-height 1.0, with each letter decorated by a different accent shape (yellow circle, pink triangle, lime starburst, periwinkle rectangle, textured paper swatch). 2. Create a primary CTA button: Sun Yellow (#ffde3b) fill, black text 'Book a demo' in Ease Standard 16px/400 with letter-spacing -1.28px, 160px border-radius, 16px 24px padding, no shadow. Pairs with a ghost pill beside it: white fill, 1px black border, 96px radius. 3. Create the dark editorial section: Charcoal (#2f2c29) full-width background, white body text in Ease Standard 18px/400, letter-spacing -1.44px, line-height 1.2. Decorate with scattered collage elements: a 120px yellow circle, a pink triangle, a blue textured rectangle, a white zigzag line, and two circular photo crops (portraits) overlapping the shapes. 4. Create a 4-column article card grid: each card has a different colored fill — Lime (#c1f32b), Sun Yellow (#ffde3b), Periwinkle (#6483ff), Sand (#eadcce). Each card contains a rectangular image (5px radius), 20-30px internal padding, and a headline + byline in Ease Standard 16px/400 black below the image. No borders, no shadows — the color fill IS the container. 5. Create a section heading: centered text in Ease Display 30px/400 black, letter-spacing -1.02px, with no bolding, no underline, and no decorative element. Let the size and tight tracking carry the weight.
Similar brands
Notion
Both use a warm neutral canvas with tight-tracked sans-serif at 400-weight only, building hierarchy through scale not bolding
Ableton
Same creative-tools audience and collage-meets-software visual language mixing real photography with abstract decorative shapes
Mailchimp
Playful illustration-and-shape decoration layered over a clean content grid, with vivid accent colors used as personality rather than utility
Kozmos
Editorial print-zine sensibility — warm cream canvas, small-radius cards, and decorative shape elements that feel hand-cut rather than UI-generated
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
