anara.com — Design Language

1. Visual Theme & Atmosphere

Anara is a product that leans into warmth, craft, and approachability — unusual for a B2B SaaS. The design’s most distinctive choice is its headline typeface: “Perfectly Nineties”, a custom serif with retro editorial character, used at large display sizes to give the marketing site a personality that stands apart from generic tech products. Beneath that expressive layer, Inter carries the functional UI work. The palette is restrained: white, near-black, and a single light grey — but four named font tokens (including “ITC Garamond” for testimonials) hint at a rich typographic philosophy. The overall atmosphere is polished and grounded, with craft details in the type choices that reward close attention.

2. Color Palette & Roles

Primary backgrounds

• hsl(0 0% 100%) (--background-primary) — Pure white page canvas.
• rgba(255, 255, 255, 0.9) — Header background; near-opaque white for sticky navigation with subtle see-through effect.
• rgb(247, 247, 247) — Section background (div.md:mt-16); very light grey for content zone separation.
• rgb(255, 255, 255) (--background-object) — Object/card surfaces.

Text hierarchy

• hsl(0 0% 9%) (--text-primary) → rgb(23, 23, 23) — Primary body and heading text; not pure black, reads with warmth.
• #666666 (--text-secondary) — Secondary labels and captions.
• #9a9a9a (--text-tertiary) — Tertiary text, placeholder content.
• hsl(0 0% 0%/20%) (--text-muted) — Muted/disabled text at 20% opacity.
• hsl(0 0% 100%) (--text-inverse) — White text on dark surfaces.
• hsl(0 0% 0%) (--background-inverse) — Inverse surfaces (black backgrounds for contrast sections).

Borders & controls

• #e5e5e5 (--border-primary) → rgb(229, 229, 229) — Universal border colour; consistent across all interactive elements.
• hsl(0 0% 0%/5%) (--border-muted) — Very subtle borders on nested elements.
• hsl(0 0% 94.9%) (--control-primary, --control-secondary) — Control/input background.
• hsl(0 0% 0%/10%) (--control-background) — Tinted control surface.

No accent colour is defined. The design deliberately avoids a brand accent, relying entirely on the typeface personality and layout craft to create visual distinction.

Interactive hover surface

• rgba(237, 237, 237, 0.99) — Button/nav item hover fill; a light grey tint, no colour shift.

3. Typography Rules

Four typefaces, each with a precise semantic role:

Perfectly Nineties — Display / hero serif. Used only for h1 and h2:

Weight 550 is a mid-weight between regular and semibold — supported via a variable font or OpenType fvar. Tight line-height (near 1:1) creates dense, magazine-editorial title blocks. Negative tracking at large sizes only.

Inter — UI / functional sans. Used for all non-display elements:

Body text uses font-weight: 500 (medium) universally — heavier than the standard 400, giving copy a confident, slightly editorial presence. Buttons use 550, same as the display headings.

ITC Garamond (--font-testimonial) — Used exclusively for testimonial/quote blocks. Classic advertising serif that lends authority and warmth to social proof sections.

Inter Display (--font-inter-display) — Defined as a token but not observed in the extracted typography selectors. Reserved for larger Inter usage (Inter Display is optically tuned for large sizes).

What is absent: no monospace, no uppercase transforms, no font-feature-settings beyond defaults.

4. Component Stylings

Navigation buttons — Transparent default, rgba(237,237,237,0.99) fill on hover and focus. No border colour change. No shadows. Colour shifts from rgb(0,0,0) to rgb(23,23,23) on hover — a subtle warming rather than a true colour change.

Border radius vocabulary — Multiple radii for different component scales:

• 8px — Standard small components, inputs, tight cards.
• 10px — Slightly larger interactive elements.
• 12px — Medium cards and panels.
• 16px — Large cards.
• 20px — Large rounded panels.
• 16px 16px 0px 0px — Top-only rounding; drawer/panel headers.
• 20px 20px 0px 0px — Larger top-only variant.
• 9999px — Full pill for badges and CTAs.

Shadows — None extracted. The design relies entirely on surface-colour contrast and borders for depth.

Header — Frosted white at rgba(255,255,255,0.9) with #e5e5e5 border; sticky with subtle transparency.

5. Layout Principles

Pure Tailwind CSS. A rich breakpoint set reflecting mobile-first product marketing: 375px, 480px, 600px, 640px, 768px, 1024px, 1270px, 1280px, 1536px

The custom breakpoints at 375px (iPhone SE) and 480px (small mobile) indicate careful mobile attention. 1270px (near Tailwind xl) suggests a custom container max-width. The token --unriddle-orange appearing in custom properties suggests design system cross-pollination (possibly shared with a related product).

Body spacing is utility-driven; no explicit spacing tokens beyond the structural layout props. Sections use div.md:mt-16 for top margins — a Tailwind-native approach.

6. Depth & Elevation

No box-shadows. Depth is constructed from:

• Background steps: white #ffffff → light grey rgb(247,247,247) for section layering.
• Header transparency: rgba(255,255,255,0.9) creates a perception of content scrolling behind.
• Border lines: #e5e5e5 at every component boundary; subtle but consistent.
• Top-only border-radius (16px 16px 0px 0px) creates panel-docking depth illusion.

This is an exceptionally flat design where the personality comes entirely from typography, not chrome.

7. Do’s and Don’ts

Do:

• Use Perfectly Nineties only for h1/h2 display text — it’s the visual signature, not a body font.
• Set body text at font-weight: 500; the medium weight is deliberate and distinctive.
• Use ITC Garamond for any testimonial or pull-quote elements.
• Apply consistent negative tracking (−0.32px) at 16px and above.
• Keep the hover state as a light grey fill (rgba(237,237,237,0.99)) — no colour accent.

Don’t:

• Don’t introduce an accent colour; the palette is intentionally accent-free.
• Don’t add drop shadows; the design is purposefully flat.
• Don’t use Perfectly Nineties below h2 — it loses impact and becomes illegible at small sizes.
• Don’t use font-weight: 400 for body text; 500 is the baseline here.
• Don’t use sharp corners (border-radius: 0) — even minimal UI elements use at least 8px.

8. Responsive Behavior

Nine breakpoints covering the full device spectrum:

• 375px / 480px: Small/standard mobile — careful attention to small screens.
• 600px: Large mobile / small tablet boundary.
• 640px / 768px: Tailwind sm / md.
• 1024px: Tailwind lg / desktop.
• 1270px / 1280px: Custom container max-width + Tailwind xl.
• 1536px: Tailwind 2xl.

Display typography (h1: 72px, h2: 56px) will need meaningful reduction on mobile (suggest 40px / 32px) though explicit mobile overrides are handled in Tailwind utility classes not captured in the CSS selector extraction.

9. Agent Prompt Guide

“Design in the style of anara.com: pure white background, rgb(23,23,23) text (not pure black). Hero headlines in ‘Perfectly Nineties’ serif at 550 weight with tight 1.1 line-height and slight negative tracking. Body and UI in Inter at weight 500 (not 400 — medium is the baseline). ITC Garamond for testimonials only. Border #e5e5e5 everywhere, no accent colour, no shadows. Border-radius vocabulary: 8px (small), 12–16px (cards), 9999px (pills). Button hover: rgba(237,237,237,0.99) fill only. Nine responsive breakpoints from 375px to 1536px.”

Generated by Sparkbites — extracted from live CSS analysis