NSheth Brand System

01 / Purpose

Useful things, made clearly.

NSheth is a small collaborative digital agency for websites, commerce, booking, web applications, automation and practical business tools.

Clarity first.
Motion as proof of craft.

Start with the friction.
Understand how the business really works before selecting a tool or shaping a screen.
Design for real use.
Make the path obvious, the interface calm and the underlying system dependable.
Choose for fit.
No default stack. Use the smallest maintainable system that serves the actual work.
Stay close.
Remain connected to the problem, the people and the decisions from start to finish.
Build for ownership.
The finished work should be understandable, maintainable, recoverable and genuinely useful after launch.

NSheth homepage hero with a graphite canvas, cool-white headline and Hot Rose actions — Current homepage reference / protect the message, let the authored visual system frame it.

What we can say

NSheth is a small collaborative digital agency.
We build websites, commerce, booking, web apps and automation.
The right people can join when the work needs them.
Nityam keeps the thinking connected through delivery.
Working this way since 2021, based in India.

What needs proof

Client status, role, scope and permission to publish.
Results, metrics, traffic, conversion or revenue.
Testimonials, budgets, timelines or guarantees.
Permanent team size or industry specialization.
A specific city until the current location conflict is resolved.

02 / Foundations

Graphite. Ink. One signal.

The system is dark-first and restrained. Hot Rose directs attention; it does not become the whole atmosphere.

Core palette

Semantic colors are reserved for feedback.

Canvas #0B0D0C

Surface 1 #151817

Surface 2 #202421

Ink #F2F3EF

Muted #A8AEA9

Signal #FF3D81

Signal hover #FF679D

Signal pressed #D92162

Typography

Natural spacing, real weights only.

Display XL
700 / 0.98

Make it useful.

Display M
700 / 1.06

Built around how the work really works.

Body
400 / 1.6

Neue Montreal carries display, headings, body, navigation, buttons and forms. Keep the writing short enough to breathe.

Mono label
500 / 1.3

The path / Since 2021 / Foundations

Layout and motion

Wide, asymmetric and low-density.

System	Values	Rule
Containers	77.5rem / 90rem	Standard copy width and wide interactive width.
Gutter	clamp(1.25rem, 4vw, 4rem)	Protect the edge without shrinking the composition.
Grid	12 / 8 / 4 columns	Desktop, tablet and phone. The grid stays invisible.
Copy measure	56ch max	Leads are shorter; display copy is normally 12ch or less.
Section space	80px to 256px	Use contrast and empty space instead of extra explanation.
Radii	8 / 14 / 24 / 32 / 48 / 56px	Radius follows the scale and behavior of the surface.
Timing	140 / 240 / 480 / 850ms	Feedback, state, reveal and signature transition.
Easing	cubic-bezier(.16,1,.3,1)	Use for authored entrances and major state changes.

03 / Voice

Clear, human, slightly poetic.

Use "we" for the agency. Name Nityam when personal accountability or provenance helps. Make the heading and lead do most of the work.

How it sounds

We build websites and digital tools.Plain promise
From stuck. To moving.Transformation
Clear on the screen. Reliable behind it.Paired contrast
Something worth making?Human invitation
No default stack. Only the right fit.Point of view

Writing rules

Concrete first.
Name the problem, action or system. Avoid abstract agency language.
One thought at a time.
Headlines use 4 to 12 words and no more than two visual lines.
Use active verbs.
Listen. Distil. Design. Build. Release. Clear. Choose. Fit. Move.
Do not inflate.
Call concepts, experiments and archives exactly what they are.
Stop early.
If the visual and lead already explain the scene, do not add another paragraph.

cutting-edgeworld-classgame-changinginnovative solutionsbringing ideas to life

04 / Page language

One system. Different ideas.

Every route shares the brand foundation but earns its own visual premise. Do not copy one page's interaction onto the next.

Home
/

Promise -> capability -> craft -> process -> model -> conversation.

Focal idea
Objects settle around a protected conversion panel.

Signature
Pulse service scene, Dino craft moment and contained morphing menu.

Keep
One-viewport hero, two actions, five services, five steps and direct contact.
Services
/services/

Friction -> route -> intervention -> connected system -> action.

Focal idea
A project film with real screens and five oversized action words.

Signature
Two-image service scenes for Websites, Commerce, Booking, Web apps and Automation.

Keep
Client-facing problems and connections, never five generic equal cards.
Technology
/technology/

Changing tools -> deliberate fit -> purpose-led vocabulary -> ownership.

Focal idea
A working Stackroom instrument organized by purpose, not prestige.

Signature
Optical type, a restrained word magnet and a pale ownership close.

Keep
Fit, maintainability and handover. Never add proficiency scores or a logo wall.
Work
/work/

Useful evidence -> orbit -> archive -> inspection -> conversation.

Focal idea
Real project screens orbit, flatten into a contact sheet and open for inspection.

Signature
Truthful labels, top-anchored crops and a native-scroll screenshot dialog.

Keep
JSON as the source of truth. Publish links, roles and outcomes only when verified.

05 / Components

Repeat the rules, not the layout.

Reuse tokens, semantics, control states and accessibility. Let each new page find one visual idea of its own.

Actions

Start something See the pages Quiet action

Primary is Hot Rose with graphite text. Secondary uses Surface 2. Keep one label for each action intent.

Form fields

The path

From a thought to something real.

Five clear steps. No mystery.

An eyebrow is optional and must add metadata. It never repeats the heading.

Scene formula

Enter.
Make the focal element available without a blank band.
Settle.
Give the scene a complete, readable resting state.
Interact.
Use motion for focus, feedback, sequence or state.
Exit.
Hand off cleanly without competing with the next section.

06 / HTML recipe

Start semantic. Enhance locally.

This is the repeatable baseline for a new NSheth page. In production, use the shared PHP header and footer rather than duplicating them.

Page skeleton

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#0b0d0c">
    <title>Useful page title | NSheth</title>
    <link rel="stylesheet" href="/assets/css/app.css">
</head>
<body>
    <a class="skip-link" href="#main-content">Skip to content</a>

    <header class="site-header">
        <a class="wordmark" href="/" aria-label="NSheth home">NSheth</a>
        <button type="button" aria-expanded="false"
                aria-controls="site-menu">Menu</button>
    </header>

    <main id="main-content">
        <section aria-labelledby="page-title">
            <div class="u-container-wide">
                <p class="u-mono-label">Useful metadata</p>
                <h1 id="page-title">One clear promise.</h1>
                <p class="u-measure">One short lead that changes understanding.</p>
                <a class="button button--primary" href="/#contact">
                    Start something
                </a>
            </div>
        </section>
    </main>

    <footer class="site-footer">...</footer>
</body>
</html>

Token baseline

:root {
    color-scheme: dark;
    --color-canvas: #0b0d0c;
    --color-surface-1: #151817;
    --color-surface-2: #202421;
    --color-ink: #f2f3ef;
    --color-ink-muted: #a8aea9;
    --color-hairline: rgb(242 243 239 / 12%);
    --color-signal: #ff3d81;
    --color-signal-hover: #ff679d;
    --color-signal-pressed: #d92162;

    --font-sans: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --container-wide: 90rem;
    --measure-copy: 56ch;
    --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
}

.u-container-wide {
    width: min(var(--container-wide), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Implementation order

1. Give the route one useful content job.
2. Write a factual headline and short lead.
3. Choose one focal visual idea.
4. Build complete semantic HTML first.
5. Apply shared tokens, type, spacing and controls.
6. Add one dominant motion layer only if it communicates meaning.
7. Create mobile, keyboard, reduced-motion and no-JS states.
8. Verify metadata, assets, overflow, focus and truthful claims.

07 / Release check

Complete without excess.

A page is on-brand when its purpose, language, interaction and fallback states all tell the same story.

Must keep

One clear page job and one focal idea.
Graphite canvas, cool-white hierarchy and restrained Hot Rose signals.
Semantic headings, landmarks, labels and native controls.
At least 44px touch targets and visible keyboard focus.
Complete mobile, reduced-motion, coarse-pointer and no-JS content.
Local assets, reserved image dimensions and no build requirement.
Unique metadata, canonical URL and factual structured data.
Verified claims, links, roles and project labels only.

Must avoid

Generic templates, equal card rows and copied page structures.
Visible graph paper, blueprint, grid-line or lined textures.
Large pink washes, diffuse pink fog and decorative gradients.
Multiple dominant effects in one viewport.
Hover-only controls, dead interactions or touch scroll hijacking.
Technology logo walls and unsupported proficiency claims.
Remote fonts, icons, Framer, React or CDN production runtime.
Fake clients, metrics, outcomes, testimonials or case studies.

assets/css/tokens.css
assets/css/fonts.css
assets/css/utilities.css
includes/header.php
includes/footer.php
docs/site-direction.md
docs/design-system.md
work/projects.json

Brand system.