◳ design system v1 · back to set
Creatisoul design system · v1

“Blueprint” — every element, drawn to measure.

The single source for Creatisoul's visual language: color, type, components and patterns. Pages don't invent design — they compose it from here.

COLOR · brand guide v1 TYPE · Instrument Serif + Sans + Spline Mono VOICE · brand-personality.md MOTIF · blueprint grid + glow + grain
01 Color02 Typography03 Motifs04 Buttons 05 Labels06 Section headings07 Cards08 Stats 09 Dark stage10 Ad card11 Forms12 Accordion13 CTA band
Fig. 01 / Color

Color

Creatisoul Blue anchors. Orange is the single action color per screen. Cyan only decorates. The blue→orange gradient appears once per section — on the hero accent or a stat numeral, never both.

Creatisoul Blue#1116DF · buttons, links, anchors
Blue Dark#0B0FA6 · hover, dark bands
Blue Light#4449E5 · gradients, fills
Energy Orange#FF6C00 · ONE action / screen
Orange Dark#E05E00 · hover state
Sky Cyan#00C3FF · decorative only
Deep Navy#05071F · dark stages
Ink#1E293B · text
Signature gradientblue→orange 90° · 1×/section
Fig. 02 / Typography

Typography

Serif says “we publish and we know”. Sans does the work. Mono measures. Sentence case everywhere — no Title Case Shouting.

Display XL
Instrument Serif 400
clamp 44–72 · lh 1.04 · ls −1.2%
We turn ad budgets into site visits.
Display L / H2
Instrument Serif 400 · 34–46
Six services. One growth system.
H3 / card titles
Instrument Sans 600 · 17–19
Launch campaigns measured in site visits, not clicks
Body
Instrument Sans 400 · 16.5 · lh 1.65
Honest answer: most builder engagements run ₹50,000–₹2,00,000 per month per channel, plus ad spend. The full ranges are on our pricing page — we publish them.
Eyebrow / label
Spline Sans Mono 500 · 11–12 · track .22em
Real estate digital marketing · India
Serif italic pull
quotes & emphasis
“They rebuilt our entire online presence — and the enquiries followed.”
RULE serif for display ≥28px only — below that, Sans 600RULE one gradient accent or one marker underline per headline, never both
Fig. 03 / Motifs & atmosphere

Blueprint motifs

Three layers create depth without photos: the cyan blueprint grid (architecture), soft color glows (energy), and film grain (texture). Light pages stay light; dark stages get all three.

+ +
GRID 56–64px · cyan @ 5–9% · masked radially
GLOW cyan top / orange bottom · blur 90–110px
GRAIN SVG turbulence @ 5% · dark stages only
Fig. 04 / Buttons & links

Buttons

Pills only. Orange is the one conversion action on screen; blue for everything else important; the arrow-circle is the signature “next step” affordance.

Marketing for builders Explore the service
RULE CTAs say what happens (“plan in 48 hours”), never “Get started”HOVER lift −2px · darken · arrow slides
How it works
ON DARK orange + white-fill + arrow-circle
Fig. 05 / Labels & badges

Labels

Free tool Flagship Case study AI VIDEO · 0:14 For builders Pune · 2026
FONT Spline Mono 500 · 10px · track .16emBRACKET style for metadata, solid for status
Fig. 06 / Section heading pattern

Section headings

Every section opens the same way: numbered eyebrow → serif headline (one accent max) → one-paragraph lede. The number gives the page a table-of-contents rhythm.

03 — WHO WE HELP
Who we help

Built for both sides of Indian real estate.

Builders sell projects. Brokers sell trust. Each gets its own playbook, team and benchmarks.

LIGHT variant
05 — THE UNFAIR ADVANTAGE
The unfair advantage

An AI creative engine your competitors don't have.

Most agencies brief a designer and wait a week. Our platform never stops.

DARK variant · marker underline instead of gradient
Fig. 07 / Cards

Cards

One family, three jobs: service cards (gradient reveal on hover), bento features (one electric cell per grid, max), and serif-voiced testimonials.

AI ad creatives & video

Our in-house AI engine turns renders and listings into scroll-stopping statics and films. 20 variants, not 2.

Explore →
SERVICE CARD hover: lift + gradient top-rule reveals

“The AI films stopped the scroll. We pre-sold 40% of phase one before the sample flat was ready.”

Sales DirectorTownship project, Hyderabad
TESTIMONIAL serif quote · oversized ghost “ mark
20×Creative variants per campaign
Films for unbuilt projects

AI experience films turn renders into walkthroughs buyers can feel.

Winning-format library

Creative built on formats proven across real campaigns.

BENTO one electric cell per grid — it carries the energy
Fig. 08 / Stats & data

Stats

Numbers are the brand's proof — serif numerals with the signature gradient, mono captions, and a blueprint dimension-line that says “measured”.

₹12Cr+Ad spend managed
38%Avg. drop in cost per site visit
11,000+Buyer leads delivered · shimmer = hero stat
Fig. 09 / Dark stage

The dark stage

For the sections that must feel like the future — AI engine, final CTA. All three motif layers + glassmorphism stat chips. Maximum two dark stages per page.

The unfair advantage

An in-house AI creative engine your competitors don't have.

Statics, reels and experience films — generated, tested and replaced continuously.

0:14Experience film · unbuilt tower
Fig. 10 / Ad-card component

The ad card

Our hero artefact — a CSS-built Meta ad showing the product itself. Used fanned in heroes, single in service pages, gridded in the ad library.

Aranya HeightsSponsored · 🌐
AI VIDEO · 0:14
Walk the tower before it's built — the AI experience film.
👍 4.8k · 💬 312Get brochure

Anatomy: advertiser row → media with AI provenance tag → one-line hook in the brand voice → engagement row + CTA pill.

Media uses CSS skyline renders (navy silhouettes on gradient skies) until real campaign creative replaces them.

Fig. 11 / Forms

Forms

Calm fields, one orange submit, microcopy that promises a response time. Focus ring is blue at 10%.

Usually answered the same business day.
RULE always offer WhatsApp alongside the form
Fig. 12 / Accordion (FAQ)

Accordion

How much does real estate digital marketing cost in India?
Honest answer: most builder engagements run ₹50,000–₹2,00,000 per month per channel, plus ad spend. The full ranges are on our pricing page — we publish them.
Should we stop buying portal leads (99acres, MagicBricks)?
Not on day one. We usually run both for a quarter, then shift budget as your own funnel beats the portal's cost per site visit.
AEO RULE the answer's first 40–60 words must stand alone
Fig. 13 / CTA band

CTA band

Tell us about your project.
Get a written plan in 48 hours.

Creatisoul · “Blueprint” design system v1 · 2026-06-10 · pairs with docs/brand/brand-guide.md + brand-personality.md