Skip to content
Startad
List your site or app

Design system

The system behind Startad, documented as it is built.

Every value on this page is the value the interface actually uses. Tokens live in src/app/globals.css; components live in src/components.

01

Principles

  • One typographic weight ceiling: medium (500). Bold and semibold are never used.
  • Colour is either ink, a neutral surface, or a pale accent — no saturated fills.
  • Icons carry meaning. If a label already says it, the icon goes.
  • Motion is grouped per section and never decorative; reduced motion is respected.
  • Demo data is always labelled where it appears, in the interface, not just the footer.
02

Brand Identity & Symbol · The Open Frame

Official Brand IdentityThe Continuous Ribbon · Design System Specimen

Startad Master Symbol & Lockup

The official trademark mark for Startad, an India-first marketplace connecting advertisers directly with independent website publishers. Built strictly using src/app/globals.css tokens, with strict 400 and 500 font weights, chromatic gradient continuity, and tight lockup spacing.

Select Colorway Token Profile:
Startad

Direct Access to Publishers

Production Colorway Palettes

Derived strictly from globals.css tokens

Gradient Flow

Peach + Orchid + Lavender

Dark Ink

Solid Ink (#191919)

Light Inverse

White on Ink

Tonal Slate

Ink + Muted Grayscale

Official Wordmark Lockups

Strict 500 font-weight ceiling, snug icon-to-wordmark spacing, and dynamic brand name from siteConfig.

Component: <Wordmark />
Primary Standard (Light Canvas)

Default for navigation headers, documents, and light UI contexts.

Startad
colorway="dark" · size="md"
Inverse Mode (Dark Canvas / Footer)

Crisp neutral white mark and text for dark sections and the footer.

Startad
colorway="light" · size="md"
Chromatic Symbol + Neutral Wordmark

Coordinated separate colorway: multi-color symbol with high-contrast ink text.

Startad
symbolColorway="signature" textColorway="ink"
Browser Chrome & Favicon16 × 16 px In-Situ

High-contrast negative space aperture ensures instant recognition in browser tab strips.

Startad — Direct Marketplace
https://startad.in/websites/the-design-edit
Viewport: Safari / Chrome 16pxZero blurring on 1x / 2x
Mobile OS Home Screen & App IconContinuous Squircle

Continuous curvature mask for mobile home screens, web clip icons, and notifications.

9:41
5G

Startad

Direct website advertising marketplace

Version 1.0 · PWA Ready
Mask: Continuous curvature r=22.5%Retina 3x ready

Multi-Scale Optical Legibility Test

Evaluating the symbol across critical reproduction sizes: 16px, 24px, 32px, 48px, 64px, and 128px.

Active: gradient
16px
24px
32px
48px
64px
128px
Optical evaluation: The continuous 30° isometric projection and continuous curvature fillets maintain clean pixel alignment, with zero line muddiness even at compact 16 × 16px favicon constraints.

Exported Asset Kit

Vector and raster exports, generated from the same source of truth as the mark above.

pnpm brand
03

Colour

Background

--color-background

#F8F7F8

Surface

--color-surface

#FFFFFF

Foreground

--color-foreground

#191919

Foreground secondary

--color-foreground-secondary

#6F6B75

Foreground muted

--color-foreground-muted

#94909A

Border

--color-border

#E9E5EC

Border strong

--color-border-strong

#DCD6E2

sd-lav

--color-sd-lav

#E6DDF8

sd-peach

--color-sd-peach

#F5E5D9

sd-sky

--color-sd-sky

#DCE8F8

sd-lav-100

--color-sd-lav-100

#F4ECFA

sd-peach-100

--color-sd-peach-100

#FCF4EE

sd-sky-100

--color-sd-sky-100

#F0F6FD

Ambient gradients

.bg-ambient-hero — peach to canvas to lavender to sky, 115deg

.bg-ambient-cta — lavender surface to warm white to pale blue, 105deg

Contrast

  • Ink on canvas: 15.8:1
  • Ink secondary on canvas: 5.0:1
  • Ink muted on canvas: 3.1:1 — labels only, never body copy
  • Focus ring: 2px ink outline, 2px offset, on every interactive element
04

Typography

Aa Bh 123

text-hero

Home headline only

Aa Bh 123

text-display

Section-opening headlines

Aa Bh 123

text-section

Section headings

Aa Bh 123

text-title

Page titles, listing names

Aa Bh 123

text-card

Card titles

Aa Bh 123

text-body

Body copy

Aa Bh 123

text-lead

Introductions and lead paragraphs

Aa Bh 123

text-meta

Labels, captions, table meta

Geist, self-hosted as a variable font and subset to the weights the design permits: 400 for body copy and 500 for anything that needs emphasis.

05

Motion

  • Control response

    Buttons, links, inputs, tab changes

    140ms

  • Panel transition

    Dialogs and the mobile menu sheet

    200ms

  • Section reveal

    One grouped reveal per section

    320–440ms

  • Easing

    Used everywhere

    cubic-bezier(0.22, 1, 0.36, 1)

Under prefers-reduced-motion transitions collapse to 0.001ms and every reveal renders in its final state with no transform.

06

Components

Buttons

primary · secondary · outline · ghost · link

Button sizes

sm · default · lg · icon

Button loading states

loading prop with Arc spinner

Badges

category · accent · availability

DesignIllustrative demo listingNewsletter sponsorAvailableLimitedBooked

Tabs

category filters on the home page

FormField & Input states

default · error · shake · disabled · help text

Default state

With help text

At least 8 characters

Error state

Shake animation trigger

Disabled state

PasswordInput states

default · error · show/hide toggle · disabled

Default with animated eye & strength meter

Error state

Shake animation trigger

Disabled state

Identity

brand mark · wordmark

Startad

Role gradient placeholders

profile placeholder per account role

Role gradients

publisher · advertiser · unknown fallback

PublisherLavender gradientAdvertiserPeach gradientNo role yetSky gradient

With monogram

derived from the display name

Size scale

xs · sm · md · lg · xl · 2xl

xssmmdlgxl2xl

Ring treatments

none · soft · ink

Flat

ambient glow suppressed for dense lists

Card, closed

A surface with a hairline border and no shadow.

1rem radius, 1px line, white on canvas.

Card, ambient

Reserved for the closing call to action.

Card, dashed

Empty states and secondary prompts.

07

Iconography

  • Search the listings

  • A reassurance point, never a bullet for decoration

  • See the placement before enquiring

  • Published pricing

  • Choose by audience

  • Demo-data or accuracy note

  • Leads to more, always navigational

Lucide, 18px in body contexts and 14–16px inline. Icons are never the only label, and never used as a pattern or texture.

08

Routes

  • /

    Landing page and marketplace browse

  • /websites/:slug

    Single listing with its placements

  • /about

    What Startad is, and what this build is

  • /contact

    Enquiry topics; the contact channel is not open yet

  • /privacy

    Data handling for a site that collects nothing

  • /terms

    Listing and no-payment terms

  • /design

    This page

09

Accessibility

  • A skip link precedes the header on every route.
  • Dialogs and the mobile sheet are Base UI primitives: focus trap, Escape to close, labelled titles.
  • Availability is text with a coloured dot, never colour alone.
  • The marketplace status line announces the number of results after filtering.
  • Decorative artwork is either empty-alt or aria-hidden, never a duplicate of adjacent text.
10

Illustration & Asset System

Brand Asset Kit

public/brand/{symbol,lockup} · SVG + PNG (512 / 1024)

The folded-ribbon mark and its wordmark lockups in five colourways, exported as vector and raster from one source of truth. Favicon and app icons live at public/favicon.svg and public/icons/.

Editorial Website Previews

/img/websites/*.svg

High-fidelity editorial publication artwork for The Design Edit, Circuit & Co., The Daily Table, Trail & Tide, Ledger Notes, and The Tool Shelf.

Social Share Card

/og/startad-og.png (1200 × 630)

The Open Graph card embeds the real folded-ribbon mark, so link previews carry the current identity rather than a retired mark.

Generated, Not Hand-Edited

pnpm brand · pnpm og

Every asset above is written by a generator script from the shared brand module, so the product, the exported kit, and the social card can never drift apart.

11

Narrative Storyboard & Motion

  1. 01Stage 1: Marketplace IntroductionHero section with warm peach-lavender atmosphere, editorial browser mockup, floating placement slot & audience summary.
  2. 02Stage 2: Discovery SceneCurated publication ribbon leading into live category filtering and search.
  3. 03Stage 3: Placement DemonstrationSelected publication expands into detailed placement specs (dimensions, duration, fixed rupee rates).
  4. 04Stage 4: Advertiser Journey3-stage progression from niche search to in-situ placement preview to pre-drafted direct enquiry.
  5. 05Stage 5: Publisher StudioReversed layout showing direct control over placements, audience transparency, and incoming enquiries.
  6. 06Stage 6: Illustrated Landscape FooterPreceding content smoothly transitions into the panoramic mountain artwork with the editorial note 'Meaningful placements, thoughtfully connected.'