Logo Mark
favicon.svg on light and dark ground
01Overview
One set of tokens, one portable component layer — rendered by both the Ghost theme (Handlebars + Tailwind v4) and the Next.js LMS (React). Every page here is generated from the real artifacts, so the styleguide cannot drift from the system.
The design system behind Namaste Salesforce
Calm, flat, reading-first.
257 tokens · 1629 classes · 138 components · 42 specimens
Calm, flat, reading-first.
One blue. Hairlines. Mono for data.
257 tokens · 1629 classes · 138 components · 42 specimens
- 257
- Tokens
- 42
- Flip in dark
- 1629
- .ns-* classes
- 138
- Doc pages
The mark
The logo, its lockups, and the favicon set — clear space, minimum sizes, and what never happens to it (no stretching, no recoloring, no shadows).
Logo Lockups
Full wordmark, icon-only compact, on-dark — responsive across breakpoints
Favicon Sizes
The source repo's real favicon.svg, no invented mark
The mark in motion — five sting / loading styles
Live below: pulse, ring, orbit, flip and bar — the only animated uses of the logo. Markup and usage rules on the Preloader page.
pulseringorbitflipbarFoundations
02Introduction
03Elements
04Colors
05Typography
06Status & surfaces
07Spacing
08Layout & elevation
09Geometry & motion
10Icons
11Patterns
12Accessibility
13Class index
Components — one page each: usage, variants, markup
14ButtonComponents
15Logo rowComponents
16MarqueeComponents
17FieldForms
18InputForms
19SelectForms
20TextareaForms
21CheckboxForms
22RadioForms
23SwitchForms
24ComboboxForms
25Segmented controlForms
26Date fieldForms
27Sign inForm patterns
28Sign upForm patterns
29Reset passwordForm patterns
30NewsletterForm patterns
31StatusFeedback
32AlertFeedback
33ToastFeedback
34SkeletonFeedback
35SpinnerFeedback
36PreloaderFeedback
37Empty stateFeedback
38Error stateFeedback
39BannerFeedback
40Progress barProgress & data
41StepsProgress & data
42MeterProgress & data
43TableProgress & data
44TimelineProgress & data
45Page motionProgress & data
46LeaderboardProgress & data
47StepperProgress & data
48TabsNavigation
49AccordionNavigation
50BreadcrumbNavigation
51PaginationNavigation
52Docs sidebarNavigation
53TreeNavigation
54Table of contentsNavigation
55NavbarNavigation
56Nav menuNavigation
57Account menuNavigation
58Mobile navNavigation
59Course & dashboard barsNavigation
60Theme toggleNavigation
61ModalOverlays
62DrawerOverlays
63MenuOverlays
64TooltipOverlays
65Helpdesk ticketsSurfaces
66CardSurfaces
67Tag & pillSurfaces
68DividerSurfaces
69KbdSurfaces
70CopySurfaces
71Definition listSurfaces
72BadgeSurfaces
73ChipSurfaces
74LogoSurfaces
75AvatarSurfaces
76ListSurfaces
77ImageMedia
78VideoMedia
79GalleryMedia
80CarouselMedia
81Picture framesMedia
82Course cardLMS
83CurriculumLMS
84Lesson navigationLMS
85Lesson panel (mobile)LMS
86Course detail pageLMS
87Course listingLMS
88Course heroLMS
89Enrol cardLMS
90Filter railLMS
91Learner testimonialsLMS
92InstructorLMS
93Course playerLMS
94CertificateLMS
95Video playerLMS
96What you'll learnLMS
97PrerequisitesLMS
98Course share & footer CTALMS
99Certification badgeLMS
100External resource cardLMS
101Slide deckTeaching
102TrackTraining
103Connected modulesTraining
104Training navTraining
105Module headTraining
106Post cardBlog
107Post headerBlog
108Post layout & TOCBlog
109Post footerBlog
110Blog indexBlog
111Assistant shellAI
112Conversation railAI
113Message turnAI
114Thinking & streamingAI
115ComposerAI
116Answer attachmentsAI
117Generated learning pathAI
118Sources & practice checkAI
119Errors & limitsAI
120Empty state & startersAI
121Settings & sign-inAI
122TakeawayContent blocks
123Stat blockContent blocks
124CompareContent blocks
125ChecklistContent blocks
126ProcedureContent blocks
127TermsContent blocks
128RelatedContent blocks
129Sponsor cardMonetization
130Ad unitMonetization
131Admin shellCMS
132Admin navCMS
133Page headCMS
134Stat cardCMS
135ToolbarCMS
136Editor layoutCMS
137Publish barCMS
138Title box & slugCMS
139Rich textCMS
140Curriculum builderCMS
141Dropzone & file rowCMS
142Tag inputCMS
143Syntax highlighterCMS
144BandSections
145HeroSections
146Feature gridSections
147Stat bandSections
148TestimonialSections
149CTA bandSections
150FAQSections
151FooterSections
Charts
Content creation