Style Guide Tokens • Components • Layout

Renewt3ch UI + Brand System

Reference for the Renewt3ch template: core tokens, typography, UI components, and layout patterns. Designed to map cleanly into Webflow classes if you rebuild later.

Tokens

Edit global styling in /assets/css/main.css under :root.

Canonical palette (must match Brand Guide): #0C85FF (blue), #2FF3E0 (aqua), #111111, #151515, #222222, #FFFFFF.

--bg #111111

--bg-elev #151515

--slate #222222

--blue #0C85FF

--aqua #2FF3E0

--fg #FFFFFF

Typography

Headings use Poppins. Body uses Inter. Kickers use Space Grotesk.

Heading scale

H1 Example Title

H2 Section Title

H3 Component Title

Muted copy uses .muted.

Body copy

This is regular body text. Keep paragraphs within ~60–75 characters per line for readability.

This is muted copy for supporting content like captions, subtext, or secondary labels.

Badge Accent Badge

Buttons

Use 1–2 primary CTAs per page. Avoid CTA overload.

Primary Alt Glow Ghost

Tip: Use .cta-row for consistent spacing.

Cards

Cards are the primary surface for features, pricing, and content blocks.

Feature card

Use for feature lists and value props.

Standard

Content card

Use for blurbs, docs, or small blocks of info.

Secondary Primary

Popular

Pricing card

$49

All logos (SVG)
CSS tokens
Docs + handoff

Choose plan

Forms

Inputs use .input and are styled for dark UI.

Preview thumbs

Used as fallback tiles in previews/brand docs.

Inter

System-ready body font

Layouts

Use .container, .grid, .section, and .section-tight for consistent rhythm.

Grid 2

Use for content + visual, forms + copy, or side-by-side sections.

Grid 3

Use for features, pricing, and icon tiles. Collapses responsively.

Keyboard notes

Mobile menu: ESC closes, Tab cycles focus while open. Click outside closes.

Logo previews

Use dark tiles for the default set. Use light tiles only for black marks.