Grass

Overview

Grass is a fintech-lifestyle platform that monetizes unused internet bandwidth, transforming a passive resource into active earnings. The brand serves privacy-conscious users aged 18–45 who value both financial reward and digital autonomy. The aesthetic is 'Energetic Minimalism'—a design movement that pairs clean, light-first surfaces with vivid, high-saturation accent colors to communicate both trustworthiness and dynamism. The UI evokes a sense of effortless passive income: simple, unobtrusive, always working in the background. Users feel empowered, not surveilled.

Grass speaks in a conversational, direct tone—never corporate, never breathless. The vocabulary is grounded in real value: 'earnings,' 'rewards,' 'connected,' 'running,' 'background.' Brand personality is approachable-yet-technical, like a friend who understands both finance and privacy. Example sentence: 'Your internet is already running—now it's earning for you.'

Colors

The color system is anchored by a single, unmissable accent: Grass Primary (#ABF600), a vibrant lime-green that dominates all call-to-action buttons, interactive states, and brand moments. This high-saturation hue (HSL 82°, 100%, 50%) sits at the intersection of 'growth' and 'energy,' signaling both financial gain and active participation. Primary is always paired with pure black text (rgb(0, 0, 0)) for maximum contrast and legibility, even on small touch targets.

The surface stack is deliberately light and neutral: white (#FFFFFF) as the base, with a shallow container hierarchy (surface-container-low at #F5F5F5, surface-container-high at #E8E8E8) to create subtle depth without visual noise. Secondary (#F2FED1), a pale lime wash, is reserved for informational cards and non-critical surfac

Typography

The type system uses DM Sans Variable exclusively—a geometric, friendly sans-serif that balances technical precision with human warmth. Display (60px, 600 weight, -0.02em tracking) anchors hero sections and commands attention without aggression. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter letter-spacing (-0.015em, -0.01em respectively) to reinforce the brand's energetic compression. Body text (16–18px, 400 weight, 24–28px line-height) is set loose and airy, with 0.005em tracking on body-lg to prevent the eye from tiring during longer reads. Labels (14px and 12px, 700 weight) are used on buttons and badges with 0.01–0.02em letter-spacing to add visual snap. On small labels over busy backgrounds (e.g., badge text on primary butt

Layout

The layout follows a 12-column grid with a max-width of 1180px, centered on the viewport. The design favors a fluid, breathing approach: sections are separated by lg spacing (40px) on desktop, md spacing (24px) on tablet, and sm spacing (12px) on mobile. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Hero sections use full-width backgrounds with a contained text layer (max 1180px), allowing imagery and gradients to extend edge-to-edge while keeping copy readable. Cards and containers use md padding (24px) internally, with sm gaps (12px) between child elements. White-space is treated as a design material: negative space around primary CTAs is never less than 16px, ensuring they remain focal points. The container-max-width of 1180px prevents content fr

Elevation & Depth

Elevation in Grass is achieved through subtle shadow and background-color shifts rather than dramatic depth. Level 1 (Base): white background (rgb(255, 255, 255)) with no shadow, establishing the clean canvas. Level 2 (Standard Card): surface-container-lowest (#F9F9F9) background with elevation-sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)), creating a barely-perceptible lift. Level 3 (Elevated Card/Modal): surface-bright (#FAFAFA) background with elevation-md shadow (0 4px 12px rgba(0, 0, 0, 0.08)), signaling modal prominence. Interactive elements (buttons, inputs) use no shadow at rest but gain e

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners that feel approachable without sacrificing precision. Buttons and primary interactive elements use full border-radius (9999px), creating pill-shaped targets that feel friendly and modern. Cards and containers default to lg radius (1rem / 16px), balancing softness with structure. Inputs and secondary surfaces use DEFAULT radius (0.5rem / 8px), maintaining visual hierarchy while staying cohesive. The rationale: full-radius buttons are the brand's signature gesture, instantly recognizable and tactile on mobile; lg-radius cards feel contempo

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses primary (#ABF600) background, on-primary (#000000) text, full border-radius (9999px), and label-md typography (14px, 700 weight) with 16px vertical and 32px horizontal padding, yielding a 48px height. On hover, background shifts to primary-fixed-dim (#ABF600) with a 200ms transition; on active/press, background becomes inverse-primary (#89C500) with an inset shadow (0 2px 4px rgba(0, 0, 0, 0.12)) to signal depression. Button-secondary uses a transparent background with a 1px outline-variant border (#C7C7C7), on-surface text, and the same full radius; hover state fills with surface-container-high (#E8E8E8). Secondary CTAs should never compete visually with primary—use them for 'Learn More,' 'S

Do's and Don'ts

**Do**

• Do use primary (#ABF600) exclusively for the most important CTA on each page—never more than one per viewport.
• Do maintain at least 16px of white-space around primary buttons to ensure they remain focal points.
• Do apply the full border-radius (9999px) to all primary CTAs; it is the brand's signature gesture.
• Do use DM Sans Variable at 600 weight for all headings; it reinforces the energetic, geometric brand voice.
• Do pair primary (#ABF600) with pure black text (rgb(0, 0, 0)) for maximum contrast and accessibility.
• Do use elevation-sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)) as the default card shadow; reserve elevation-md for modals and hero callouts.

**Don't**

• Don't use primary (#ABF600) for body text, backgrounds, or non-interactive elements—it will dilute its impact as an accent.
• Don't apply sharp corners (0px radius) to any interactive element; the brand requires softness.
• Don't mix typefaces; DM Sans Variable is the sole font family for all text.
• Don't use drop shadows larger than elevation-md (0 4px 12px rgba(0, 0, 0, 0.08)) on cards; the aesthetic is clean and minimal, not layered.
• Don't place text directly on primary backgrounds without sufficient contrast testing; always verify WCAG AA compliance.
• Don't use secondary (#F2FED1) or tertiary (#4299E1) as primary CTAs; they are supporting colors only.