Let the fabric lead.
Photographs show the drape, weave, border and blouse. Interface decoration should leave room for the saree.
Anubhuti India
The details that
hold a brand together.
A working reference for the saree shop: its colour, type, space and the choices behind every component.
206 documented tokens3 layers14 type roles
The shop stays ivory. Dark mode is a library specimen for testing the same components and semantic roles.
Recognisably Anubhuti.
Make choosing personal.
Keep fabric, price, care and delivery easy to find. Offer a daylight photo and a conversation when colour needs reassurance.
Give every decision a role.
A text colour is chosen for reading. A gold accent marks the fabric. Shared roles let the brand evolve without editing every page.
Brand, voice, photography and logo rules
Logo
Use the supplied vector artwork and preserve its proportions. Keep a clear area of at least the mark's dot height. Use the horizontal lockup in headers; never recolour it to fix body-text contrast.
Photography
Use actual product photos. Show a full drape, a closer fabric view and the border or blouse. Keep colour editing consistent and offer daylight evidence when a customer needs it. Do not substitute generated imagery as proof of a product's appearance.
Voice
Be warm, specific and helpful: fabric, feel, dimensions, care and how to order. Avoid unverified quality claims and artificial urgency. Error messages explain the next action.
Responsive layouts
Let headings and section spacing grow through the fluid tokens. Product grids reduce to two columns on phones. Reading content and form fields use a single column when space is limited.
From the cloth to the interface.
IvoryZariRustEspresso
Woven gold,
worn lightly.
Gilda Display gives the editorial voice. Instrument Sans carries descriptions, prices and controls.
Sharp layouts, small control corners and circular icon buttons each have a role. Raised dark surfaces use lighter fills as well as shadows.
Spacing, corners, elevation, icons and motion
Space
Use fixed steps within a component and fluid section/layout tokens between large regions. Avoid selecting a page gutter merely because it matches a component gap at one width.
Corners and elevation
Use radius.sm for fields, tags and buttons; radius.pill for circular icon controls. Reserve overlay shadows for menus, quick views and filter sheets. Content does not need a card around it by default.
Icons
Preserve the shop's existing stroked symbols. Use a 24px drawing grid, a consistent 1.5-1.8px stroke and a 44px compact control target. The filled WhatsApp brand glyph is an intentional exception. Give icon-only buttons a meaningful accessible label.
Motion
Use press or fast for frequent feedback, standard for ordinary transitions, overlay for menus and sheets, and image for slow photo movement. Introductory reveals are optional. Reduced motion removes movement and preserves the final content.
Every value, what it's for and where it's used.
Download token sourceSearch by name, purpose or CSS variable. Each specimen shows its aliases, usage rule and matching source locations.
Loading the token source…
No matching tokens. Change the search or select all layers.
The token library could not load.
Components, with their behavior.
These specimens read the same variables as the shop. They demonstrate system states; they do not create orders or send messages.
Actions
Default
Hover fill
Keyboard focus
Unavailable
Usage and accessibility
Use one primary action for the next purchasing step. Disabled actions explain why they are unavailable. A real WhatsApp action is a link; an action changing local interface state is a button. Focus remains visible, and text contrast is checked against default and hover fills.
button.primary.bg → color.action.primary → color.rust.600Product card and shortlist
Tissue
Peach Gold Tissue Silk
Golden zari and a brocade border.
₹5,800
Not saved in this specimen.
Anatomy, states and usage
A card contains an image, fabric tag, product name, supporting line and price. Its save control has an accessible product-specific label and pressed state. Sold-out products retain their information while the ordering action is unavailable. Image changes belong to fine pointers; the product must remain understandable on touch.
Fields and validation
Validation rules
Keep labels visible, identify invalid fields with aria-invalid and link the error message with aria-describedby. Explain what to correct. Never use colour alone to communicate the error. Delivery data stays in memory in the checkout preview.
Dialogs and filters
Keyboard behavior
Opening moves focus inside. Tab and Shift+Tab stay in the dialog; Escape closes it. Closing returns focus to the control that opened it. The page behind the dialog is inert. Filters have selected, cleared, empty and result states.
Pattern coverage and release status
Implemented in the shop: header and mobile menu, buttons, product cards, saved states, quick view, filter sheet, gallery, product details, shortlist, comparison, WhatsApp handoff and responsive grids.
Prepared for checkout: labelled fields, validation, cart quantity, delivery details and order review. Payment is not enabled.
Needs human validation: complete screen-reader journeys, product-choice testing, Figma parity and business-policy confirmation before checkout launch.
One source. Explicit roles.
- PrimitiveRaw materials: colours, type values, spacing, radii and durations.
- SemanticMeaning: page, text, action, focus and layout. Light and library-dark themes choose different values for the same roles.
- ComponentDecisions for a button, tag, field, header or dialog. Aliases preserve the relationship to the role.
tokens/tokens.jsonPython compilerCSS variablesStatic storefront + system libraryFluid typography stores a desktop value for design tools and minimum/viewport information in an extension. The build writes CSS clamp() values. Figma sync remains a separate verification step until an actual library change has been exported and checked.
Download compiled CSSQuality we can measure.
Active tokens with a written purpose. The source audit defines the denominator.
Literal CSS motion durations in the audited templates. Durations now use shared roles.
Tertiary text contrast on ivory after changing its semantic alias.
Readable copper numerals, with the original logo copper preserved.
These are implementation measures. Sales, conversion and task-time improvements require their own evidence.
Component release checklist
- Purpose, anatomy, variants and responsive behavior documented.
- Default, hover, focus, selected, disabled and error states covered where applicable.
- Aliases resolve in both library modes, with essential contrast pairs checked.
- Keyboard focus and reduced motion verified in the browser.
- Design-library parity checked before describing Figma sync as complete.
- Checkout stays out of production until payment, stock, shipping and policies are confirmed.
Current release notes
Added complete token-purpose metadata, accessible muted/copper text roles, a shared motion scale, field/dialog roles, a theme-aware compiler and a library-only dark mode. Improved storefront modal focus behavior. Online checkout is a preview capability awaiting a payment integration.