nine75 design system

• The logo is the one-line wordmark "nine75" in Schibsted Grotesk ExtraBold, with a rounded key in place of the dot on the i (the same 30% corner as a phone key, radius-key). Draw it with the Logo component or the files in Logos; never retype it in the font.
• It is only ever one plain colour: logo (forest green on light grounds, white on dark grounds). Never saffron, never two colours, never black.
• Three colour versions are approved. Main: forest green on white or silver, for the site header, documents, invoices and email signatures. Reversed: white on forest or deep green, for the footer, dark pages, the app icon and profile pictures. Accent: forest green on saffron, for posters and social posts, a few times a year.
• Four forms: the wordmark (Logo), the app icon (variant="app-icon"), the profile circle (variant="profile") and the browser-tab keys (variant="tab", the three pressed keys 9, 7 and 5, only at 16 to 48px).
• Keep clear space at least as tall as the letter n on every side. Smallest size: 72px wide on screen, 20mm in print.
• Not approved: saffron letters, white on saffron and saffron on white (2.2:1, too faint), the stacked "nine / 75" (it reads 9 / 75), the full nine-key keypad, outlines, shadows, stretching.

• Two themes. The website runs Dark (deep green, cinematic). Documents, proposals, invoices, email and printed matter run Light (silver and white). Components read the semantic tokens, so they work in both; never write theme-specific colour.
• The palette has a reason the owner cares about: in Bhutanese tsi (astrology) the founder is Fire, so Wood (forest, deep) feeds it and saffron is Fire itself; silver is Iron, which is neutral. Blue, navy and black are Water and are left out on purpose. Where another system would use black, use deep.
• Grounds: bg for the page, bg-band for alternate sections, surface for cards, fields and sheets, surface-raised for a hovered card, table headers and code.
• Text: ink for headings and primary text, ink-muted for leads, descriptions and meta, ink-dim only for text 24px or larger or decoration. Every pair is 4.5:1 or better on every ground in both themes.
• Saffron (accent) is a fill: the primary button, selected and progress states. Text on it is on-accent (deep green, 7.3:1), never white. Saffron as text or a small mark goes through mark, which turns forest green in Light, where saffron text would be too faint.
• One primary (saffron) button per view. No gradients, no glows except shadow-glow on the primary button's hover.
• success and danger are for form states only, always with a word ("Sent", "Enter your email").

• Two families. Headings are Schibsted Grotesk ExtraBold (font-display, 800), the logo's own face: mega for the home hero only, display-1 for page titles, display-2 for section titles, h3 for card and row titles and FAQ questions. Sentence case, tight tracking, text-wrap: balance.
• Everything else is Geist (font-sans): lead under a title in ink-muted, body for reading (16px, 1.65), ui for buttons, nav and inputs, small for meta and captions, label for eyebrows and tags (uppercase, the only open tracking).
• Heading sizes are fluid: the token shows the size at a 1280px screen and its note gives the phone size and the clamp. Keep the order h1 > h2 > h3; a heading's style follows its level.
• Eyebrows sit above section titles: label in ink-muted with the section number in mark, "02 · Services".
• Numbers that line up (prices, stats, tables) use font-variant-numeric: tabular-nums. Reading text stays within measure (68ch); leads within 58ch.
• Anything a person types into is at least 16px so iPhones never zoom.

• A 4px base: space-1 to space-44. Page gutters are space-5 (phones), space-8 (from 768px) and space-12 (from 1024px); content stops at container (1320px) plus the gutters.
• Sections breathe: padding runs fluid from space-20 (80px, phones) to space-44 (176px, wide screens). Section title to content: space-10 on phones, space-12 from 1024px.
• Grids: a 4 / 8 / 12-column grid for text and a bento grid of 1 / 6 / 12 columns with gaps space-3 / space-4 / space-5 for cards. Cards set their own spans.
• Design at 390px first, then 768, then 1024 and wider. Every tap target is at least touch (44px); default buttons and inputs are control (52px) tall.

• Cards: surface, a 1px line border, radius-lg, shadow-card. On hover (pointer devices) the border goes line-strong and the ground surface-raised; on touch, a press shrinks it to 98%.
• Radii: radius-sm inputs, radius-md media inside cards and callouts, radius-lg cards and sheets, radius-xl hero media and big panels, radius-pill buttons and chips. radius-icon and radius-key belong to the logo's shapes.
• Hairlines (line) divide lists and sections. Glass (a blurred bg at 70%) is allowed only on the masthead once scrolled and on the phone's bottom bar and menu sheet.

• Write plainly, warmly and specifically, in short sentences. Say what the client gets, in their terms.
• The name is always lowercase, nine75, even at the start of a sentence. Never "Nine75", never "NINE75" outside an uppercase label.
• Sentence case for every heading, button and label: "Start a project", "See our work".
• "We" is the studio, "you" is the client. No "I" in site copy.
• No exclamation marks, no emoji, no buzzwords. Banned: leverage, seamless, cutting-edge, elevate, unlock, synergy, "learn more", "get started", "submit". A button names its action: "Send the brief", "Book a call", "See the WordPress plans".
• Formats: prices "Nu. 45,000" with the dollar guide "≈ US$ 540"; dates "12 Mar 2026"; reading time "6 min"; time zone "Bhutan Time (UTC+6)".
• Bhutan shows up as facts (Thimphu, +975, Nu., the phones people use) and as colour, never as clip-art: no dragons, flags, temples or mandalas as decoration.

Examples of the voice: "We design and build the web for Bhutan." · "Priced in Nu., quoted in writing." · "Local support on WhatsApp." · "Taking projects for Q4 2026."

• One set: the site's own hand-drawn 24px line icons, 1.5px strokes in the current text colour, through the Icon component. Eight service glyphs (ux, graphic, brand, wordpress, ai, hosting, domain, migration), interface arrows and marks, and contact glyphs.
• Sizes: 16 in buttons and beside small text, 20 beside body, 24 in contact rows, 32 to 48 heading a service card.
• No icon libraries, no emoji, no filled icons (except sparkle), no tinted boxes or circles behind icons. An icon never carries meaning alone.

• Real work, shown straight: portfolio mockups on white, screen galleries and a real founder portrait. No stock photos of handshakes or laptops, no illustrations of Bhutan.
• Media sits in radius-xl (big) or radius-md (inside a card) frames. Social and link-preview images use the approved logo on silver, forest or saffron, from the Logos group.