greptile.com — Design System

1. Visual Theme & Atmosphere

Greptile is an AI code-search tool, and its design embodies a specific tension: organic warmth meets technical precision. The background is a creamy off-white — not the clinical white of most developer tools, but a warm stone (rgb(241, 239, 235)) that feels like aged paper or architectural concrete. Against this tactile base, the typography is spare and precise.

The headline typeface is TasaOrbiter at 96px — massive, tightly tracked, set to negative letter-spacing that makes each heading feel like a product stamp. Body paragraphs use Geist Mono (the same monospace font Vercel uses for code), which is an unusually bold typographic choice: prose that reads with the texture of code. This blurs the line between product and editorial — the content feels like it was generated, not written.

The primary accent is Greptile green (rgb(16, 122, 77)): a forest green that appears on the hero heading, CTA buttons, and key surfaces. It reads as natural, trustworthy, and slightly unexpected against the warm stone — not the electric green of a startup, but something more considered.

2. Color Palette & Roles

Backgrounds & Surfaces

• Warm stone rgb(241, 239, 235) — page background, input fill
• Warm white rgba(249, 247, 243, 0.5) — frosted card surface (group hover panels)
• Pure white rgba(255, 255, 255, 0.15) — overlay highlights
• Light gray rgb(204, 204, 204) — dividers, input borders

Text

• Near-black rgb(0, 0, 0) — primary body text
• Dark gray rgb(42, 42, 42) — h2 headings, input text, interactive labels
• Mid gray rgb(74, 74, 74) — labels, subdued content
• Muted rgb(106, 106, 106) — button text, tertiary content

Brand

• Greptile green rgb(16, 122, 77) — hero h1 color, primary CTA buttons, feature surfaces

Categorical / Tag Colors (used on badge-style rounded links)

• Red-orange rgb(242, 78, 30) — alert or feature category
• Pink rgb(247, 131, 163) — secondary category
• Gold rgb(204, 145, 0) — third category
• All with 64.7% opacity variants on surfaces for a pastel badge effect

Borders

• rgb(229, 229, 229) — universal border, consistent across all interactive elements

3. Typography Rules

Three font families, three distinct roles — a rare multi-font system that actually makes typographic sense.

TasaOrbiter — display headings only

• h1: 96px / 600 / -3.84px letter-spacing / line-height 1:1 — monolithic, uncompromising
• h2: 48px / 600 / -1.92px tracking
• h3: 36px / 600 / -1.44px tracking
• h5/h6: 24px and 18px variants with proportional negative tracking
• Rule: negative letter-spacing scales with font size — larger text, more compression

Geist Mono — paragraphs, inputs, and labels

• Body paragraphs: 16px / 400 / 24px line-height — prose that reads like code
• Inputs: 14px / 400 / 20px
• Labels: 12px / 400 / uppercase transform — the only all-caps usage in the system

Inter — body, links, buttons, captions

• Body/links/buttons: 16px / 400 / 24px — clean utility sans
• Figcaptions: 14px / 400 / 24px

What’s absent: no decorative serif, no italic emphasis, no bold body text. The bold accent is carried entirely by TasaOrbiter’s size, not weight variation within Inter or Geist.

4. Component Stylings

Hero Heading

• TasaOrbiter at 96px in Greptile green — the primary brand moment
• Negative letter-spacing -3.84px gives it a compressed, typeset quality

Category Badges / Rounded Links

• Background: green, orange, pink, or gold (with 64.7% opacity on hover surfaces)
• Color: white text on all backgrounds
• Shape: rounded (inferred from selector a.rounded)
• Shadow: rgba(0,0,0,0.06) 0 2px 12px — gentle lift

Input Fields

• Background: matches page surface rgb(241, 239, 235) — flush, not floating
• Border: rgb(204, 204, 204) — defined but not heavy
• Focus: ring via box-shadow rgb(204, 204, 204) 0 0 0 1px — same color, just a tighter ring
• No color change on focus — the subtlety is deliberate, letting content speak

Buttons

• Default: transparent with dark gray text rgb(106, 106, 106) — restrained
• Primary CTA: green fill rgb(16, 122, 77) with white text

Cards / Group Surfaces

• Frosted warm-white at 50% opacity — layered over the stone background
• Subtle 0 1px 2px rgba(0,0,0,0.05) shadow — almost imperceptible lift

5. Layout Principles

The layout uses a conventional centered content approach without visible edge-to-edge color blocking. All section, main, footer elements have 0px padding set at the element level — layout control flows to inner containers. This suggests a component-level padding system rather than section-level.

The page has a warm, editorial reading quality: generous whitespace, content that breathes. Breakpoints at 480, 600, 640, 768, 1024, 1280, 1536px cover the full spectrum from mobile to ultrawide.

No horizontal scrollers or slider patterns are evident — the layout reads as vertical, stacking section by section in a calm editorial flow.

6. Depth & Elevation

Depth is extremely restrained, consistent with the warm-paper aesthetic. Nothing should feel “lifted” dramatically — the design values tactility over elevation.

• Micro shadow: rgba(0,0,0,0.05) 0 1px 2px — the lowest possible elevation signal
• Card shadow: rgba(0,0,0,0.06) 0 2px 12px — slightly more present for interactive cards
• No inset shadows, no blur-heavy glass effects

Surfaces use semi-transparency against the warm stone background (rgba(249,247,243,0.5)) to create subtle frosting — depth through translucency rather than shadow.

7. Do’s and Don’ts

Do:

• Use the warm stone background rgb(241, 239, 235) — not white, not gray-100
• Set h1 in TasaOrbiter at large scale with strong negative letter-spacing
• Use Geist Mono for paragraph copy as the brand’s typographic signature
• Apply Greptile green rgb(16, 122, 77) to the most important heading on each page
• Keep input fields surface-flush (same background as page, not white)
• Use soft borders (rgb(229, 229, 229)) rather than strong dividers

Don’t:

• Don’t use Inter for headings — TasaOrbiter at large scale is the identity
• Don’t add drop shadows heavier than 2px 12px — the aesthetic is paper-flat
• Don’t use pure white #fff as a background — it would kill the warm stone atmosphere
• Don’t use color fills on interactive states — prefer subtle color shifts (rgb(42,42,42) → rgb(74,74,74))
• Don’t introduce gradients or dark mode elements — this is a purposefully light design

8. Responsive Behavior

Seven breakpoints from 480px to 1536px provide full coverage. The hero typography at 96px will need significant scaling on mobile — likely down to 48–64px. The negative letter-spacing must scale proportionally (the formula appears to be fontSize * -0.04).

Labels using uppercase Geist Mono at 12px should remain legible at all widths — no further reduction. Input fields being surface-flush means no visual reflow needed for form layouts at different breakpoints. Category badges/pills are inherently flexible and should wrap naturally in flex containers.

9. Agent Prompt Guide

Use this block when prompting an AI to generate UI in the style of greptile.com:

Design a light AI developer tool with a warm stone background (#F1EFEB, not white). Primary text is near-black. Brand accent is forest green (#107A4D) used on the hero heading and primary CTAs. Use TasaOrbiter (or similar compressed display sans) at large scale with heavy negative letter-spacing (-0.04em rule) for headings. Body paragraphs use a monospace font like Geist Mono — prose that reads like code output. UI elements (buttons, inputs, nav) use Inter. Input fields are surface-flush with a light border (#CCC) and a minimal 1px ring focus state. Cards use 50% opacity frosted warm-white. Category tags/badges come in green, red-orange, pink, and gold. Shadows are barely present — max 2px 12px blur. No gradients, no dark backgrounds, no heavy drop shadows.

Generated by Sparkbites — extracted from live CSS analysis