Brand Violet
#4457ffViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
FeedHive
feedhive.comWebsite preview
The design language
FeedHive uses an airy productivity-workspace language: a near-white lavender canvas (#f3f5ff), crisp white cards floating on top, and a single confident blue-violet accent (#4457ff) that makes actions feel switched on without ever dominating. Typography relies entirely on one custom geometric sans (Thicccboi) at generous sizes — 60px displays, 16px body — giving every screen a calm, modern cadence. Surfaces are flat and mostly shadowless; the one signature blue-tinted glow is reserved for the product mockup hero, never for ordinary cards. The system treats color as punctuation: pages stay 95% achromatic, and the brand violet appears only on filled CTAs, the gradient text accent, floating social-media decorations, and the AI chat orb.
Color palette
brand
Brand Violet Light
#7583fdSupporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
accent
Shadow Violet
#c7c8e2Reference color for the signature blue-tinted product mockup glow — shadows are cast in violet, never gray
neutral
Lavender Canvas
#f3f5ffPage background — the entire site sits on this faint blue-lavender wash instead of pure white, which warms the space and lets white cards lift visibly
Card White
#ffffffCard surfaces, modal panels, nav bar, elevated UI blocks
Ink
#181c31Primary text, headings, button labels — a near-black with a blue undertone, not pure #000
Muted Iris
#757693Body text, nav links, secondary copy, helper text, footer links — a desaturated violet-gray that keeps the type hierarchy warm without competing with the brand accent
Border Mist
#e5e7ebHairline dividers, input borders, card outlines, table rules
Hover Iris
#6b7280Slightly deeper secondary text for hover/active metadata
Soft Blue Wash
#dbeafeHighlighted surface tint, selected row state, subtle feature-panel background — the lightest visible blue in the palette
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
60px · 700 · 1The quick brown fox jumps
heading-lg
44px · 700 · 1.11The quick brown fox jumps
heading
36px · 700 · 1.25The quick brown fox jumps
text-34
34px · 700 · 1.41The quick brown fox jumps
heading-sm
24px · 500 · 1.33The quick brown fox jumps
subheading
20px · 700 · 1.4The quick brown fox jumps
body-lg
18px · 500 · 1.56The quick brown fox jumps
body
16px · 400 · 1.56The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Thicccboi
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 14, 16, 18, 20, 24, 34, 36, 44, 60
- Line height
- 1.00–1.63
- Fallback
- DM Sans, Manrope, or Inter (in that order of preference)
The only typeface in the system. Display headlines at 60px weight 700, hero sublines at 44px weight 700, section headings at 34–36px weight 600, body at 16px weight 400, and labels at 12–14px weight 500. The geometric, slightly rounded sans gives the brand a friendly-but-technical voice — closer to a productivity tool than a marketing site.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
mid
15pxtags
9999pxcards
24pxicons
9999pxsmall
8pximages
12pxbuttons
9999pxSpacing scale
2px4px8px10px12px14px16px18px20px24px28px30px32px36px40px48px50px54px55px63px64px70px73px80px90px95px100px120px130px215px217pxGuidelines
Do
- Use 9999px radius for every button, tag, and icon container — pill is the default, not an option
- Set page background to Lavender Canvas #f3f5ff and use Card White #ffffff for any surface that needs to lift
- Use Thicccboi weight 700 at 60px for display headlines; never go above 60px
- Apply the brand action gradient (#4457ff → #7583fd) to exactly one CTA per screen
- Use the gradient-text treatment on a single phrase inside a headline, no more than once per section
- Cast the blue-tinted shadow only on the product mockup; keep all other UI flat
- Keep accent color usage below 5% of any screen — the violet is punctuation, not paint
Don’t
- Don't use pure white #ffffff as a page background — always use the lavender canvas so white cards have something to lift off
- Don't use pure black #000000 for text — use Ink #181c31, which carries a blue undertone matching the brand
- Don't add drop shadows to cards, buttons, or inputs — the system is flat by design
- Don't introduce a second accent color — green, red, and orange are not part of this palette
- Don't apply the gradient text effect to body copy or more than one phrase per heading
- Don't use sharp corners (0–4px) on interactive elements — pills only for buttons and tags
- Don't stack the brand violet on the lavender canvas without sufficient size or weight — it needs contrast to register
Components
Primary Pill Button
Main call-to-action across hero, nav, and section endingsFilled with the brand action gradient (#4457ff → #7583fd), white text in Thicccboi 16px weight 500, 9999px radius, padding 12px 24px, inline arrow icon. The gradient (not a solid fill) is what makes these buttons feel premium rather than utilitarian.
Ghost Nav Button
Secondary text-link in the nav (Log in)Transparent background, Muted Iris (#757693) text weight 500, no border, no padding. Sits inline with the primary pill to its right.
Gradient Text Accent
Highlight a key phrase within an otherwise ink-colored headlineApply linear-gradient(to right, #4457ff, #7583fd) as background-clip: text on a span inside the headline. Used once per major heading — overusing destroys its emphasis.
Star Rating Badge
Trust signal above hero and inside testimonial cardsRow of 5 small gold/yellow star icons (#fbbf24) with optional Muted Iris caption below, inline-aligned center.
Social Platform Icon Strip
Show supported platforms under the hero subheadingHorizontal row of 8–10 small (24px) brand-colored social icons (Instagram gradient, Facebook blue, YouTube red, TikTok, LinkedIn, X, Pinterest, Discord) at 16–20px gap, centered, no background container.
Product Mockup Hero
Primary hero visual on the landing pageScreenshot of the FeedHive dashboard UI, tilted at a slight perspective angle, surrounded by floating 3D-style social media icons (red heart, blue thumbs-up, red play button) at varied scales. The mockup sits on the signature blue-tinted glow (rgba(32,36,138,0.25) -19px 5px 60px 4px). Width roughly 90% of viewport, centered.
Testimonial Card
4-column grid of customer quotes on social-proof sectionsWhite #ffffff surface on the lavender canvas, 24px radius, 24px padding, no border, no shadow. Header row: 48px circular avatar (object-fit cover), name in Ink #181c31 weight 600, role/company in Muted Iris #757693 weight 400 below. Star row (#fbbf24) above the quote. Quote text in Ink #181c31, 16px weight 400, line-height 1.56.
AI Chat Orb
Persistent floating helper widget in bottom-right56px circular button, solid Brand Violet #4457ff, white speech-bubble icon centered, fixed position bottom 24px right 24px, with an attached expandable panel above it that previews a greeting message.
Trust Stats Bar
Inline trust signal under hero sectionsSingle line, centered, Muted Iris #757693 weight 400 at 18px, with the numeric value highlighted in Brand Violet #4457ff weight 600. e.g. 'Trusted by +30,000 businesses, agencies and content creators.'
Floating Social Decoration
Atmospheric 3D-style icons scattered around the product mockupRed heart, blue thumbs-up, red play triangle, drawn in flat solid colors with subtle inner shadow for depth. Sized 40–80px, rotated 10–25°, placed outside the mockup boundary to create a 'social buzz' feel.
Avatar Stack
Composite reviewer avatars shown in testimonial section headerRow of 4 overlapping 40px circular photos, each with a 2px white border, -8px horizontal overlap. Followed by star count and 'from +300 reviews' caption in Muted Iris.
Surfaces & elevation
Level 0
Page Canvas
#f3f5ffBase background for every page — subtle lavender tint instead of white
Level 1
Card Surface
#ffffffTestimonial cards, pricing cards, feature blocks, nav bar
Level 2
Highlighted Surface
#dbeafeSelected states, highlighted info panels, gradient wash bottom stop
Level 3
Brand Surface
#4457ffPrimary CTA fill, AI chat orb, gradient start
The system intentionally avoids drop shadows on everyday UI: cards, buttons, inputs, and nav are flat, relying on the lavender canvas + white card color contrast for layering. The single violet-tinted glow is reserved for the product mockup hero, where it functions as a brand-color decoration, not a real elevation cue.
Product Mockup / Hero Image
rgba(32, 36, 138, 0.25) -19px 5px 60px 4px
Layout & imagery
Layout
Centered max-width container at 1200px, with the nav spanning full-bleed white above it. The hero is a single-column centered stack: star badges, large 60px headline with gradient phrase, 20px subheading, social-icon strip, CTA button, then the product mockup breaking below at near-full viewport width. Sections are separated by 80px vertical gaps with no dividers — the lavender canvas + white cards alone define the rhythm. Testimonial sections use a 4-column card grid. Floating elements (social icons, chat orb) break the container to add liveliness. No sidebar, no mega-menu — top bar only.
Imagery
Imagery is dominated by the in-app product screenshot, which appears once as a tilted hero mockup surrounded by floating 3D-style social media icons (red heart, blue thumbs-up, red play). Customer avatars in testimonial cards use real photography at 48px circular crops. No lifestyle photography, no illustrations, no abstract graphics beyond the floating decorations. The product UI itself is the brand's visual proof — the page sells the screen you see.
Design notes
Agent Guide
primary action: no distinct CTA color Quick Color Reference: - background: #f3f5ff (lavender canvas) - surface: #ffffff (card white) - text: #181c31 (ink) - text-muted: #757693 (muted iris) - border: #e5e7eb (border mist) - accent: #4457ff (brand violet) — used for primary action fills, gradient text, AI orb Example Component Prompts: No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Build a testimonial card grid: 4-column grid with 24px gap, 80px row gap. Each card is white #ffffff, 24px radius, 24px padding, no shadow, on the lavender canvas. Card header has a 48px circular avatar, name in Ink #181c31 weight 600, role in Muted Iris #757693 weight 400. Five gold #fbbf24 stars above a 16px Ink quote at line-height 1.56. 3. Build a product mockup hero: a screenshot container centered at 90% width, slightly perspective-rotated, with the signature blue-tinted shadow rgba(32,36,138,0.25) -19px 5px 60px 4px underneath. Scatter 4–6 floating 3D-style social icons (red heart, blue thumbs-up, red play) around the mockup at 40–80px sizes, rotated 10–25°. 4. Build the AI chat orb: a 56px circular button fixed bottom-right (24px inset), filled with Brand Violet #4457ff, white speech-bubble icon centered. On click, expand a 280px white panel above with 16px Ink greeting text and a 14px Muted Iris input field (1px Border Mist border, 8px radius, no focus shadow — the field's focus state uses a 2px Brand Violet ring). 5. Build a trust stats bar: a single centered line in 18px Thicccboi weight 400, Muted Iris #757693 base color, with the numeric value (e.g. '+30,000') highlighted in Brand Violet #4457ff weight 600. 80px top margin from the previous section.
Gradient System
Only two gradients are allowed in the entire design system: 1. Brand Action Gradient — linear-gradient(to right, #4457ff, #7583fd). Used exclusively for primary CTA fills and gradient-text accents. Never applied to backgrounds, cards, or decorative shapes. 2. Lavender Surface Gradient — linear-gradient(to top, #f8f9ff, #dee7ff). Used for subtle feature-panel washes and section backgrounds. Always low-contrast — under 10% luminance shift between stops. No diagonal brand gradients. No rainbow gradients. No mesh gradients. If a design needs more than two colors, it is not a gradient — it is an illustration and should be treated as imagery.
Similar brands
Buffer
Same social-media-management product category with a near-white canvas and a single confident primary color
Typefully
Same flat, generous-whitespace layout language with pill CTAs and a single accent hue
Framer
Same flat-on-canvas approach with product screenshot as the hero visual, and a blue-violet accent
Linear
Same custom geometric sans, large display headlines, and gradient text treatment on key phrases
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
