Keep clear space equal to one quarter of the mark. Never recolor or distort it.
Platform guidesWebsite system
Responsive layouts, pointer and keyboard interaction, web typography, and browser-safe motion.
Lessgo product language
Make getting together feel effortless.
The complete visual and interaction reference for Lessgo on the web—from responsive foundations to keyboard-ready components.The complete visual and interaction reference for the Lessgo mobile experience—from touch-first controls to native motion.
5 product domains3 typefaces8 px rhythm2 color modes
Managing is on us.
01
Brand
Optimistic energy with practical clarity. The identity should feel social, capable and alive—not loud for its own sake.
Lessgo
Outfit ExtraBold. Use the full wordmark when brand recognition matters.
Sky → Indigo → Magenta. Reserve it for branded moments, not routine UI.
Human first
Write and design around the people making the plan, not the system managing it.
One obvious next step
Every state should make the primary action easy to find and easy to understand.
Color has a job
Domain color creates orientation. Semantic color communicates status. Never swap the two.
Joy in the edges
Celebration, glow and motion support the moment without slowing the task down.
02
Color
Five domain palettes give the product orientation. Each palette owns its own surfaces, ink and accent in light and dark mode.
Core brand
The app-icon gradient and its two supporting solids.
app/globals.cssconstants/theme.ts#67BDF6Gradient stop#5E55E8Gradient stop#C637DAGradient stop#5596F2Links and highlights#965AFFHalo and ambient lightLaunch spectrum · light
Accessible on whiteLaunch spectrum · dark
Luminous on blackProduct domains
Use the assigned domain—not a favourite color—to orient the experience.
01
Events
Plans, invitations and attendance
Light
#F6F7EFFriday plans7 people are in
JoinSurface
#FFFFFFInk #1B1E14Accent #B4E22ESecondary #6FBF7ADark
#121110Friday plans7 people are in
JoinSurface
#1E1B18Ink #F5F2ECAccent #C7F04ASecondary #86D98F02
Groups
People, communities and shared spaces
Light
#F9F3ECFriday plans7 people are in
JoinSurface
#FFFFFFInk #211913Accent #F58A1ESecondary #FFB55ADark
#16100CFriday plans7 people are in
JoinSurface
#241A12Ink #F7EFE6Accent #FF9F45Secondary #FFC97803
Split
Balances, expenses and settlement
Light
#EDF6EFFriday plans7 people are in
JoinSurface
#FFFFFFInk #12201AAccent #16A34ASecondary #22C55EDark
#0D140FFriday plans7 people are in
JoinSurface
#14201AInk #ECF6EFAccent #4ADE80Secondary #86EFAC04
Vibes
Updates, reactions and social energy
Light
#FAF2EFFriday plans7 people are in
JoinSurface
#FFFFFFInk #21140FAccent #F86060Secondary #FFA23DDark
#15100FFriday plans7 people are in
JoinSurface
#241A17Ink #F8EFEAAccent #FF7A7ASecondary #FFB84D05
Profile
Identity, preferences and personal space
Light
#F4F1F9Friday plans7 people are in
JoinSurface
#FFFFFFInk #1B1626Accent #9B6DF2Secondary #E48FB6Dark
#14101AFriday plans7 people are in
JoinSurface
#201A2BInk #F3EEF8Accent #C9A7FFSecondary #F5A9C4Event category tints
Fixed, theme-independent identifiers for event chips and badges.
Hangout
#7FD1AEParty
#F178B6Meal
#F49B7ATrip
#6FB1FCSports
#7BD389Group Study
#B79CEDMovie
#F5A97FConcert
#C08CF0Game Night
#6FD0C0Birthday
#F58AB0Coffee
#C9A27ADrinks
#E0A24EOutdoors
#86C97FPicnic
#9BCF7FRoad Trip
#6FA8F0Shopping
#EE9BC0Festival
#E58AC0Workout
#7BD389Meeting
#F2C14EWorkshop
#E8965AConference
#64C2C8Event
#8FB4F2Other
#C9CAD603
Creative color
Expressive palettes make Vibes and group spaces distinctive. They are content color, never substitutes for semantic feedback.
Vibe identities
Each canonical Vibe keeps the same visual identity in both themes.
Movie
#5B247A · #7B2FF7 · #C4457ESports
#0F9B0F · #2AB84B · #A8E063Hangout
#FF5E8A · #FF8DA1 · #FFB199Walk
#0BA18F · #2BD68A · #8FF7C4Food
#F83600 · #FE8C00 · #FFC837Study
#2148C0 · #3A6FE0 · #57C1EBGaming
#7A00F5 · #B24BF3 · #E14BE1Travel
#0575E6 · #3AC1E0 · #5FE0C8Shopping
#EC008C · #F55CA0 · #FC6767Workout
#E5153C · #F5484B · #FF7A45Default
#5E55E8 · #8A63F2 · #C637DAGroup section accents
Pastel orientation inside a Group; separate from the Groups domain orange.
groupSectionPalettes.ts#47788D#A8D8EA#667A38#D5E6A3#8D506D#E8AAC8#4C796A#A8D9C8#806D3A#E6D49AVibe background libraryPersisted choices—never reorder gradient indexes.26 gradients · 12 solids
#141E30 → #243B55#0F2027 → #2C5364#8E2DE2 → #4A00E0#536976 → #292E49#7F00FF → #E100FF#F00000 → #DC281E#2980B9 → #2C3E50#C6426E → #642B73#396AFC → #2948FF#1A2980 → #26D0CE#DA22FF → #9733EE#603813 → #B29F94#FF512F → #DD2476#F953C6 → #B91D73#EC008C → #FC6767#4776E6 → #8E54E9#EB3349 → #F45C43#02AAB0 → #00CDAC#F83600 → #FE8C00#334D50 → #CBCAA5#11998E → #38EF7D#00B09B → #96C93D#FF6B6B → #FF8E53#DD5E89 → #F7BB97#FDC830 → #F37335#F7971E → #FFD200#D94F59#B63E6F#7042B8#4054B2#2463A6#167C80#26734D#6F7E32#B66A16#D35F32#475569#29292904
Typography
Outfit brings personality to display moments. Inter makes everyday UI effortless to scan. Space Mono keeps amounts and codes stable.
Confident, rounded and friendly.
600 · 700 · 800Neutral, compact and readable.
400 · 500 · 600 · 700For money, codes and IDs only.
400 · 700Display
Outfit 800 · 44/48Plans are better together.
Launch moments and singular hero statements
Title
Outfit 700 · 30/34Plans are better together.
Screen and modal titles
Heading
Outfit 700 · 21/26Plans are better together.
Sections and card groups
Body
Inter 400 · 16/22Plans are better together.
Primary reading and descriptions
Label
Inter 700 · 14/18Plans are better together.
Buttons, tabs and compact controls
Caption
Inter 400 · 13/17Plans are better together.
Metadata and supporting details
Mono
Space Mono 400 · 14/20Plans are better together.
Money, codes and technical values
Keep hierarchy decisive
One display style and one heading level are usually enough for a screen.
Do not use mono decoratively
Reserve it for values that benefit from equal-width characters.
05
Iconography
Use Lucide's rounded stroke system consistently. Keep unfamiliar actions paired with text and preserve clear pointer and focus states.Use the native icon vocabulary consistently, preserve generous touch targets and pair unfamiliar actions with text.
Web libraryLucide icons with a rounded 1.75–2 px stroke
Control sizing18–20 px glyphs inside 40–44 px interactive targets
InteractionEvery icon action needs hover, focus and an accessible name
Product UIMaterial Icons for navigation and native product actions
Shared primitivesFeather icons where a lighter cross-platform stroke is needed
CelebrationFont Awesome is reserved for the launch field
Primary navigation
Domain color appears only in the selected or emphasized state.
24–32 pxcalendar-dayseventusers-roundgroupswallet-cardsaccount-balance-walletsparklesauto-awesomeuser-roundpersonCommon actions
Use visible hover and focus states even when the glyph is self-explanatory.Use a 44 px minimum target even when the glyph is 20 or 24 px.
18–20 px glyph20–24 px glyphHome
househomeSearch
searchsearchAdd
plusadd-circleNotifications
bellnotificationsEdit
pencileditShare
share-2shareMessage
message-circlechatMedia
imageimagePrivate
lock-keyholelockClose
xcloseLaunch celebration field
Playful event glyphs orbit the mark; never use this density in task UI.
musicmap-markerplanegiftticketglassfilmcamerabirthday-cakecutlerybicycleuserscoffeestar-oheart-omicrophonetrophygamepadbookcompasstreepawshopping-bag06
Components
Responsive controls prioritize clear hierarchy, visible interaction states and comfortable pointer and keyboard use.Touch-first controls use generous targets, soft cards, pill actions and quiet supporting surfaces.
Buttons
44–48 px · radius 1452 px · pillInputs
48 px · radius 1452 px · radius 20Chips & status
radius 20 GoingMaybeSettled₹640 due
Payment receivedJust now2 replies pendingRemindUpload failedRetry
Cards
radius 20 · padding 24radius 28 · padding 2418 OCT
Sunset picnicCubbon Park · 5:30 PM
AKRM+57 people are inThe plan is coming together.
07
Layout
Responsive containers and an 8 px rhythm keep wide and narrow browser layouts calm, readable and predictable.An 8 px rhythm and consistent screen gutters keep compact coordination flows calm. Break the rhythm only for optical alignment.
Spacing scale
4 px basexs4pxsm8pxmd12pxlg16pxxl24px2xl32px3xl48pxRadius scale
soft, never bubblysm · 10Small controls
md · 14Menus and compact surfaces
lg · 20Inputs and chips
xl · 28Cards and sheets
pill · 999Buttons, badges and avatars
08
Motion
Motion explains change and rewards progress. It should feel responsive first, expressive second, and always respect reduced-motion preferences.
Micro interaction
160–220 ms · ease out200–240 ms · ease outHover, focus, disclosure and compact state changes.Presses, chips and compact native state changes.
Surface entrance
240–360 ms · ease out300–650 ms · springMenus, dialogs and meaningful hierarchy changes.Sheets, cards and meaningful hierarchy changes.
Page transitionLaunch signature
280–420 ms · shared axis1,800 ms total · 1,600 ms wavePreserve context between related views without delaying navigation.One branded light wave before control returns.
Reduced motion is a product state, not a fallback.
Remove travel, loops and parallax. Preserve visibility, hierarchy and the final state.
09
Voice & copy
Lessgo sounds like the organised friend in the group: warm, direct and useful. Never robotic, never trying too hard.
Clear before clever
Say what happened and what the person can do next.
Short, not abrupt
Remove filler while keeping the sentence human.
Specific action labels
Prefer “Invite friends” over “Continue” when that is what happens.
Calm under pressure
Errors explain the issue without blame, panic or dead ends.
Plain language, named action, useful recovery.
Technical, impersonal and no next step.
ButtonsSentence case, action first
Send reminderHeadingsShort and descriptive
Who's coming?Empty statesExplain value, then action
No expenses yet. Add the first one.SuccessConfirm outcome, skip celebration overload
Payment recorded10
Accessibility
A usable interface is the baseline. Color, type, motion and controls must work for people across vision, mobility and input preferences.
AA contrast
4.5:1 for normal text and 3:1 for large text or essential UI.
Never color alone
Pair status color with an icon, label, shape or position.
Meaningful labels
Icon-only actions require accessible names that describe the result.
Reduced motion
Respect the system preference and preserve the final visual state.
Visible focus
Every interactive element needs a clear keyboard focus ring.
Keyboard complete
Every flow must work without a pointer and follow a logical focus order.
44 px targets
Keep controls reachable and forgiving on touch screens.
Dynamic type
Allow text to grow without clipping actions or hiding essential content.