№ feedly-com--i-top-bu-blogs

Feedly

Cool, spacious digital architecture—crisp sans-serif geometry on a muted, tranquil teal and gray field.

Component Playgroundminimalism swiss monochrome saaslight

The page uses a clean, spacious layout with a focus on clear typography and subtle color variations. The overall feel is professional and efficient, prioritizing information delivery over visual embellishment. · saas dashboard, news aggregator, information hub, productivity tools, minimalist design, dark theme, feed reader

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#35b555
OKLCHoklch(68.3% 0.175 148)
RoleDominant
find sites →
Hex#041424
OKLCHoklch(18.7% 0.040 249)
RoleSurface
find sites →
Hex#f2f7fc
OKLCHoklch(97.4% 0.009 248)
RoleInk
find sites →
Hex#569e67
OKLCHoklch(63.7% 0.110 150)
RoleAccent
find sites →
Hex#b6beba
OKLCHoklch(79.4% 0.010 165)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Aeonik Pro VF	48px	400	1.17	Aa Bb Cc
h2	Aeonik Pro VF	28px	400	1.29	Aa Bb Cc
h3	Aeonik Pro VF	28px	400	1.29	Aa Bb Cc
body	InterVariable	16px	400	1.15	Aa Bb Cc
button	InterVariable	14px	400	1.43	Aa Bb Cc

Spacing scale

16px

24px

48px

64px

80px

96px

136px

Radius scale

0px

4px

8px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #35b555;
  --color-surface: #041424;
  --color-ink: #f2f7fc;
  --color-accent: #569e67;
  --color-detail: #b6beba;
}

/* CSS variables exposed by source */
:root {
  --font-sans-serif: "InterVariable","InterVariable Fallback",sans-serif;
  --font-optical-sizing: auto;
  --semanticColorBorderStatesWarningDisabled: #ffcb80;
  --semanticColorBorderStatesAccentHover: #228e3d;
  --semanticColorBackgroundStatesLightestActive: rgba(0,0,0,0.0500);
  --semanticColorBackgroundDangerLight: #feeceb;
  --semanticColorContentBold: #333333;
  --semanticSizing750: 2.5rem;
  --semanticColorContentStatesInfoHover: #2e61a3;
  --semanticColorBackgroundStatesAccentMainFocus: #f2f2f5;
  --semanticColorBackgroundYellowMedium: #fffcdd;
  --semanticColorContentStatesMediumHover: #646464;
  --semanticColorBackgroundStatesDangerFocus: #fef6f5;
  --semanticColorContentStatesLightestDisabled: #646464;
  --semanticColorServicesBluesky: #1185fe;
  --semanticSpacingPositive1100: 6rem;
  --semanticSizing650: 1.75rem;
  --semanticColorBorderDanger: #f44336;
  --semanticColorContentStatesBoldDisabled: #9e9e9e;
  --semanticColorContentStatesInverseHover: #f2f2f2;
  --semanticColorBorderOverlay: rgba(0,0,0,0.0500);
  --semanticColorServicesGoogle: #4285f4;
  --semanticSizing850: 3.5rem;
  --semanticSizing0: 0;
  --semanticColorBackgroundStatesAccentMainDisabled: #d9d9d9;
  --semanticColorBackgroundElevationBold: #121212;
  --semanticColorBackgroundStatesAccentMainHover: #30425a;
  --semanticColorBackgroundStatesElevationMediumActive: #ecedee;
  --semanticColorBackgroundStatesAccentMediumHover: #aae0b7;
  --semanticColorBackgroundStatesDangerHover: #c3362b;
  --semanticColorBackgroundAccentLight: #eaf7ed;
  --semanticColorServicesTwitterLight: #d2ecfc;
  --semanticColorDataVizNeutralLightHover: #b7c3cf;
  --semanticColorBackgroundOverlayLightest: rgba(255,255,255,0.5400);
  --semanticColorBorderAccent: #2bb24c;
  --semanticColorBorderStatesLightDisabled: #d9d9d9;
  --semanticColorBackgroundMedium: #e6e6e6;
  --semanticColorBackgroundAccentBold: #bfe8c9;
  --semanticColorServicesFeedly: #2bb24c;
  --semanticColorServicesStatesRedditDisabled: #ffa280;
  --feedly-box-shadow-light-caret: 2px 2px 8px rgb(0 0 0/8%),0px 1px 2px rgb(0 0 0/38%);
  --semanticColorContentAware: #ffca0d;
  --semanticColorBackgroundOverlayMedium: rgba(0,0,0,0.3800);
  --semanticColorBackgroundAccentMedium: #d5f0db;
  --semanticColorBorderStatesWarningHover: #cc7a00;
  --marketingColorBorderOverlayMedium: rgba(0,0,0,0.2400);
  --feedly-box-shadow-medium: 0px 2px 15px rgb(0 0 0/15%),0px 2px 8px rgb(0 0 0/8%);
  --semanticSpacingPositive600: 1.5rem;
  --semanticColorBorderStatesAccentFocus: #2bb24c;
  --semanticColorBackgroundStatesWarningDisabled: #ffcb80;
  --semanticColorContentLight: #9e9e9e;
  --semanticColorBorderStatesDangerFocus: #f44336;
  --semanticColorDataVizPrimaryMedium: #5da2c1;
  --semanticColorBorderLightest: #f2f2f2;
  --semanticColorBackgroundHighlightYellow: #fff7aa;
  --semanticColorBorderMedium: #bfbfbf;
  --semanticColorBorderStatesLightestHover: #9e9e9e;
  --semanticSpacingPositive200: 0.25rem;
  --semanticColorContentStatesBoldHover: #646464;
  --semanticColorBackgroundStatesInfoBoldHover: #6194d6;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Feedly.
Reference design system (extracted from the live site):
- Palette: #35b555, #041424, #f2f7fc, #569e67, #b6beba
- Typefaces: Aeonik Pro VF, InterVariable
- Macrostructure: Component Playground
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/feedly-com--i-top-bu-blogs

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Aeonik Pro VF

48px

400

1.17

Aa Bb Cc

Aeonik Pro VF

28px

400

1.29

Aa Bb Cc

Aeonik Pro VF

28px

400

1.29

Aa Bb Cc

body

InterVariable

16px

400

1.15

Aa Bb Cc

button

InterVariable

14px

400

1.43

Aa Bb Cc

:root { --color-dominant: #35b555; --color-surface: #041424; --color-ink: #f2f7fc; --color-accent: #569e67; --color-detail: #b6beba; } /* CSS variables exposed by source */ :root { --font-sans-serif: "InterVariable","InterVariable Fallback",sans-serif; --font-optical-sizing: auto; --semanticColorBorderStatesWarningDisabled: #ffcb80; --semanticColorBorderStatesAccentHover: #228e3d; --semanticColorBackgroundStatesLightestActive: rgba(0,0,0,0.0500); --semanticColorBackgroundDangerLight: #feeceb; --semanticColorContentBold: #333333; --semanticSizing750: 2.5rem; --semanticColorContentStatesInfoHover: #2e61a3; --semanticColorBackgroundStatesAccentMainFocus: #f2f2f5; --semanticColorBackgroundYellowMedium: #fffcdd; --semanticColorContentStatesMediumHover: #646464; --semanticColorBackgroundStatesDangerFocus: #fef6f5; --semanticColorContentStatesLightestDisabled: #646464; --semanticColorServicesBluesky: #1185fe; --semanticSpacingPositive1100: 6rem; --semanticSizing650: 1.75rem; --semanticColorBorderDanger: #f44336; --semanticColorContentStatesBoldDisabled: #9e9e9e; --semanticColorContentStatesInverseHover: #f2f2f2; --semanticColorBorderOverlay: rgba(0,0,0,0.0500); --semanticColorServicesGoogle: #4285f4; --semanticSizing850: 3.5rem; --semanticSizing0: 0; --semanticColorBackgroundStatesAccentMainDisabled: #d9d9d9; --semanticColorBackgroundElevationBold: #121212; --semanticColorBackgroundStatesAccentMainHover: #30425a; --semanticColorBackgroundStatesElevationMediumActive: #ecedee; --semanticColorBackgroundStatesAccentMediumHover: #aae0b7; --semanticColorBackgroundStatesDangerHover: #c3362b; --semanticColorBackgroundAccentLight: #eaf7ed; --semanticColorServicesTwitterLight: #d2ecfc; --semanticColorDataVizNeutralLightHover: #b7c3cf; --semanticColorBackgroundOverlayLightest: rgba(255,255,255,0.5400); --semanticColorBorderAccent: #2bb24c; --semanticColorBorderStatesLightDisabled: #d9d9d9; --semanticColorBackgroundMedium: #e6e6e6; --semanticColorBackgroundAccentBold: #bfe8c9; --semanticColorServicesFeedly: #2bb24c; --semanticColorServicesStatesRedditDisabled: #ffa280; --feedly-box-shadow-light-caret: 2px 2px 8px rgb(0 0 0/8%),0px 1px 2px rgb(0 0 0/38%); --semanticColorContentAware: #ffca0d; --semanticColorBackgroundOverlayMedium: rgba(0,0,0,0.3800); --semanticColorBackgroundAccentMedium: #d5f0db; --semanticColorBorderStatesWarningHover: #cc7a00; --marketingColorBorderOverlayMedium: rgba(0,0,0,0.2400); --feedly-box-shadow-medium: 0px 2px 15px rgb(0 0 0/15%),0px 2px 8px rgb(0 0 0/8%); --semanticSpacingPositive600: 1.5rem; --semanticColorBorderStatesAccentFocus: #2bb24c; --semanticColorBackgroundStatesWarningDisabled: #ffcb80; --semanticColorContentLight: #9e9e9e; --semanticColorBorderStatesDangerFocus: #f44336; --semanticColorDataVizPrimaryMedium: #5da2c1; --semanticColorBorderLightest: #f2f2f2; --semanticColorBackgroundHighlightYellow: #fff7aa; --semanticColorBorderMedium: #bfbfbf; --semanticColorBorderStatesLightestHover: #9e9e9e; --semanticSpacingPositive200: 0.25rem; --semanticColorContentStatesBoldHover: #646464; --semanticColorBackgroundStatesInfoBoldHover: #6194d6; }

Build a landing page in the visual style of Feedly. Reference design system (extracted from the live site): - Palette: #35b555, #041424, #f2f7fc, #569e67, #b6beba - Typefaces: Aeonik Pro VF, InterVariable - Macrostructure: Component Playground Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/feedly-com--i-top-bu-blogs