№ lucide-dev--icons-hd

Lucide

Cool, technical grid — crisp sans-serif geometry on a muted, spacious expanse.

Portfolio Gridminimalism swiss monochrome futurist developer toolslight

The page uses a clean, grid-based layout with a focus on showcasing the product's features. Typography is clean and geometric, with a limited color palette emphasizing shades of gray and a touch of pink. The overall mood is efficient and straightforward. · icon library, design system, vector icons, ui icons, lucide, developer tools, icon set, scalable icons, modern icons, icon examples

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: monochrome · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#dc5c5c
OKLCHoklch(63.8% 0.161 23)
RoleDominant
find sites →
Hex#6d1717
OKLCHoklch(35.4% 0.120 26)
RoleSurface
find sites →
Hex#ef7070
OKLCHoklch(69.6% 0.157 22)
RoleInk
find sites →
Hex#8a8c92
OKLCHoklch(64.0% 0.009 271)
RoleAccent
find sites →
Hex#bcbcbf
OKLCHoklch(79.6% 0.004 286)
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	Inter	16px	400	1.5	Aa Bb Cc
h2	Inter	16px	600	1.5	Aa Bb Cc
h3	Inter	21px	500	1.14	Aa Bb Cc
body	Inter	16px	400	1.5	Aa Bb Cc
button	Inter	13px	400	1.8	Aa Bb Cc

Spacing scale

16px

24px

32px

48px

64px

Radius scale

0px

6px

8px

11px

12px

20px

Container

Max content width 1376px

Export

:root {
  --color-dominant: #dc5c5c;
  --color-surface: #6d1717;
  --color-ink: #ef7070;
  --color-accent: #8a8c92;
  --color-detail: #bcbcbf;
}

/* CSS variables exposed by source */
:root {
  --vp-local-nav-bg-color: #ffffff;
  --vp-c-text-3: #929295;
  --vp-button-brand-active-border: transparent;
  --vp-a11y-warning: #da9200;
  --vp-badge-info-bg: rgba(142, 150, 170, .14);
  --vp-code-line-height: 1.7;
  --vp-c-note-1: #f67373;
  --vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --vp-code-line-number-color: #929295;
  --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
  --docsearch-icon-stroke-width: 1.4;
  --vp-c-warning-1: #915930;
  --vp-sidebar-width: 272px;
  --vp-c-brand-4: #dc5a5a;
  --vp-home-hero-name-background: transparent;
  --docsearch-footer-background: #fff;
  --vp-custom-block-info-code-bg: rgba(142, 150, 170, .14);
  --vp-code-tab-hover-text-color: #3c3c43;
  --vp-custom-block-caution-text: #3c3c43;
  --docsearch-hit-height: 56px;
  --docsearch-modal-height: 600px;
  --vp-c-tip-3: #f56565;
  --vp-c-note-soft: rgba(100, 108, 255, .14);
  --vp-button-alt-text: #3c3c43;
  --docsearch-spacing: 12px;
  --vp-code-line-warning-color: rgba(234, 179, 8, .14);
  --vp-button-brand-active-text: #ffffff;
  --vp-c-default-3: #ebebef;
  --vp-custom-block-caution-border: transparent;
  --vp-custom-block-details-border: transparent;
  --vp-code-font-size: .875em;
  --docsearch-hit-active-color: #fff;
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
  --vp-custom-block-details-bg: rgba(142, 150, 170, .14);
  --vp-custom-block-tip-text: #3c3c43;
  --vp-nav-bg-color: #ffffff;
  --vp-code-editor-keyword: #d73a49;
  --vp-button-sponsor-hover-bg: transparent;
  --vp-c-success-1: #18794e;
  --docsearch-searchbox-focus-background: #fff;
  --vp-local-search-bg: #ffffff;
  --vp-c-indigo-2: #3a5ccc;
  --vp-code-block-bg: #f6f6f7;
  --vp-c-brand-lighter: #f89191;
  --vp-button-alt-hover-border: transparent;
  --docsearch-hit-background: #fff;
  --vp-button-brand-active-bg: #f67373;
  --vp-code-block-divider-color: #e2e2e3;
  --vp-c-important-soft: rgba(159, 122, 234, .14);
  --vp-local-search-result-selected-border: #f67373;
  --vp-code-block-color: #67676c;
  --vp-c-neutral-inverse: #ffffff;
  --vp-c-yellow-soft: rgba(234, 179, 8, .14);
  --vp-badge-tip-text: #f67373;
  --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
  --vp-c-danger-soft: rgba(244, 63, 94, .14);
  --vp-badge-info-text: #67676c;
  --vp-c-divider: #e2e2e3;
  --vp-c-note-3: #f56565;
  --vp-c-important-2: #7e4cc9;
}

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 Lucide.
Reference design system (extracted from the live site):
- Palette: #dc5c5c, #6d1717, #ef7070, #8a8c92, #bcbcbf
- Typefaces: Inter
- Macrostructure: Portfolio Grid
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/lucide-dev--icons-hd

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

16px

400

1.5

Aa Bb Cc

Inter

16px

600

1.5

Aa Bb Cc

Inter

21px

500

1.14

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

button

Inter

13px

400

1.8

Aa Bb Cc

:root { --color-dominant: #dc5c5c; --color-surface: #6d1717; --color-ink: #ef7070; --color-accent: #8a8c92; --color-detail: #bcbcbf; } /* CSS variables exposed by source */ :root { --vp-local-nav-bg-color: #ffffff; --vp-c-text-3: #929295; --vp-button-brand-active-border: transparent; --vp-a11y-warning: #da9200; --vp-badge-info-bg: rgba(142, 150, 170, .14); --vp-code-line-height: 1.7; --vp-c-note-1: #f67373; --vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; --vp-code-line-number-color: #929295; --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16); --docsearch-icon-stroke-width: 1.4; --vp-c-warning-1: #915930; --vp-sidebar-width: 272px; --vp-c-brand-4: #dc5a5a; --vp-home-hero-name-background: transparent; --docsearch-footer-background: #fff; --vp-custom-block-info-code-bg: rgba(142, 150, 170, .14); --vp-code-tab-hover-text-color: #3c3c43; --vp-custom-block-caution-text: #3c3c43; --docsearch-hit-height: 56px; --docsearch-modal-height: 600px; --vp-c-tip-3: #f56565; --vp-c-note-soft: rgba(100, 108, 255, .14); --vp-button-alt-text: #3c3c43; --docsearch-spacing: 12px; --vp-code-line-warning-color: rgba(234, 179, 8, .14); --vp-button-brand-active-text: #ffffff; --vp-c-default-3: #ebebef; --vp-custom-block-caution-border: transparent; --vp-custom-block-details-border: transparent; --vp-code-font-size: .875em; --docsearch-hit-active-color: #fff; --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); --vp-custom-block-details-bg: rgba(142, 150, 170, .14); --vp-custom-block-tip-text: #3c3c43; --vp-nav-bg-color: #ffffff; --vp-code-editor-keyword: #d73a49; --vp-button-sponsor-hover-bg: transparent; --vp-c-success-1: #18794e; --docsearch-searchbox-focus-background: #fff; --vp-local-search-bg: #ffffff; --vp-c-indigo-2: #3a5ccc; --vp-code-block-bg: #f6f6f7; --vp-c-brand-lighter: #f89191; --vp-button-alt-hover-border: transparent; --docsearch-hit-background: #fff; --vp-button-brand-active-bg: #f67373; --vp-code-block-divider-color: #e2e2e3; --vp-c-important-soft: rgba(159, 122, 234, .14); --vp-local-search-result-selected-border: #f67373; --vp-code-block-color: #67676c; --vp-c-neutral-inverse: #ffffff; --vp-c-yellow-soft: rgba(234, 179, 8, .14); --vp-badge-tip-text: #f67373; --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); --vp-c-danger-soft: rgba(244, 63, 94, .14); --vp-badge-info-text: #67676c; --vp-c-divider: #e2e2e3; --vp-c-note-3: #f56565; --vp-c-important-2: #7e4cc9; }

Build a landing page in the visual style of Lucide. Reference design system (extracted from the live site): - Palette: #dc5c5c, #6d1717, #ef7070, #8a8c92, #bcbcbf - Typefaces: Inter - Macrostructure: Portfolio Grid 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/lucide-dev--icons-hd