Στείλε Γράμμα

Overview

Στείλε Γράμμα is a digital-to-physical letter service rooted in the aesthetic of classical correspondence—airmail envelopes, postmarks, wax seals, and handwritten intimacy. The brand serves users who value the permanence and emotional weight of paper over ephemeral digital messages. The design language is "Epistolary Minimalism": a cream-and-ink palette inspired by vintage postal systems, paired with clean, modern typography that respects the gravity of written communication. The UI evokes the feeling of opening a mailbox and discovering something unexpected—a moment of genuine human connection in a digital world.

The tone is warm, precise, and slightly nostalgic without being precious. The brand speaks in active verbs ("Γράψε," "Ταξιδεύει") and avoids corporate jargon. It celebrates the ritual of letter-writing: the pause to compose, the deliberation over words, the anticipation of arrival. Example voice: "Πληρώνεις ανά γράμμα. Τέλος." — economical, direct, human.

Colors

The color system is anchored in the tactile world of paper and ink. Primary (#bf4136, a warm terracotta-red) is the brand's signature accent—used exclusively on call-to-action buttons, active states, and emphasis text. This red echoes the stripe of an airmail envelope and commands attention without aggression. The surface stack ranges from cream (#f7f1e3, the dominant background) through progressively warmer paper tones (#fffdf6 for content surfaces, #fdfdfb for the deepest container) to create subtle depth without darkness. On-surface text is a deep ink (#2b2d42, nearly black but warm-toned), paired with a softer variant (#66687e) for secondary information. Secondary (#34548c, a classical postal blue) supports links and secondary actions, evoking official correspondence. Tertiary (#c9a227

Typography

The type system pairs a classical serif display font (GFS Didot, 400 weight) with a contemporary sans-serif UI font (Inter, 400–700 weights). Display and headline levels use the serif family at sizes 54px–40px with tight line-heights (64px–48px) and subtle negative letter-spacing (-0.02em to -0.01em), creating an authoritative, literary presence. Body text (16px–18px) and labels (12px–14px) use Inter with generous line-heights (24px–28px) for legibility on cream backgrounds. The serif-sans pairing reinforces the brand's duality: the permanence of written words (serif) meets the efficiency of digital interaction (sans). Italic serif is used sparingly for emphasis (e.g., "Τα γράμματα" in the hero) to evoke handwriting without literal script fonts. All small labels over busy backgrounds (e.g.

Layout

The layout uses a 12-column grid with a fixed max-width of 1120px and a gutter of 22px, creating a spacious, breathing composition that respects the page as a canvas. Hero sections use a 1.05:0.95 column split (copy left, visual right) to balance text weight with the illustrated envelope. Section spacing follows a semantic scale: lg (40px) separates major sections, md (24px) divides subsections, and sm (12px) groups related elements. The container padding is consistently 22px on mobile and tablet, scaling to the gutter on desktop. White-space is intentional and generous—no section feels cramped. The airmail stripe (7px repeating red-white-blue) frames the entire page (top as header, sides and bottom as fixed border), creating a postal-service container that reinforces the brand metaphor wi

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (base surface) is the cream background with a faint grain texture. Level 2 (cards, inputs) uses a soft shadow: 0 3px 8px rgba(43, 35, 20, 0.15), creating a gentle lift. Level 3 (modals, hero envelope illustration) uses a larger shadow: 0 8px 28px rgba(43, 35, 20, 0.10), suggesting greater distance. Buttons add a tactile 3D effect with a 3px downward offset shadow (0 3px 0 #a23329) plus a soft drop-shadow (0 10px 22px rgba(191, 65, 54, 0.28)), mimicking the weight of a physical stamp being pressed.

Shapes

The shape philosophy is "Postal Geometry"—a blend of sharp, functional corners (for official forms and stamps) and soft, approachable curves (for interactive elements). Buttons and inputs use full-radius (999px) to feel friendly and clickable, contrasting with the geometric precision of the brand. Cards and sections use moderate radius (12px–14px, the --radius token) to suggest folded paper without appearing organic. Stamps and decorative elements use 0px radius to maintain their official, printed character. The postmark SVG uses concentric circles (50px and 33px radii) to evoke authentic post

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses the brand red (#bf4136) with white text, 12px vertical × 24px horizontal padding, and a distinctive 3D effect: a 3px solid shadow directly below (0 3px 0 #a23329) plus a soft drop-shadow (0 10px 22px rgba(191, 65, 54, 0.28)). On hover, the background shifts to #cb4d41 and the button translates down 1px (transform: translateY(1px)), reinforcing the tactile press. The large variant (button-primary-lg) scales to 16px × 32px padding for hero CTAs. Secondary buttons use a transparent background with a 1.5px ink-colored border and no shadow, suitable for lower-priority actions. Ghost buttons (button-ghost) are minimal—transparent with ink text—and reveal a surface-container-high background o

Do's and Don'ts

**Do**

• Do use the primary red (#bf4136) exclusively on CTAs and active states—it is the brand's most precious color and loses impact if overused.
• Do maintain the cream background (#f7f1e3) as the dominant surface; it is the foundation of the postal aesthetic and should occupy 60%+ of the visual space.
• Do pair serif headlines (GFS Didot) with sans-serif body text (Inter) to reinforce the digital-to-physical duality; never use serif for body copy.
• Do apply the airmail stripe (red-white-blue repeating -45deg gradient) as a page frame or header accent to anchor the brand identity.
• Do use the full-radius (999px) on all interactive elements (buttons, inputs, badges) to signal affordance and approachability.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary colors; the brand uses warm, paper-toned neutrals (#2b2d42 for text, #fffdf6 for surfaces).
• Don't apply heavy shadows (blur > 20px or spread > 8px); the aesthetic is subtle and tactile, not dramatic or floating.
• Don't mix serif and sans-serif at the same hierarchy level (e.g., two serif headlines or two sans-serif body blocks); each family has a specific role.
• Don't override the cream background with bright whites or grays; the grain texture and warmth are essential to the postal aesthetic.
• Don't use the secondary blue (#34548c) or tertiary gold (#c9a227) on CTAs; reserve them for links, badges, and decorative elements only.