Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Resintoi™
Resintoi™ is a sustainability-focused consultancy template built around a confident, earthy duality: a warm off-white canvas for editorial clarity, and a deep forest-green dark surface for immersive hero and testimonial sections. The palette draws from the natural world — mossy dark tones, chalky neutrals, and a single electric mint accent — evoking both environmental credibility and forward-thinking intelligence. The typography is anchored by Aspekta, a geometric sans-serif used across headings, body, and buttons, paired with Fragment Mono exclusively for uppercase labels and micro-metadata — creating a sophisticated editorial rhythm between organic warmth and technical precision. GSAP-powered entrance animations (translate3d + opacity fades) give every section a deliberate, unhurried arrival, reinforcing the brand's ethos of measured, meaningful action.
Sections from Resintoi
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Business Hero with Marquee
View section
Hero Section with Contact Card
View section
Interactive Tabs with Statistics
View section
Global Map with Video Portraits
View section
Rotating Image Grid Hero Section
View section
Hero Section with Marquee
View section
Mobile Navigation Mega Menu
View section
Services Grid with Statistics Section
View section
Footer with Logo Marquee
View section
Gallery with Content Section
View section
Case Studies Grid Layout
View section
FAQ Section with Expandable Items
View section
Colors
Canvas
Chalk Lift
#eeefed
Lifted card surface. Used for feature tiles, tab backgrounds, and secondary section fills.
Parchment Mist
#f7f7f5
Base page canvas. Default background for all content sections and the navbar.
Stone Lift Higher
#e2e3e2
Higher-elevation card surface. Contact tiles, hover states on lifted components.
Ink
Moss Veil
#222f3052
Overlay & glass tile medium. Semi-transparent overlays on hero images and floating contact tiles.
Faded Canopy
#222f30a3
Subtle body text & muted tone. Secondary paragraphs, dimmed headings, and de-emphasized labels.
Forest Vault
#222f30
Primary dark surface & ink. Hero backgrounds, primary buttons, footer overlays, and all headline text on light surfaces.
Accent
Electric Sprout
#6beb7e
Brand accent & interactive signal. Accent buttons, brand plus icon, label icons, and status dots.
State — utility only
Coral Alert
#ed7472
Error state indicator. Form validation errors and destructive feedback only.
Amber Caution
#d5ad4b
Warning state indicator. Cautionary notices and in-progress status signals.
Verdant Confirm
#5cce63
Success state indicator. Form confirmation, positive feedback, and completion signals.
Typography
The quick brown fox jumps
Primary typeface for all headings, body copy, and buttons. Geometric sans-serif that bridges warmth and precision.
The quick brown fox jumps
Monospace label typeface exclusively for uppercase micro-labels, tags, and metadata callouts.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1920pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160px--spacing-180
180px--spacing-200
200pxBorder radius
full9999pxtags6pxcards16pxinputs8pxbuttons32pxcards-large24pxbuttons-circle24pxsection-rounded60pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Parchment Mist
Level 2Chalk Lift
Level 3Stone Lift Higher
Level 4Forest Vault
Do's and don'ts
- Use a 32px border-radius on all primary and secondary pill buttons consistently — the rounded pill shape is a core brand signature across every CTA.
- Apply the Forest Vault dark surface (#222f30) to hero panels and testimonial sections to create dramatic light/dark contrast against the Parchment Mist page canvas.
- Reserve Electric Sprout (#6beb7e) exclusively for the brand plus-icon motif, accent button fills, label icons, and live-status indicators — never use it as a text color on white.
- Set all section labels in Fragment Mono at uppercase with 0.046rem letter-spacing — this mono/sans typographic pairing is the brand's primary editorial signature.
- Use GSAP translate3d(0, 50px, 0) + opacity:0 entrance animations on all major content blocks; stagger reveals give the site its measured, intelligent pace.
- Apply backdrop-filter: blur(10px) to all glass tiles (contact cards, overlay chips) on dark or image backgrounds to maintain legibility and texture depth.
- Maintain the 48px padding on hero and testimonial wrap elements — generous internal breathing room reinforces the premium, spacious feel of the brand.
- Do not introduce saturated colors from outside the palette — the Coral, Verdant, and Amber hues are strictly for state/feedback use, never decorative.
- Do not use font-weight above 400 (normal) for Aspekta headings — the entire typographic hierarchy is achieved through size and letter-spacing alone, not weight.
- Do not apply the Electric Sprout accent as a large fill color on sections or backgrounds — it exists only as a small-scale signal element.
- Do not nest card surfaces beyond two levels on the light canvas — Chalk Lift on Parchment Mist is the limit; avoid Stone Lift Higher in light-mode card stacks.
- Do not use the section-rounded radius (60px) on anything smaller than a full-width navigation panel or footer flow — applying it to cards or buttons breaks the scale hierarchy.
- Do not set body copy in Fragment Mono — it is exclusively a label and micro-metadata typeface; all paragraphs and body text must use Aspekta.
- Do not place text directly over hero images without the Forest Vault overlay gradient — always layer the dark gradient before typography to guarantee contrast.
- Do not skip the marquee fade-shadow gradients on logo strips — the linear gradient edges are essential to the polished, infinite-scroll illusion.
Example prompts
New hero section (light variant)
Dark feature card
Section label + heading pattern
Primary CTA button
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide