Forest Depths
#122314Dark elevated surface for cards, headers, and contained panels. Do not promote it to the primary CTA color
Tomorro
gotomorro.comWebsite preview
The design language
Tomorro is a contract-management platform that renders in a neo-botanical dark-and-light system: deep forest-canvas sections alternate with warm bone-white panels, both fed by the same Moss-Shadow text and punctuated by an Electric Sprout green. The visual language is quiet, mature, editorial — Ozik display type at ultra-tight 0.86 line-height anchors the hero, Aeonik carries every UI surface, and Instrument Serif drops in sparingly as accent italic-adjacent voice inside badges. Components are mostly pill-shaped (28-40px radius) rather than squared, the floating nav bar looks like a pressed seed, and the green CTA is treated as botanical accent paint, not a brand wallpaper. Pages should read as 70% typography on flat surfaces, 20% product mockups floating at slight angles, 10% abstract green orb atmosphere.
Color palette
brand
Moss Shadow
#273f2bGray action color for filled buttons, selected navigation states, and focused conversion moments.
Lichen Sage
#7e8371Secondary muted text, link underline on dark, and badge border color — sits between Moss Shadow and Pure White as the off-tone voice
Pale Fern
#b7bda5Medium-contrast borders, control outlines, and structural separators.
Electric Sprout
#68ef3fGreen action color for filled buttons, selected navigation states, and focused conversion moments.
Deep Verdant
#26a200Secondary accent for link borders, icon strokes, and hover-active states — a quieter green that supports Sprout without competing
accent
Sprout Wash
#e7f9ddLight green badge background and success-tint surface — the diluted form of Electric Sprout for soft status chips
Mist Green
#d9decaLight sage link border and chip outline on bone surfaces — a low-contrast divider that reads as green without demanding attention
neutral
Onyx Olive
#30322aPrimary achromatic dark — body copy on white, borders on light cards, and the dominant hairline color across the whole system
Pure White
#ffffffLight-section page background, text on dark surfaces, and inverted badge fills — the greenhouse bench
Bone White
#f2f5ebCard surface on light sections — warm off-white that prevents the page from reading sterile, never pure #fff when elevated
Soft Mist
#dcdfe3Cool-tinted heading rule and quiet secondary border — the only neutral that isn't green-tinted
Cool Stone
#d6d6d6Muted UI surface for disabled controls, low-emphasis panels, and placeholder blocks.
Carbon
#222222Link text and border on light surfaces — darker than Onyx Olive, used only where the link must read as a typographic accent rather than a button
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-2xl
80px · 700 · 0.9 · -0.8px trackingThe quick brown fox jumps
display-xl
56px · 700 · 0.86 · -0.784px trackingThe quick brown fox jumps
display
40px · 500 · 1.2 · -1.24px trackingThe quick brown fox jumps
heading-lg
32px · 400 · 1.2 · -0.672px trackingThe quick brown fox jumps
heading
24px · 500 · 1.33 · -0.36px trackingThe quick brown fox jumps
heading-sm
20px · 500 · 1.43 · -0.3px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.5 · -0.378px trackingThe quick brown fox jumps
body-md
16px · 400 · 1.5 · -0.496px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Ozik
- Weights
- 700
- Sizes
- 56px, 80px
- Line height
- 0.86 (56px), 0.90 (80px)
- Letter spacing
- -0.0140em, -0.0100em
- Fallback
- Boldonse, Migra, or PP Editorial New at 700/800 with -0.01em tracking
Hero and section display only — used for two or three words maximum per line. The ultra-tight 0.86 line-height stacks letterforms like glasshouse beams; the heavy weight on a near-black canvas is the system's signature.
Additional typeface
Aeonik
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 40px
- Line height
- 1.20 (32-40px), 1.33 (24px), 1.43-1.50 (body), 1.67-1.71 (small UI)
- Letter spacing
- -0.0310em, -0.0210em, -0.0150em, -0.0120em, -0.0030em, -0.0010em, 0.0130em, 0.1430em
- Fallback
- Inter, Söhne, or Geist at matched weights
Workhorse for every UI surface — nav, body, buttons, cards, inputs, headings up to 40px. 400 for body and labels, 500 for sub-labels, 600 for sub-headings, 700 for section titles and button labels. The negative letter-spacing tightens as size grows, giving headlines a compressed, technical feel without becoming a display face.
Additional typeface
Instrument Serif
- Weights
- 400
- Sizes
- 16px, 18px, 32px
- Line height
- 1.25-1.56
- Letter spacing
- -0.0500em, 0.0280em, 0.0630em
- Fallback
- Source Serif 4, GT Sectra, or Newsreader at 400 italic-leaning
Editorial accent only — drops into badges, small pull quotes, and the occasional 32px sub-heading to break Aeonik's geometric monotony. The serif's organic stroke and slight +0.063em tracking at small sizes are the only warmth this system permits.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 24-40px
- Element gap
- 8-16px
Border radius
nav
28pxcards
16-24pxbadges
20-40pxinputs
24pxbuttons
8px (compact) or 28px (pill)heroOrb
9999pxSpacing scale
3px4px5px7px8px10px12px15px16px20px24px32px38px40px48px56px64px80px128px168px240px256px280pxGuidelines
Do
- Use #68ef3f Electric Sprout as the sole filled action color — every primary CTA, every 'AI' accent word, every active state, every focus ring runs through this one green.
- Set display headlines with Ozik 700 at line-height 0.86-0.90 and letter-spacing -0.01em to -0.014em — the compressed stacking is the signature, not the type size alone.
- Alternate page sections between #122314 Forest Depths and #ffffff Pure White — never blend them with a gradient; the contrast band is the rhythm.
- Use 28px border-radius for navigation, primary pills, and high-trust CTAs; reserve 8px for compact utility buttons and 16-24px for cards.
- Render all body copy in Aeonik 400, all button labels and tags in Aeonik 500-600 — never promote body weight to 700 for emphasis; instead switch one word to Electric Sprout.
- Apply the dark-canvas hairline border (#30322a) at 1px on every dark-section card, button, and input — the dark surface needs a visible frame to read as a component.
- Tilt floating product mockup cards 4-8 degrees and stack 2-3 deep with cascading shadows — flat product screenshots on a dark canvas disappear.
Don’t
- Don't introduce a second accent color — there is no secondary brand color. If Sprout is unavailable for an action, fall back to outlined buttons in Pure White or Onyx Olive, never a different hue.
- Don't use #273f2b Moss Shadow as a background — it is a text and border color. Surfaces are either Forest Depths (dark), Pure White (light), or Bone White (elevated card).
- Don't apply drop-shadows to flat cards, badges, or buttons — elevation is reserved for the floating nav and tilted product mockups.
- Don't set body text at weight 500 or higher; the system relies on Electric Sprout word-switching and size jumps, not bold weight, for hierarchy.
- Don't break the 8px spacing rhythm with 5px or 7px values — the only exceptions are 4px (badge vertical padding) and 3px (icon nudges), every other dimension is a multiple of 8.
- Don't use Instrument Serif for body copy or long headings — it appears at 16-32px only, typically inside badges, captions, or as a single accent heading line.
- Don't put gradient text on dark — gradient is reserved for the atmospheric orb; headlines and body copy are flat fills of Pure White, Onyx Olive, or Electric Sprout.
Components
Floating Pill Navigation
Primary site navigationSits above the page content with 24-32px top margin, full-width up to 1200px container, Onyx Olive (#30322a) at ~90% opacity background, 28px border-radius. Contains the 'tomorro' wordmark left, a small 'Hiring' Electric Sprout (#68ef3f) tag, dropdown buttons with 8px radius in #273f2b, language switcher, and the right-side 'Sign in' outlined button plus Electric Sprout 'Schedule a demo' pill CTA.
Hiring Tag Pill
Status badge in nav8px Aeonik 500, Electric Sprout (#68ef3f) fill, Onyx Olive (#30322a) text, 40px border-radius, 4px 12px padding. Sits inline with the wordmark as a permanent recruitment beacon.
Nav Dropdown Trigger
Top-level menu buttonAeonik 500 14px, Lichen Sage (#7e8371) text, 7px 12px padding, 8px border-radius, transparent background, 6px caret icon. Hovering shifts text to Pure White (#ffffff) over the Onyx Olive nav bar.
Primary CTA — Filled Sprout
Highest-emphasis buttonElectric Sprout (#68ef3f) background, Onyx Olive (#30322a) text, Aeonik 500 14-16px, 8px 20px padding, 8px border-radius (compact) or 28px (pill). One per viewport on dark sections; never more than two adjacent.
Secondary CTA — Ghost with Play Icon
Lower-emphasis video/demo triggerTransparent background, Pure White (#ffffff) 1px border, Pure White text, Aeonik 500 14-16px, 8px 20px padding, 8px or 28px border-radius. Triangular play icon precedes the label at 12px size.
Sign In Outlined Button
Authenticated-user entryPure White (#ffffff) 1px border, Pure White text, 6px 16px padding, 28px border-radius pill. Sits inside the nav bar to the left of the primary CTA.
Event Announcement Pill
Hero announcement chipLichen Sage (#7e8371) 1px border, 4px 16px padding, 9999px radius. Inner content is Aeonik 400 14px Pure White with 'brand-new event on June 4' highlighted in Electric Sprout. Small right-pointing chevron closes the pill.
Display Headline with Accent Word
Hero and section h1Ozik 700 at 56-80px, line-height 0.86-0.90, Pure White on dark / Onyx Olive on light, letter-spacing -0.01em to -0.014em. One word (typically the brand promise's noun) switches to Electric Sprout for visual punctuation — the green word is never more than 3 characters in the hero.
Body Paragraph with Green Inline Link
Supporting hero and section copyAeonik 400 18px, Pale Fern (#b7bda5) or Pure White text on dark at 1.5 line-height, max-width 560-640px centered. Key noun phrases like 'Artificial Intelligence' switch to Electric Sprout without underline.
Trust Logo Strip
Social proof under heroSingle horizontal row of customer logos rendered in Pure White at ~50% opacity on the Forest Depths canvas. 48px logo height, even 32px gaps, centered. Aeonik 400 14px Pale Fern caption above ('They put their trust in us, as do more than 100,000 users').
Floating Product Mockup Card
Hero product showcaseWhite interface screenshot (contract analysis chat with risk indicators) inside a 16-24px radius card, 0 24px 60px rgba(0,0,0,0.35) shadow, tilted -8 to +8 degrees in a stack of 2-3. Each card is 600-800px wide with the front card sharpest and rear cards desaturated or scaled down.
Decorative Sprout Orb
Hero and section atmosphereLarge 400-600px circle, linear gradient from #000000 to #273f2b (or sage-toned variant) with a grainy/noise texture overlay, partially cropped by the viewport. Sits at 30-50% opacity behind the hero copy.
Customer Logo Grid Card
Light-section social proofOnyx Olive (#30322a) or Lichen Sage (#7e8371) brand wordmarks at 40-60% opacity on Pure White, arranged in 4-6 columns with 32-48px row gap. No card chrome — the grid itself is the surface, sometimes a centered headline + green pill CTA break the grid in the middle row.
Input Field
Form inputTransparent or Forest Depths background on dark, 1px Moss Shadow or Electric Sprout border, 24px border-radius, 12px 16px padding, Aeonik 400 14-16px text. Focus state swaps border to Electric Sprout (#68ef3f).
Status Badge (Sprout Wash)
Inline success or category tagSprout Wash (#e7f9dd) background, Moss Shadow (#273f2b) text, Aeonik 500 12-13px, 4px 12px padding, 20-40px border-radius depending on width. Frequently appears on light cards and inside product UI.
Surfaces & elevation
Level 0
Forest Depths canvas
#122314Dark hero and footer stage
Level 1
Pure White page
#ffffffLight content bands, logo grid sections
Level 2
Bone White card
#f2f5ebElevated card on light bands
Level 3
Sprout Wash chip
#e7f9ddSoft green status surface
Level 4
Electric Sprout accent
#68ef3fAction button fill, active highlight
Elevation is used only for the floating nav bar and the tilted product mockup cards — everything else sits flat on its surface. The system refuses decorative drop-shadows; if an element needs to feel raised, it gets a softer surface tint (Bone White on Pure White) instead.
Floating product mockup card
0 24px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2)
Pill navigation bar
0 8px 32px rgba(0,0,0,0.25)
Layout & imagery
Layout
The page model is a centered max-width 1200px container with full-bleed background sections. The hero is full-viewport height with a Forest Depths canvas, centered headline + subhead + dual CTA, and the floating pill nav hovering above with 24-32px of top breathing room. Below the hero, content alternates between dark and light bands at 80-120px vertical gaps: dark feature bands showcase floating product mockup cards in the right two-thirds while copy sits left-aligned in the left third, light bands invert this with a centered headline, a single green CTA, and a 4-6 column logo grid filling the rest of the section. Section dividers are implicit (background color change) rather than explicit lines. The trust strip sits directly under the hero CTA as a single row of muted logos. Navigation is a single pill bar — no sidebar, no mega-menu. Density stays comfortable throughout, with card padding at 24-40px and consistent 8-16px element gaps.
Imagery
Visuals lean on atmosphere, not photography. The hero features a large abstract green-to-black gradient orb with a grainy noise texture, partially cropped by the viewport — it reads as a blurred botanical mass rather than a defined object. Product showcases are floating UI mockup cards (chat interfaces, contract editors) tilted 4-8 degrees and stacked 2-3 deep, always with crisp white card surfaces against the dark canvas. Customer logos appear as desaturated wordmarks (40-60% opacity) in a wide grid, never as photographs. Iconography is minimal: thin line icons in Moss Shadow or Electric Sprout at 1.5-2px stroke, used sparingly for play buttons, dropdown carets, and decorative ticks. No lifestyle photography, no stock imagery, no portraits — the brand speaks through type and product UI alone.
Design notes
Display & Editorial Typography
The system's personality lives in its three-font cast. Ozik 700 owns the hero at 56-80px with line-height 0.86-0.90 — this near-1.0 line-height is non-negotiable; it stacks the heavy letterforms like greenhouse beams and makes the green accent word (usually 1-3 characters) pop. Aeonik 400-700 carries everything below 40px, with the negative letter-spacing growing as size grows (-0.003em at 12px, -0.031em at 16px, -0.021em at 32px, -0.031em at 40px) — this compression gives headlines a technical, almost data-display feel without invoking a separate display face. Instrument Serif 400 appears sparingly at 16-32px inside badges and as the occasional italic-leaning sub-heading, providing the only warm, organic stroke in an otherwise geometric system. Never use Ozik for UI chrome, never use Instrument Serif for body, and never promote Aeonik above 40px — each face has a strict domain.
Agent Guide
QUICK COLOR REFERENCE - Primary text on light: #30322a Onyx Olive - Primary text on dark: #ffffff Pure White - Page background (dark sections): #122314 Forest Depths - Page background (light sections): #ffffff Pure White - Card surface (light): #f2f5eb Bone White - Accent / link highlight: #68ef3f Electric Sprout - primary action: #68ef3f (filled action) EXAMPLE COMPONENT PROMPTS 1. Create a Primary Action Button: #68ef3f background, #222222 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Floating product mockup card — white 700x520px interface screenshot on a 16px border-radius card, tilted -6deg, with box-shadow 0 24px 60px rgba(0,0,0,0.35). Inside: 24px header, 8px Moss Shadow (#273f2b) 1px border for a chat bubble outline, status badges at 20px radius with #e7f9dd fill and #273f2b text. Place at 60% width on the right side of a #122314 section. 4. Event announcement pill — inline at the top of a hero. 1px #7e8371 border, 9999px radius, 4px 16px padding. Body text in Aeonik 400 14px #ffffff, with the phrase 'brand-new event on June 4' set in #68ef3f Electric Sprout, followed by a small right-pointing chevron in #7e8371. 5. Status badge inside a card — #e7f9dd Sprout Wash background, #273f2b Moss Shadow text, Aeonik 500 12px, 4px 12px padding, 20px border-radius. Sits at the top-right corner of a #f2f5eb Bone White card with 24px padding and a 1px #30322a hairline border.
Similar brands
Linear
Same dark canvas + single neon green accent approach, same pill-shaped primary CTA, and the same restraint — typography does the work, color only punctuates action
Pitch
Shares the editorial-meets-product sensibility: mixed dark and light bands, compressed display type, and a single vivid accent (Pitch uses purple, Tomorro uses green) with generous whitespace
Mercury
Comparable trust-strip under hero with desaturated customer logos, max-width centered layout, and a 'one strong color, lots of quiet type' brand posture
Arc
Same neo-botanical palette instinct (Arc leans deep green/charcoal, Tomorro commits fully to it) and the same floating pill nav anchored above a colored hero canvas
Notion
Matches the 'flat surfaces, thin borders, no decorative shadows' philosophy and the same comfort with alternating between light content and dark hero blocks
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
