Forest Green
#278458Primary CTA fill, brand accent, star glyph in wordmark, active states — a single chromatic note anchoring an otherwise achromatic interface
Literal
literal.clubWebsite preview
The design language
Literal is a literary reading room rendered in soft daylight: a near-monochrome canvas where the only chromatic note is a single forest green that marks the primary action. Headlines speak in a warm bookish serif (Libre Baskerville) while every functional element stays in clean geometric Inter, creating a quiet tension between editorial and digital. Surfaces are paper-like — soft warm gray canvas beneath pure white cards with hairline borders and almost no shadow. The whole experience is calm, spacious, and content-led, with book covers and product screenshots doing the visual work that color and ornament don't.
Color palette
brand
neutral
Charcoal
#444340Primary body and UI text, icon strokes, default border outlines
Soft Gray
#f8f8f8Page canvas and section backgrounds — warm off-white that makes white cards feel layered rather than floating
Warm Gray
#9a988bMuted helper text, secondary metadata, list dividers, de-emphasized links
Hairline Gray
#eeeeeeCard and component borders, subtle dividers between sections and list items
Paper White
#ffffffCard surfaces, button text, input fills — the elevated surface above the gray canvas
Ink Black
#000000Heading text, dark secondary action fill (App Store button), heavy borders on featured headings
Typography
Type scale
Major Second (1.125) · 16px basedisplay
40px · 500 · 1.35The quick brown fox jumps
heading
28px · 500 · 1.35The quick brown fox jumps
subheading
22px · 500 · 1.4The quick brown fox jumps
body
16px · 400 · 1.45The quick brown fox jumps
text-15
15px · 500 · 1.35The quick brown fox jumps
caption
14px · 400 · 1.45The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 700
- Sizes
- 14, 15, 16, 22, 40
- Line height
- 1.35–1.50
- Fallback
- system-ui, -apple-system, Segoe UI, Roboto
All functional UI — body copy, buttons, navigation, inputs, captions, feature descriptions, hero subtext
Additional typeface
Libre Baskerville
- Weights
- 500
- Sizes
- 28
- Line height
- 1.35
- Fallback
- Lora, Source Serif Pro, Crimson Text
Reserved exclusively for section and page headings — the serif is the editorial signal that separates display from interface
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 20px
Border radius
cards
8pxother
16pximages
4pxbuttons
4pxSpacing scale
3px5px8px10px14px15px16px20px24px25px28px30px40px80px133px160px180px210pxGuidelines
Do
- Use #278458 green exclusively for the primary CTA and the brand star glyph — never as a decorative accent on text, icons, or borders
- Set headings in Libre Baskerville 28–40px weight 500; never substitute Inter or a system serif for display type
- Keep the page canvas at #f8f8f8 and card surfaces at #ffffff with a 1px #eeeeee border — avoid colored card backgrounds or drop shadows beyond rgba(0,0,0,0.04)
- Use 4px radius for buttons and images, 8px for cards, 16px for large media blocks — never mix intermediate values like 6px or 12px
- Center all section headings and keep the 3-column grid consistent across feature and testimonial sections
- Default to Inter 15–16px weight 400 for body text with 1.45–1.50 line-height — this is the reading-optimized baseline
- Maintain 80px vertical section gaps to preserve the airy, page-of-a-book feel
Don’t
- Do not introduce a second chromatic color — the monochromatic system is the brand
- Do not use Libre Baskerville for body text, captions, buttons, or any UI element — it is reserved for headings only
- Do not use #000000 as a primary CTA fill — #278458 owns that role; #000000 is only for the dark App Store button and heading text
- Do not apply heavy drop shadows, glows, or colored shadows — elevation is communicated through border and a 1–2% opacity shadow only
- Do not use rounded pill buttons or radii above 16px — the system is crisp and bookish, not bubbly
- Do not add gradients, glassmorphism, or background images to cards or sections — surfaces stay flat
- Do not break the centered, symmetric layout with asymmetric or left-aligned hero compositions — the page reads like a printed page
Components
Primary CTA Button
Main conversion action — appears once or twice per section, always greenFilled #278458 background, white text, Inter 15px weight 500, 4px radius, 14px vertical × 28px horizontal padding, right-arrow glyph after label. 100% width on mobile, auto on desktop.
Dark App Store Button
Secondary download CTA paired alongside the primary CTAFilled #000000 background, white text, Inter 15px weight 500, 4px radius, 14px × 28px padding. Apple glyph precedes the two-line label 'Download on the App Store'.
Ghost Nav Button (Sign in)
Tertiary navigation action in the headerTransparent background, #444340 text, Inter 15px weight 400, no border. Underline on hover.
Search Input
Global search field in the navigation barBorderless, transparent background, #444340 placeholder text, magnifying-glass icon at left. Sits flush in the nav bar with no visible container — the absence of a border is the design statement.
Feature Card
Product capability card in the 3-column feature grid#ffffff background, 1px #eeeeee border, 8px radius, 20px padding. Contains a serif subheading (Inter 22px weight 700 or Libre Baskerville 28px weight 500) followed by bullet text or a product screenshot. Optional very faint shadow (rgba 0,0,0,0.04) reinforces elevation without weight.
Testimonial Card
Social-proof card in the 'Loved by everyone' grid#ffffff background, 1px #eeeeee border, 8px radius, 20px padding. Layout: avatar (circular, ~40px) + display name in Inter 15px weight 500 + verified check + platform glyph on one row, quote text in Inter 15px weight 400 below.
Section Heading (Serif)
Editorial section title — the moment where the page breathesLibre Baskerville 28px weight 500, #000000, centered alignment, line-height 1.35. The only place the serif appears outside feature card subheadings.
Hero Headline (Serif)
Page-level editorial titleLibre Baskerville-style serif at 40px weight 500, #000000, centered, line-height 1.35. Two-line stack, roughly 8–12 words.
Book Cover Collage
Decorative hero visual — books arranged in a scattered but balanced clusterIndividual book covers rendered as 4px-radius rectangular thumbnails, no shadows, slight rotation variation, layered with subtle overlap. Covers provide all the color in the hero; no background tint or framing device.
Product Screenshot Tile
In-feature visual showing the app interface (reading tracker, library list, scanner)Phone or interface mockup placed inside a feature card, contained with 4px radius, no device frame, sits on the white card background as a clean screenshot.
Navigation Bar
Sticky top header with brand, search, and actionsWhite background, #ffffff, 1px #eeeeee bottom border. Left: wordmark 'Literal' in Inter 22px weight 700 + green asterisk glyph. Center: full-width search input. Right: 'Sign in' ghost link + green 'Join →' CTA button. Height roughly 60px.
Bullet List (Feature Points)
Supporting list of capabilities inside feature cardsInter 15px weight 400, #444340, 10px vertical gap between items, no bullets or checkmarks — clean text stack only.
Surfaces & elevation
Level 0
Canvas
#f8f8f8Page background and section bands
Level 1
Card
#ffffffFeature cards, testimonial cards, input fields
Level 2
Ink
#000000Dark secondary action surface (App Store download)
Level 3
Brand
#278458Primary action surface (Join for free, Sign up now)
Feature card
0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px #eeeeee
Testimonial card
0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px #eeeeee
Layout & imagery
Layout
Page is max-width contained at ~1200px, centered, with a sticky white nav bar at the top. The hero is a centered vertical stack: serif headline, short subtext, two CTAs side by side, then the book-cover collage below. Feature sections alternate between the #f8f8f8 canvas and white card content arranged in a 3-column grid with generous 80px section gaps. Testimonials repeat the 3-column pattern. The rhythm is always: serif heading → optional CTA → grid of cards. Navigation is a single top bar with a full-width inline search; there is no sidebar, no mega-menu, no sticky in-page nav.
Imagery
Imagery is content-driven, not decorative. The hero uses a scattered collage of real book covers (4px-radius thumbnails, slight overlap, no framing) that supply all the color the page otherwise lacks. Feature sections insert clean product screenshots — phone-shaped reading tracker, library list, camera scanner UI — rendered without device bezels, sitting directly on white card surfaces. The social-proof section uses circular user avatars from Twitter. There is no stock photography, no abstract gradient art, no illustrations. Icons are line-based, single-stroke, #444340 or #9a988b.
Design notes
Agent Guide
**Quick Color Reference** - text: #444340 - background: #f8f8f8 - border: #eeeeee - card surface: #ffffff - accent: #278458 - primary action: #278458 (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #278458 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Create a feature card*: #ffffff background, 1px #eeeeee border, 8px radius, 20px padding, optional shadow 0 1px 3px rgba(0,0,0,0.04). Card contains a subheading in Inter 22px weight 700 #000000, followed by a bullet list in Inter 15px weight 400 #444340 with 10px row gap, then a product screenshot at 4px radius. 3. *Create a testimonial card*: #ffffff background, 1px #eeeeee border, 8px radius, 20px padding. Top row: 40px circular avatar + display name in Inter 15px weight 500 #444340 + verified glyph. Body: quote text in Inter 15px weight 400 #444340, line-height 1.50. 4. *Create the navigation bar*: #ffffff background, 1px #eeeeee bottom border, 60px height. Left: 'Literal' wordmark in Inter 22px weight 700 #000000 followed by a green #278458 asterisk glyph. Center: full-width search input with borderless transparent background and #9a988b placeholder text 'Search for books, authors, shelves, users…'. Right: 'Sign in' ghost link in Inter 15px weight 400 #444340, then green #278458 'Join →' button (4px radius, 14px 24px padding, Inter 15px weight 500, white text).
Similar brands
Are.na
Same literary-editorial sensibility: monochromatic warm canvas, serif headlines against sans body, single accent-free palette that lets content carry the color
Read.cv
Mirror-image visual system: near-white canvas, generous whitespace, serif display type, restrained single-accent approach, bookish/magazine-like cadence
Substack
Same serif-heading + clean-Inter-body pairing on a white canvas with minimal ornament, the same feeling of reading a printed page on screen
Goodreads
Same domain (book tracking) and same flat, content-led layout language — though Literal is far more restrained and monochromatic where Goodreads is denser and warmer
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
