Grass

Overview

Grass is a financial dashboard for users monetizing their unused internet bandwidth through a peer-to-peer network. The design system embodies 'Accessible Data Minimalism'—a philosophy that prioritizes clarity and user confidence by presenting complex earnings data through a clean, light-first interface with strategic use of a vibrant lime-green accent (#ABF600). The brand serves users who value transparency and control, evoking a sense of empowerment and straightforward progress tracking.

The voice is conversational yet precise: friendly without being patronizing, technical without being opaque. Grass speaks in active, outcome-focused language. Example: 'Your network is earning $2.40 today—keep it online to maximize rewards.' The tone avoids hype; instead, it builds trust through consistent, honest communication about earnings, uptime, and rewards.

Colors

The Grass color system is anchored in a light, open aesthetic with a single, unmissable accent. Primary (#ABF600) is the brand's signature lime-green, used exclusively for call-to-action buttons, success states, and key interactive elements—it commands attention without aggression. On-primary text (#191A23, near-black) ensures legibility at 16px body size with a contrast ratio exceeding 12:1. Secondary (#23C5EC, cyan) provides a supporting accent for data visualization, charts, and secondary UI elements like proxy status indicators. Tertiary (#FFACB1, soft coral) is reserved for error states and warnings, softening the severity of negative feedback.

The surface stack is predominantly white (#FFFFFF) with carefully calibrated grays for depth: surface-container-low (#F3F3F3) for subtle card

Typography

The type system uses Karla Variable as the primary typeface, chosen for its geometric clarity and excellent readability at small sizes (12px label-sm through 16px body-md). Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section titles; headline-lg (36px, 600 weight) anchors dashboard sections like 'Earnings' and 'Statistics'; headline-md (28px, 600 weight) breaks up subsections. Body-md (16px, 400 weight, 24px line-height) is the default reading size, applied to all body copy and form labels. Label-md (14px, 600 weight) is used for button text and UI labels, with 0.01em tracking for subtle emphasis. Label-sm (12px, 500 weight) is applied to badges, tags, and secondary metadata. All type scales use a 1.5x line-height multiplier minimum to ensure comfor

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The left sidebar (240px fixed) contains primary navigation; the main content area flows fluidly to fill remaining space. White-space is generous: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal card padding uses md spacing (24px) with 20px top/bottom and 24px left/right. The grid is fluid below 768px, collapsing to a single column with md spacing (24px) between sections. Container padding on mobile is sm spacing (12px) on each side. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for section rhythm, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions.

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. Level 1 (Base): flat white surface with no shadow. Level 2 (Standard Card): 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted UI elements. Level 3 (Elevated/Hover): 0 8px 20px rgba(0, 0, 0, 0.12), applied on card hover and modal overlays. Borders provide additional definition: all cards receive a 1px solid border at #AEAEAE (outline-variant) to separate from the background. Interactive elements (buttons, inputs) use a 1.5px inset border at rgba(0, 0, 0, 0.08) to define their clickable boundary

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and primary CTAs use full radius (9999px) to create a pill shape, emphasizing their interactive nature and drawing the eye. Cards and containers use lg radius (20px), balancing approachability with structure. Inputs and secondary UI elements use DEFAULT radius (8px), maintaining visual hierarchy while staying functional. Modal dialogs use xl radius (28px) to signal importance and separation from the main interface. The rationale: full-radius buttons feel

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #ABF600 background with #191A23 text, 44px height, 12px vertical / 24px horizontal padding, and full radius (9999px). On hover, the background shifts to #D0ECB1 (primary-container) with a transition of 150ms ease-out. Button-secondary uses a transparent background with a 1.5px border at #AEAEAE, same padding and height, and shifts to surface-container-high (#E8E8E8) on hover. Both buttons apply font-weight: 600 and label-md typography (14px, 20px line-height). Focus states add a 3px ring at rgba(171, 246, 0, 0.1).

Containers & Surfaces Cards are the primary container for grouped content. Card base: surface-container-lowest (#FAFAFA) background, lg radius (20px), 20px top/bottom padding and 24px left/r

Do's and Don'ts

**Do**

• Do use primary (#ABF600) exclusively for CTAs, success states, and key interactive elements—never for backgrounds or body text.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to maintain visual rhythm.
• Do use Karla Variable at 16px body-md with 24px line-height for all body copy to ensure legibility and accessibility.
• Do apply 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and lifted elements; increase to 0 8px 20px rgba(0, 0, 0, 0.12) on hover.
• Do use full radius (9999px) on all primary buttons and pill-shaped UI elements to signal interactivity.
• Do apply 1.5px inset borders at rgba(0, 0, 0, 0.08) to input fields and secondary UI to define clickable boundaries.

**Don't**

• Don't use primary (#ABF600) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and success states.
• Don't apply shadows darker than 0 8px 20px rgba(0, 0, 0, 0.12) or use blur effects; maintain clarity and legibility.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; smaller radii reduce affordance.
• Don't mix typefaces; Karla Variable is the sole typeface for all UI text—avoid system fonts or serif alternatives.
• Don't apply padding smaller than sm (12px) inside cards or containers; maintain breathing room for readability.
• Don't use secondary (#23C5EC) or tertiary (#FFACB1) as primary CTAs; these are supporting accents only.