GOTO Company

Overview

GOTO Company is an enterprise B2B SaaS platform that delivers pragmatic, mission-critical solutions to businesses seeking operational clarity and speed. The design system embodies a philosophy of "Direct Functionality"—an aesthetic movement that rejects decorative excess in favor of purposeful, high-contrast interfaces that guide users to action without ambiguity. The brand personality is confident, transparent, and results-oriented: users trust GOTO to deliver without distraction. The UI evokes a sense of professional competence through a vivid green primary accent (#02cb38) paired with neutral grays and whites, creating visual hierarchy through color intensity rather than depth or shadow. Voice example: "Your data is live. Your decisions are faster."

Colors

The color system is built on a foundation of neutral surfaces (white #ffffff, light grays #f8f8f8 to #c1c1c1) that provide a clean canvas for content and interaction. Primary (#02cb38) is the brand's signature action color—deployed on all CTAs, active states, and key interactive elements to signal "go" and drive engagement. Secondary (#3860be) provides a supporting accent for secondary actions, status indicators, and data visualization. Tertiary (#292826) anchors the system as a dark neutral for typography and structural elements. The surface stack is deliberately shallow: surface-container-high (#d8d8d8) is used for hover states and subtle emphasis, while surface-container-lowest (#f0f3f7) provides the lightest interactive layer. Error (#d32f2f) is reserved for validation failures and des

Typography

The type system uses GOTO Sans as the primary typeface, a modern sans-serif optimized for screen legibility at small sizes (12px–16px body text). The hierarchy spans from display (60px, 700 weight) for hero messaging down to label-sm (12px, 500 weight) for metadata and form hints. Headlines (40px–28px) use 600 weight with tight letter-spacing (-0.02em to -0.01em) to convey authority; body text (18px–16px) sits at 400 weight with 0em letter-spacing for neutral readability. All interactive labels (buttons, form fields) use label-md (14px, 600 weight) with 0.01em letter-spacing to ensure crisp legibility at small scale. When small labels appear over busy backgrounds (e.g., badge overlays), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to maintain contrast. Line-height is set to 1.5 for bod

Layout

The layout system uses a 12-column grid with a max-width of 1440px, allowing content to scale fluidly on mobile (single column) and expand to full width on desktop. Gutter spacing is fixed at 24px (md spacing unit), creating consistent breathing room between grid columns. Section separation uses lg spacing (40px) to establish clear visual rhythm; card-to-card spacing within a section uses md spacing (24px). Container padding follows the gutter rule: 24px on tablet/desktop, 12px on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently for margins, padding, and gaps in flex layouts. White-space is treated as a structural element: generous margins around headlines (40px below, 24px above) prevent cognitive overload. Input fields and buttons are sized

Elevation & Depth

Depth in this system is conveyed through subtle shadows and border definition rather than layering or blur effects. Level 1 (Base): flat surfaces with no shadow, using only a 1px border in outline-variant (#d0d0d0) to define edges. Level 2 (Cards & Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and dropdown panels to lift them 8px above the base. Level 3 (Elevated Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for full-screen modals and critical overlays. Hover states on interactive elements (buttons, list items) transition from Level 1 t

Shapes

The shape philosophy is "Pragmatic Minimalism"—rounded corners are used sparingly and purposefully to soften hard edges without sacrificing clarity. Buttons and form inputs use sm radius (2px), a micro-radius that suggests precision and control without appearing soft or playful. Cards and larger containers use DEFAULT radius (4px), creating a subtle visual distinction from buttons while maintaining a technical aesthetic. Modals and elevated surfaces use lg radius (12px) to signal importance and separation from the page. Dropdowns and select panels use DEFAULT radius (4px) to align with card st

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use backgroundColor: rgb(2, 203, 56), textColor: rgb(255, 255, 255), padding: 12px 24px, height: 44px, borderRadius: 2px, fontWeight: 600, fontSize: 13px. On hover, the background darkens to #009d2a (primary-fixed-dim) over 150ms. On active/pressed, the background shifts to #007a20 with a 2px inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to convey tactile feedback. Secondary buttons use a transparent background with a 1px border in primary (#02cb38) and primary text; on hover, the background fills with surface-container-low (#e9e9e9). Disabled buttons reduce opacity to 0.6 and set cursor: not-allowed. All button text uses label-md typography with letter-spacing: 0.01em for crispness.

###

Do's and Don'ts

**Do**

• Do use primary (#02cb38) exclusively for CTAs, active states, and key interactive elements—it is the brand's signature and must remain distinctive.
• Do maintain the 44px minimum height for all interactive elements (buttons, inputs) to meet WCAG touch target requirements.
• Do apply the full rounded radius (9999px) only to search inputs and badge elements; use sm (2px) for buttons and DEFAULT (4px) for cards.
• Do use the surface-container stack (surface-container-low through surface-container-highest) for hover and focus states; never introduce new grays.
• Do pair body-md (16px, 400 weight) with 24px line-height for readability; never compress line-height below 1.2 for body text.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns; reserve 0 8px 24px rgba(0, 0, 0, 0.12) for modals only.

**Don't**

• Don't use secondary (#3860be) or tertiary (#292826) as primary action colors—they are supporting accents and will dilute brand recognition.
• Don't apply border-radius greater than 4px to buttons or form inputs; the sharp 2px radius is intentional and signals precision.
• Don't introduce new colors outside the defined palette; if a new status is needed, use error (#d32f2f) or secondary (#3860be) with semantic intent.
• Don't use opacity or transparency for disabled states alone; always combine with cursor: not-allowed and a muted text color (#6c757d).
• Don't exceed 40px padding on cards or 24px padding on buttons; the system is compact and dense by design.
• Don't apply text-shadow to body text; reserve it only for small labels (label-sm) over busy backgrounds to maintain legibility.