#101C3D
Ink
Primary text, dark sections, primary actions
Design system · Version 1.0
The operating system behind the interface.
Basketane feels like a precise working document: graph paper, fountain ink, brass annotations, serif authority, and human handwriting. Every component should feel considered, useful, and quietly alive.
01
Color foundations
A light editorial canvas anchored by deep blue ink and one restrained brass moment. Accent colors have jobs, not decorative freedom.
#55617C
Ink soft
Secondary copy and quiet labels
#1B2E8A
Accent
Links, active states, technical geometry
#C08A1E
Brass
Section markers, rules, high-value moments
#F2E4C4
Brass soft
Marker strokes and selected surfaces
#DBE3F2
Grid
Graph-paper rules
#C6D3EC
Grid strong
Borders, dividers, alignment guides
#FFFFFF
Paper
Primary canvas and component surface
One brass moment
Brass marks hierarchy, price, section numbering, and technical annotation. It should remain rare enough to retain meaning.
Surfaces stay flat
Use rules, spacing, and type weight before shadows. Cards are reserved for bounded decisions such as checkout or cohort data.
02
Typography
Four complementary voices create the hierarchy: Spectral for thought, Space Grotesk for interface, Caveat for human annotation, and JetBrains Mono for systems data.
We build operating systems.
Practical systems combine proven workflows, prompts, automations, and live learning into a new way of working.
one cage, eight bonds
Register for Marketing OS →
03 · BATCH 01 · LIVE ONLINE
03
Spacing & layout
The 28px graph cell is the visible rhythm. Component spacing uses a practical scale that nests cleanly inside it.
04
4px08
8px12
12px16
16px24
24px28
28px40
40px64
64px96
96px132
132pxDesktop canvas: 1440px maximum with a 1160px content lane and 140px gutters.
Responsive rule: preserve hierarchy, then stack columns. Never scale the desktop composition down as a single object.
04
Components
Components are quiet, precise, and content-led. States use contrast, border, and small movement instead of ornamental effects.
Tags & statuses
Live weekend cohortBeginner friendlyLimited seatsTeams OS
Cohort details
Batch 01- Format
- Live online
- Investment
- ₹5,999
05
Page patterns
These rules keep new routes recognizably Basketane even when their content and conversion goals differ.
Editorial landing
Long-form sections, asymmetric hero, direct information on the page, and a single dark chapter for contrast.
Decision flow
Offer context on the left, bounded form or payment decision on the right, with transparent next steps nearby.
Confirmation
State the status honestly, explain what happens next, and provide a direct support route.
06
Accessibility
Craft includes usability. The visual system must remain legible and operable for keyboard, touch, reduced-motion, and narrow-screen users.
- WCAG AA contrast is the minimum for text and controls.
- Focus states must remain visible against paper and ink.
- Form errors use text and semantics, never color alone.
- Touch targets are at least 44px in either dimension.
- Motion is optional and disabled for reduced-motion users.
- Responsive pages are checked at 320px before release.