Deep Teal
#004d60Product accent — Pathfinder agent, data-viz category, teal-tinted section backgrounds pair it
Cycle
cycle.app
Website preview
The design language
Cycle's visual language reads as a warm, analog workspace — slightly off-white canvas, ink-black type, and a palette of deep jewel tones that feel more like vintage inkpots than SaaS accents. Headlines use Eudoxus Sans at heavy weights with tight tracking, giving every title physical weight; body and UI default to Inter at comfortable 14–16px. Components sit on a very soft shadow system (low-opacity warm gray) rather than hard borders, and large 20px corner radii make cards feel like ceramic tiles. Color is functional and categorical — each product agent or feature cluster gets its own deep hue (teal, violet, amber, maroon) and its own tinted background wash, never decorative gradients.
Color palette
brand
Deep Violet
#38296cProduct accent — VoiceHunter agent, primary feature category, violet wash sections
Deep Amber
#6c4800Product accent — LoopCloser agent, gold-tinted section backgrounds and warm callouts
Deep Plum
#46122dProduct accent — additional agent or feature category, paired with pinkish washes
Deep Navy
#0f1c41Product accent — analytics or infrastructure category
Deep Maroon
#663220Product accent — heading accent on warm-toned pages
Deep Umber
#772914Product accent — rust-toned category, icon and illustration accent
Deep Indigo
#241a42Product accent — dark variant of the violet for headings and iconography on light surfaces
Burnt Sienna
#412e0aDark amber — heading text when a warm-tone treatment is needed; Yellow supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
accent
Violet Wash
#f5f0ffSoft tinted background — feature section panels, agent card backgrounds
Teal Mist
#defafeSoft tinted background — teal-categorized section panels
Amber Cream
#fff6e1Soft tinted background — gold-categorized section panels
Apricot Wash
#fff1ecSoft tinted background — warm secondary section panels
Violet Veil
#e7e0feBadge and small-card background — violet category
Sky Tint
#cfeff8Badge and small-card background — teal category
Honey Veil
#feedccGray supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
neutral
Ink Black
#171618Primary text, icons, dark surfaces — the dominant neutral; never use pure #000 for text
Pure Black
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Paper White
#ffffffCard surfaces, modal panels, text on dark buttons — the brightest surface in the stack
Warm Canvas
#f7f7f7Page background, subtle section divider — the off-white that gives the system its warm analog feel
Mist Gray
#efefefHairline borders, input backgrounds, divider lines — the quietest structural neutral
Stone Gray
#dadadaButton borders, disabled outlines
Pewter
#bababaSubtle shadow tint, placeholder text in low-emphasis contexts
Iron
#727578Secondary text, nav links, muted body copy — the workhorse mid-gray
Lead
#8b8d8fTertiary nav, breadcrumb separators
Pebble
#7d7d7dBadge text, metadata labels
Typography
Type scale
Major Second (1.125) · 21px basedisplay
58px · 700 · 1 · -2.03px trackingThe quick brown fox jumps
heading-lg
48px · 700 · 1.05 · -1.68px trackingThe quick brown fox jumps
heading
32px · 700 · 1.2 · -0.93px trackingThe quick brown fox jumps
heading-sm
27px · 600 · 1.18 · -0.3px trackingThe quick brown fox jumps
text-23
23px · 800 · 1The quick brown fox jumps
subheading
21px · 400 · 1.4 · -0.23px trackingThe quick brown fox jumps
text-16
16px · 600 · 1.2The quick brown fox jumps
body
15px · 400 · 1.62 · -0.1px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 12px, 13px, 14px, 15px, 16px, 21px, 27px
- Line height
- 0.94–1.74
- Letter spacing
- -0.011em at 16–27px, -0.01em at 14–15px, normal at 12–13px
- Fallback
- Inter (already freely available)
All UI, body, nav, button, and badge text — body at 14–16px/400, nav and labels at 12–13px/500, button text at 14–16px/500, inline emphasized text at 600
Additional typeface
Eudoxus Sans
- Weights
- 700, 800
- Sizes
- 21px, 23px, 32px, 48px, 58px
- Line height
- 1.00–1.40
- Letter spacing
- -0.035em at 48–58px, -0.029em at 32px, -0.026em at 21–23px
- Fallback
- Cabinet Grotesk Bold, Söhne Breit, or Plus Jakarta Sans 800
All display and heading copy — hero at 58px/800, section headings at 48px/800, sub-headings at 32px/700; the tight -0.035em tracking at display sizes and heavy weight give headlines physical, sculptural presence that contrasts Inter's workhorse body
Additional typeface
Karla
- Weights
- 400
- Sizes
- 21px
- Line height
- 1.4
Karla — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
20pxbadges
100pximages
12pxinputs
20pxbuttons
8pxlargeSurfaces
27pxSpacing scale
2px4px5px6px8px9px10px12px16px20px21px22px24px26px28px29px31px32px34px36px38px40px42px44px45px47px50px51px52px58px60px62px64px66px93px113px120px124pxGuidelines
Do
- Use #000000 fill + #ffffff text for the single primary action on any screen; never introduce a second filled-CTA color in the same viewport.
- Pair each deep brand accent (#38296c, #004d60, #6c4800, #46122d) with its matching tinted wash — violet text on #f5f0ff, teal on #defafe, amber on #fff6e1, maroon on apricot wash — to keep the categorical system legible.
- Set all display headlines in Eudoxus Sans 700–800 with tracking between -0.026em and -0.035em; never use Inter above 27px.
- Use 20px radius for cards, 8px for buttons, and 100px for badges/tags — these three radii define the system's silhouette.
- Anchor body text in Inter 14–15px weight 400 at line-height 1.62; apply 600 only for inline emphasis, never for full paragraphs.
- Layer the signature soft shadow (rgba(239,239,239,0.55) 0 2px 15px) beneath white cards on the warm canvas; avoid hard borders on elevated surfaces.
- Use #f7f7f7 as the page background and #ffffff for cards to preserve the warm off-white analog feel — never pure #ffffff for full-page canvas.
Don’t
- Don't use #000000 for body or heading text — #171618 is the only ink color; pure black is reserved for CTA fills and the logo mark.
- Don't introduce bright or saturated accent colors (electric blue, neon green, etc.) — every chromatic value in the system is a deep, muted jewel tone.
- Don't set body or product UI text in Eudoxus Sans — it's a display face only; Inter handles everything from 12px captions up to 27px sub-headings.
- Don't use sharp 4px or 0px corner radii on cards or inputs — the system's softness comes from 20px / 12px / 8px curves.
- Don't stack multiple colored CTA buttons in the same view; the system is strictly one filled black action plus ghost/outlined secondary actions per surface.
- Don't apply gradients to backgrounds or buttons — the color palette relies on flat deep tones and their tinted washes for depth.
- Don't use the chromatic brand colors for decorative gradients or large background floods — they belong on text, icons, and small accent elements paired with their tinted wash.
Components
Primary CTA Button
Main action — Book a demo, Sign upSolid #000000 fill, #ffffff text at 14px Inter weight 500, 8px corner radius, 22px horizontal / 10px vertical padding. Subtle two-stop drop shadow: 0 1px 2px rgba(0,0,0,0.08) + 0 0.5px 0 rgba(0,0,0,0.12). No border.
Ghost / Outlined Button
Secondary action — Watch video, Explore product agentsTransparent fill, #171618 border at 1px, 8px corner radius, 22px / 10px padding, 14px Inter weight 500. Pairs beside the primary CTA in the hero.
Navigation Bar
Top-level site navigationTransparent bar on white canvas, logo left (#000000 mark), nav links in Inter 14px/500 #171618, right side hosts Log in link and a compact primary CTA button.
Logo Mark
Brand identity anchorThe Cycle dot+wordmark in #000000 — a small circle glyph followed by 'Cycle' in Inter 14px/600; reappears in the product UI as an in-app breadcrumb mark.
Hero Section
Above-the-fold brand statementFull-width white canvas, centered 58px Eudoxus Sans 800 headline ('Together we ship alone'), 21px Inter 400 subtitle in #727578, two-button group centered. Flanked by 3D mascot characters (jewel-toned blob faces with hats) — decorative, not part of the grid.
Customer Logo Strip
Social proof bandTwo rows of monochrome #727578 / 60%-opacity customer logos on the warm canvas, no dividers, 21px row gap.
Product Screenshot Card
Product visualizationWhite card on warm canvas, 20px radius, 24px padding, 12px image radius inside, soft layered shadow (1px ink hairline + 16px/6px warm blurs). Hosts the product UI mockup showing feedback organization.
Category Tinted Section
Per-feature color-coded content blockFull-bleed tinted background — one of #f5f0ff, #defafe, #fff6e1, or #fff1ec — with a 20px-radius card inside, 3-column or 3-row layout, each card representing a product agent with its matching deep-jewel accent.
Agent / Feature Card
Individual product capability tileWhite surface on tinted background, 20px radius, 24px padding, Eudoxus Sans 800 32px heading in a deep brand color, Inter 14–15px body in #171618, optional small badge with 100px pill radius in tinted accent.
Category Badge
Inline tag for area, source, or status100px pill radius, tinted background (one of #e7e0fe, #cfeff8, #feedcc), 12px Inter 500 text in the matching deep ink color, 6px vertical / 9px horizontal padding.
Primary Nav Link
Menu items in top barInter 14px weight 500, #171618, no underline; chevron-down icons next to dropdown items; active state uses weight 600.
In-Product Sidebar Item
Workspace navigation inside the product UIInter 13px weight 500, #171618, left-aligned with a small leading icon, 8px vertical padding, subtle hover wash in #f7f7f7.
Search Input
Workspace search fieldFull-width input with 1px #efefef border, 20px radius, 12px Inter 400 placeholder in #727578, 12px vertical / 14px horizontal padding, focus state deepens border to #171618.
Filter Pill
Active filter chip in the product UIPill shape (100px radius), white fill, 1px #efefef border, 12px Inter 500 text, small trailing X icon in #727578.
Surfaces & elevation
Level 0
Warm Canvas
#f7f7f7Page background — the off-white that grounds everything
Level 1
Paper White
#ffffffCard, modal, and elevated component surfaces
Level 2
Tinted Wash
#f5f0ffCategory-coded section backgrounds — violet, teal, amber, apricot variants
Level 3
Ink Overlay
#171618Dark inverted sections and product mockup frames
Card (paper white on warm canvas)
0px 2px 15px 0px rgba(239, 239, 239, 0.55)
Product screenshot frame
0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 16px 16px 0px rgba(23, 24, 26, 0.03), 0px 6px 12px 0px rgba(23, 24, 26, 0.05)
Secondary card or input
0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 8px 16px 0px rgba(23, 24, 26, 0.03)
Primary CTA button
0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12)
Layout & imagery
Layout
Max-width 1200px centered column, hero breaks full-bleed with the nav pill floating above. Hero is a centered stack: small wordmark + nav, then 58px headline, subtitle, and a two-button group, flanked by mascot characters sitting outside the content column. Below the hero, a monochrome customer-logo band runs edge-to-edge in a quiet row. Product sections alternate between white product-screenshot cards on the warm canvas and full-bleed tinted sections (violet / teal / amber / apricot) that hold 3-column agent card grids. Section gaps are generous (~80px) to let the soft shadows breathe. Navigation is a minimal top bar with no sticky behavior apparent; in-product pages switch to a left sidebar with a workspace switcher at the top.
Imagery
The site's visual language mixes three modes: (1) 3D mascot characters in the hero — soft, rounded blob creatures with expressive faces and hats, rendered in the full deep-jewel palette (teal, violet, amber, pink) with subtle ambient shadows; they float as isolated characters with small geometric confetti shapes, never composited onto backgrounds. (2) Product UI screenshots — crisp, full-bleed captures of the actual Cycle workspace showing feedback lists, sidebars, and search inputs, presented in white card frames on the warm canvas. (3) Iconography — small, line-based icons throughout the product UI at 16–20px stroke weight, monochrome #171618 or matching the active category color. No photography, no abstract gradient art, no illustration beyond the mascots. Imagery is sparse and purposeful: mascots anchor brand warmth, product screenshots do the explanatory heavy lifting, icons carry functional density.
Design notes
Agent Guide
Quick Color Reference: - text: #171618 - background: #f7f7f7 (canvas) / #ffffff (card) - border: #efefef (hairline) / #171618 (strong) - accent: #38296c (Deep Violet) — paired with #f5f0ff wash - primary action: no distinct CTA color Example Component Prompts: 1. Build the hero: #ffffff background, centered 58px Eudoxus Sans weight 800 headline in #171618 at letter-spacing -2.03px, 21px Inter weight 400 subtitle in #727578 with 1.62 line-height, and a centered button pair — primary #000000 filled button with #ffffff text at 14px Inter 500 (8px radius, 22px/10px padding) and a ghost button with 1px #171618 border, same sizing. Flank with 3D mascot characters in violet, teal, and amber. 2. Build a category-tinted section: #f5f0ff full-bleed background, 3-column grid of white cards (20px radius, 24px padding, soft shadow rgba(239,239,239,0.55) 0 2px 15px), each card with a 32px Eudoxus Sans 800 heading in #38296c, 15px Inter 400 body in #171618, and a 100px-radius pill badge using #e7e0fe fill with #38296c text. 3. Build a product screenshot card: white card (20px radius, 24px padding) on the #f7f7f7 canvas, containing a product UI mockup with 12px image radius and a layered shadow (1px #171618 at 10% opacity + 16px and 6px warm blurs at 3–5% opacity). Inside the mockup, a left sidebar with 13px Inter 500 items in #171618, a top search input with 20px radius and 1px #efefef border, and a main panel with Eudoxus Sans 21px weight 700 headings. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 5. Build a category badge: 100px pill radius, #feedcc fill, 12px Inter 500 text in #412e0a, 6px vertical / 9px horizontal padding. Use for area, source, or status tagging inside the product UI.
Color Categorical System
Cycle's chromatic palette is not a decorative accent set — it is a categorical taxonomy. Each product agent or feature cluster is assigned one deep-jewel hue and one matching tinted wash: - Deep Violet (#38296c) + Violet Wash (#f5f0ff) → VoiceHunter / understanding customers - Deep Teal (#004d60) + Teal Mist (#defafe) → Pathfinder / shaping the product - Deep Amber (#6c4800) + Amber Cream (#fff6e1) → LoopCloser / closing the loop - Deep Plum (#46122d) + Apricot Wash (#fff1ec) → additional agent or feedback category - Deep Navy (#0f1c41) → analytics or infrastructure category When adding a new agent or feature cluster, select a new deep hue and generate its 95%-lightened wash. Never reuse a hue for a second category. UI chrome (buttons, nav, body) stays neutral; chromatic color enters the interface only through this agent/category system.
Typography Pairing Logic
The Eudoxus Sans + Inter pairing is a contrast play, not a harmony. Eudoxus Sans 700–800 with tight tracking (-0.035em at display sizes) gives every heading a sculptural, almost pressed-letter quality — the kind of voice you see on a wine label or architecture monograph. Inter at 400–500 with looser tracking handles everything the user reads or clicks. Rules for the pair: - Headlines never use Inter; UI never uses Eudoxus Sans. - The transition point is 27–32px: at 27px and below use Inter; at 32px and above use Eudoxus Sans. - Eudoxus Sans is always weight 700 or 800 — never lighter. - Inter at 21px or 27px sub-heading sizes gets -0.011em tracking, which is enough to feel intentional without becoming display-style.
Similar brands
Linear
Same warm off-white canvas and heavy display heading against a quiet, mostly-monochrome product frame
Vercel
Same approach of one dark CTA button per view with ghost secondaries, and the soft warm-gray shadow system beneath white cards
Notion
Same category-coded color washes on neutral surfaces, with deep muted hues rather than bright SaaS accents
Pitch
Same soft 20px card radii, Inter for body, custom display face for headlines, and a warm canvas that reads analog rather than digital
Loom
Same use of 3D character mascots as brand warmth, paired with a clean, generous white-and-warm-gray layout
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
