--- title: "Streamtime design system" variant: extended source: https://streamtime.net/ captured_at: 2026-10-12 theme: light industry: saas generator: Design DNA (https://four.wiralomi.com/style/streamtime-net) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Streamtime · Design System > Creative work, told with warmth and playful confidence **Theme:** light · **Industry:** saas · **Source:** https://streamtime.net/ · **Captured:** 2026-10-12 (1440×900 desktop) _AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._ Streamtime pairs a warm, spacious canvas with expressive oversized typography and vivid accent colours. Product imagery, team photography and scattered testimonial cards make a software homepage feel human and studio-led. ## North star Let oversized, playful typography and warm negative space lead, using bright accents sparingly to mark action and personality. ## Overview The page alternates crisp white and warm parchment sections with deep charcoal bands, giving each long-form block a distinct pause without relying on decorative borders. Black is the dominant text colour; lime and yellow punctuate calls to action, while pink creates a deliberately loud full-width signup moment. Ease Display supplies rounded, characterful headings, including a huge hand-cut-looking Streamtime wordmark, while Ease Standard keeps paragraphs and links compact and readable. The layout moves between centered introductory copy, broad product-screen imagery, a narrow text column on charcoal, and spacious feature and testimonial areas. Product UI is presented as evidence rather than ornamental device mockups; candid workplace photography adds context. Accent colours also appear in illustrations and testimonial cards, so keep their strongest usage tied to specific blocks rather than spreading them across every surface. Shadows are restrained to controls and selected cards. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary headings, body copy, navigation and links on light backgrounds. | | Gallery White | `#ffffff` | `--color-gallery-white` | surface | Hero canvas, editorial content, category cards and footer background. | | Warm Parchment | `#f1e8de` | `--color-warm-parchment` | brand | Large feature and testimonial section bands; the main warm neutral canvas. | | Charcoal Studio | `#2f2c29` | `--color-charcoal-studio` | surface | Inverse narrative section and client-logo band; pair with white text and marks. | | Fresh Lime | `#c6dc3c` | `--color-fresh-lime` | accent | Book-a-demo action and occasional cards or small interface accents. | | Sunshine Yellow | `#ffde3b` | `--color-sunshine-yellow` | accent | Prominent demo button and select navigation or link accents. | | Playful Orchid | `#ee84d5` | `--color-playful-orchid` | accent | Secondary CTA treatment and occasional accent button. | | Quiet Grey | `#999999` | `--color-quiet-grey` | neutral | Muted secondary text and low-emphasis links. | | Stone Taupe | `#c3b7ac` | `--color-stone-taupe` | surface | Muted testimonial card surface against the warm parchment section. | | Electric Fuchsia | `#ff4dd5` | `--color-electric-fuchsia` | accent | Full-width signup CTA band; a concentrated, high-impact page accent. | | Marigold Card | `#ffdb00` | `--color-marigold-card` | accent | Bright testimonial-card fill, not a primary canvas colour. | | Soft Porcelain | `#fbf8f5` | `--color-soft-porcelain` | surface | Subtle light testimonial card surface against warmer backgrounds. | ### Semantic aliases `--color-canvas` → `#f1e8de` (Warm Parchment) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#2f2c29` (Charcoal Studio) · `--color-surface-3` → `#c3b7ac` (Stone Taupe) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#c6dc3c` (Fresh Lime) · `--color-accent-2` → `#ffde3b` (Sunshine Yellow) · `--color-accent-3` → `#ee84d5` (Playful Orchid) · `--color-on-accent` → `#000000` (Studio Ink) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#000000` | `#f1e8de` | 17.34:1 | AAA | | `#000000` | `#ffffff` | 21:1 | AAA | | `#000000` | `#2f2c29` | 1.51:1 | fail | | `#000000` | `#c3b7ac` | 10.69:1 | AAA | | `#ffffff` | `#f1e8de` | 1.21:1 | fail | | `#ffffff` | `#2f2c29` | 13.88:1 | AAA | | `#ffffff` | `#c3b7ac` | 1.96:1 | fail | | `#c6dc3c` | `#f1e8de` | 1.27:1 | fail | | `#c6dc3c` | `#ffffff` | 1.53:1 | fail | | `#c6dc3c` | `#2f2c29` | 9.06:1 | AAA | ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Ease Display | `--font-display` | webfont | 400 | Display headlines, section headings, navigation labels and large CTA text. | Outfit | | Ease Standard | `--font-body` | webfont | 400 | Paragraphs, body copy, captions, links and supporting interface text. | Inter | - **Ease Display:** Regular weight throughout; rounded, expressive forms, tight tracking, and sentence case rather than all caps. - **Ease Standard:** Regular weight; compact tracking and short readable line lengths; keep copy in natural sentence case. ### Type scale — Perfect Fifth (ratio ≈ 1.535, base 18px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 100px | 400 | 1 | -0.06em | — | Ease Display | Oversized brand-wordmark and hero display moments. | | h1 | 68px | 400 | 1 | -0.014em | — | Ease Display | Primary page headline and major introductory statement. | | h2 | 30px | 400 | 1.2 | -0.06em | — | Ease Display | Section headings and prominent editorial subheads. | | h3 | 28px | 400 | 1.1 | -0.034em | — | Ease Display | Feature headings and large navigation-style labels. | | body | 18px | 400 | 1.2 | -0.053em | — | Ease Standard | Explanatory paragraphs and feature descriptions. | | caption | 12px | 400 | 1.2 | -0.08em | — | Ease Standard | Small labels, attribution details and metadata. | | nav | 28px | 400 | 1.1 | -0.034em | — | Ease Display | Large menu labels and expressive navigation links. | | link | 18px | 400 | 1.1 | -0.06em | — | Ease Standard | Inline links and compact calls to action. | ## Spacing & layout - Base unit **4px**, density **comfortable**. - Scale (most used values): 4, 7, 8, 9, 12, 16, 20, 24, 30, 32, 40, 48, 80, 120, 128 px. - Section rhythm 32px · element gap 30px · card padding 30px · max content width 1392px. A long, scroll-led page uses broad, full-width colour bands and a measured content width capped at 1392px. The opening is centered, then the page alternates a narrow text column, wide product imagery, multi-column feature content, and offset testimonial cards. Section transitions are clear and spacious; some areas intentionally leave substantial empty canvas around content. The footer compresses into a dense multi-column directory. Keep alignment varied but deliberate: centered for the hero and editorial feed, left-aligned for product explanations and audience categories. ## Shape & elevation - Radius: button `4px` · card `10px` · media `5px` · nav `5px` · link `5px` · xs `4px` · sm `5px` · md `10px` · pill `9999px` - Shadow `md` (button, nav): `rgba(0, 0, 0, 0.13) 1px 0px 5px 0px, rgba(0, 0, 0, 0.08) 2px 2px 4px 1px` - Shadow `md-2` (card): `rgba(115, 115, 115, 0.16) 0px 3px 10px 0px, rgba(115, 115, 115, 0.16) 0px 2px 4px 0px` - Shadow `md-3` (nav): `rgba(0, 0, 0, 0.08) 2px 2px 4px 1px, rgba(0, 0, 0, 0.13) 1px 0px 5px 0px` Most section surfaces are flat, with separation created by colour bands and generous space rather than borders. Buttons have a restrained soft shadow and compact corners; selected cards use a subtle shadow or simple filled surface. Keep product media largely flush and avoid heavy outlines, stacked panels or deep floating effects. ## Imagery Use product interface screenshots as broad, flat showcases, with their software details readable and minimally framed. Pair them with candid creative-team and workplace photographs in tidy rectangular crops. The opening wordmark illustration is oversized and collage-like, with paper-textured shapes and bright colour; treat those colours as artwork rather than expanding them into the UI palette. Testimonial cards can use small profile illustrations or marks. ## Components ### Top navigation Compact logo and dark Menu control at left; account actions sit at right, including a yellow demo pill and a light signup control. ### Hero wordmark Centered introductory copy above an oversized black Streamtime wordmark with colourful cutout-like geometric artwork. ### Product showcase Wide software screenshots placed across a parchment section, followed by a concise feature heading and compact supporting statements. ### Signup band Full-width electric fuchsia CTA strip with large black prompt and a contrasting charcoal signup pill. ### Audience cards White section with a short introductory text column and three workplace-photo categories with captions. ### Testimonial cards Loose staggered arrangement on warm parchment; cards use taupe, porcelain, yellow and lime fills with readable quotes. ### Client logo band Charcoal full-width strip with centered prompt and a horizontally arranged row of white client marks. ### Editorial feed and footer Centered editorial heading over colourful article cards, then a compact white multi-column link directory. ### Measured component styles - **Primary button** (“What does it do?”): background #ffde3b · text #000000 · radius 4px · padding 7.2px 16px 8.8px 16px · 400 28px Ease Display · shadow rgba(0, 0, 0, 0.13) 1px 0px 5px 0px, rgba(0, 0, 0, 0.08) 2px 2px 4px 1px - **Secondary button** (“Who is it for?”): background #ee84d5 · text #000000 · radius 96px · padding 7.2px 16px 8.8px 16px · 400 28px Ease Display · shadow rgba(0, 0, 0, 0.13) 1px 0px 5px 0px, rgba(0, 0, 0, 0.08) 2px 2px 4px 1px - **Link** (“Project Planning”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Ease Standard - **Card** (““I’ve gone through the webinars and it’s”): background #c3b7ac · text #000000 · radius 5px · padding 30px · 400 16px Ease Standard - **Navigation item** (“Menu What does it do? Why does it matter”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Ease Standard ## Do - Use warm parchment and white as the main alternating canvases. - Keep black text crisp and prominent on light sections. - Reserve charcoal bands for deliberate contrast and white content. - Use lime, yellow and pink as distinct, localized accents. - Set headings in expressive display type with tight tracking. - Mix centered introductions with asymmetrical, offset content. - Show product screens and real workplace imagery as evidence. ## Don't - Do not turn every section into a bordered card. - Do not use bright accents as continuous page backgrounds. - Do not flatten the page into a uniform centered template. - Do not add gradients or glossy 3D effects. - Do not make headings uppercase or overly formal. - Do not mistake illustration colours for core UI surfaces. ## Agent prompt Build a new page in Streamtime’s playful, studio-led visual language. Use Gallery White (#ffffff) and Warm Parchment (#f1e8de) as spacious alternating canvases, with Charcoal Studio (#2f2c29) for occasional inverse bands. Set expressive headings in Ease Display or a close Outfit substitute; use Ease Standard or Inter for readable supporting copy. Keep primary text Studio Ink (#000000). Introduce Fresh Lime (#c6dc3c), Sunshine Yellow (#ffde3b), and Playful Orchid (#ee84d5) as localized accents, not a general rainbow palette. Give content room to breathe, vary centered and left-aligned blocks, and use asymmetric feature layouts. Include clean product screenshots or candid creative-team photography. Favor flat surfaces, restrained control shadows, and simple compact corners over heavy borders or layered cards. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Centered intro copy above an oversized wordmark collage on white. | Brand-first introduction, Menu and account actions | Large black display lettering, Paper-textured geometric illustration, Yellow demo button | | 2 | feature-split | Charcoal full-width band with a slim left-aligned text column and surrounding negative space. | Values-led explanation, Scannable short paragraphs | Charcoal background, White copy, Underlined inline link | | 3 | product-showcase | Wide product screenshots span the parchment canvas. | Show software in context, Visual product proof | Large interface screenshots, Warm neutral background | | 4 | feature-grid | Left-aligned section title with a row of five compact feature columns. | Feature scanning, Benefit summaries | Parchment canvas, Compact text columns, Selective yellow emphasis | | 5 | cta | Full-width fuchsia band with prompt on the left and dark pill action on the right. | High-visibility signup prompt, Single primary action | Electric pink field, Large black text, Charcoal rounded button | | 6 | feature-grid | White three-column area pairing a text introduction with three audience images. | Audience self-selection, Category navigation | Workplace photography, Short captions, Open white surface | | 7 | testimonials | Spacious parchment field with testimonial cards staggered across the center. | Social proof, Quote-led reassurance | Offset card placement, Mixed muted and bright fills, Small profile marks | | 8 | logo-cloud | Centered title above a horizontal logo row on a charcoal band. | Client credibility, Brand recognition | White logo marks, Dark inverse background, Wide horizontal arrangement | | 9 | content-feed | Centered heading followed by a four-column row of colourful editorial cards. | Editorial discovery, Article browsing | Image-led cards, Bright varied card fills, Compact metadata | | 10 | footer | Dense multi-column directory of feature, company, help and social links on white. | Deep navigation, Company and location information | Small column headings, Compact link lists, Minimal decoration | ## Source CSS custom properties (selected) ```css --base-color-neutral--black: #000; --base-color-neutral--off-black: #2f2c29; --base-color-neutral--white: #fff; --background-color--background-success: #cef5ca; --text-color--text-success: #114e0b; --base-color-brand--pink-1: #ee84d5; --border-color--border-primary: #eee; --base-color-brand--yellow: #ffde3b; --text-color--text-secondary: #2f2c29; --background-color--background-primary: #000; --text-color--text-alternate: #fff; --background-color--background-tertiary: #ee84d5; --background-color--background-error: #f8e4e4; --text-color--text-error: #3b0b0b; --base-color-brand--pink-2: #ff4dd5; --background-color--background-warning: #fcf8d8; --text-color--text-warning: #5e5515; --base-color-brand--warm-grey-1: #f1e8de; --base-color-brand--offwhite: #fbf8f5; --base-color-brand--light-grey: #f1eeeb; --base-color-brand--warm-grey-2: #eadcce; --base-color-brand--green-1: #c1f32b; --base-color-brand--warm-grey-3: #c3b7ac; --base-color-brand--green-2: #c6dc3c; --base-color-brand--green-light: #b4ae95; --base-color-brand--blue-2: #6483ff; --base-color-neutral--neutral-lightest: #eee; --base-color-brand--purple: #88166d; --base-color-neutral--dark-grey: #4e4945; --base-color-brand--blue-1: #64d3ff; --base-color-brand--blue-3: #3b2d85; --base-color-brand--green-3: #324708; --base-color-system--success-green: #cef5ca; --base-color-system--success-green-dark: #114e0b; --base-color-system--error-red: #f8e4e4; --base-color-system--error-red-dark: #3b0b0b; --base-color-system--warning-yellow: #fcf8d8; --base-color-system--warning-yellow-dark: #5e5515; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/streamtime-net