Free Shadcn UI Components, Blocks, Icons, Templates & MCP - ReUI

Design Specification — Free Shadcn UI Components, Blocks, Icons, Templates & MCP - ReUI

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FAFAFA), ink text (#000000), a vivid accent (#FF6568). Display headings use a distinct face (Noto Serif) over the body stack (Inter). Detected font weights: 100, 200, 300, 400. Detected style signatures: technical / mono accents.

Logo asset(s): https://reui.io/favicon.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Typography

Primary typeface: Inter — stack: Inter

Display / heading typeface: Noto Serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• Inter
• Roboto
• Noto Sans
• Noto Serif
• "Source Sans 3"
• Roboto Slab
• Lora
• Manrope
• IBM Plex Sans
• JetBrains Mono

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400

Line heights (by frequency)

Spacing

Borders & Radius

Animation & Motion

Transitions

• stroke-dashoffset 1100ms cubic-bezier(0.22, 1, 0.36, 1)

Easing curves

• cubic-bezier(.4, 0, 1, 1)
• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(0.22, 1, 0.36, 1)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Products”

button-secondary — sample text: “Introducing ReUI Pro with 500+ Blocks”

navigation-link

badge

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --font-inter: "Inter", "Inter Fallback";
  --font-sans: var(--font-sans);
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: var(--font-mono);
  --color-red-50: #fef2f2;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffcaca;
  --color-red-300: #ffa3a3;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-red-700: #bf000f;
  --color-red-800: #9f0712;
  --color-red-900: #82181a;
  --color-red-950: #460809;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-300: #ffb96d;
  --color-orange-400: #ff8b1a;
  --color-orange-500: #fe6e00;
  --color-orange-600: #f05100;
  --color-orange-700: #c53c00;
  --color-orange-800: #9f2d00;
  --color-orange-950: #441306;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c6;
  --color-amber-200: #fee685;
  --color-amber-300: #ffd236;
  --color-amber-400: #fcbb00;
  --color-amber-500: #f99c00;
  --color-amber-600: #dd7400;
  --color-amber-700: #b75000;
  --color-amber-800: #953d00;
  --color-amber-900: #7b3306;
  --color-amber-950: #461901;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c2;
  --color-yellow-300: #ffe02a;
  --color-yellow-400: #fac800;
  --color-yellow-500: #edb200;
  --color-yellow-600: #cd8900;
  --color-yellow-700: #a36100;
  --color-yellow-800: #874b00;
  --color-yellow-900: #733e0a;
  --color-yellow-950: #432004;
  --color-lime-100: #ecfcca;
  --color-lime-200: #d8f999;
  --color-lime-300: #bbf451;
  --color-lime-400: #9de500;
  --color-lime-500: #80cd00;
  --color-lime-600: #62a400;
  --color-lime-800: #3d6300;
  --color-lime-900: #35530e;
  --color-lime-950: #192e03;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #b9f8cf;
  --color-green-400: #05df72;
  --color-green-500: #00c758;
  --color-green-600: #00a544;
}

Do's and Don'ts

Do

• Do reserve the accent #FF6568 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FAFAFA; surfaces should stay within the detected neutral ramp.
• Do set large headings in Noto Serif, and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 200, 300, 400.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFA3A3;
  --color-accent: #FF6568;
  --color-background: #FAFAFA;
  --color-surface: #FEF2F2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #FFCACA;
  --color-border: #FEE685;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFBEB;
  --color-on-accent: #000000;
  --font-sans: Inter;
  --font-size-body-md: 16px;
  --font-display: Noto Serif;
}