Ethnus brand guidelines

Which look to use

Ethnus has three looks. They share the logo, the type family and the words. They differ in colour and layout because each one suits its medium.

Every look follows the same principles:

• One accent colour. Everything else is white, neutral greys and ink.
• Flat surfaces with 1 px lines. No gradients, glow, glass effects or decorative shadows.
• Small corners, applied by role. Nothing on a screen is rounder than 8 px, except chips and badges.
• Facts and actions only. No narration, editorial asides or explanatory paragraphs.
• The look comes from the Ethnus brand itself. Do not copy another product's look.

For tools and agents: tokens.css holds every screen and print token as CSS custom properties. This page holds the rules for using them.

Logo

The Ethnus logo has three parts: the ring with the wordmark ETHNUS inside it, the line Explore | Expand | Enrich under it, and the ™ mark. The ring and the line are one piece and always appear together. Only the ™ may be left out.

Files

ethnus-logo-color-hd.png1288 × 1563 px. Also 480 × 480. White and light surfaces.

ethnus-logo-white-hd.png1288 × 1562 px. Also 250 × 180. Brand blue, periwinkle and dark surfaces.

ethnus-logo-black.png1800 × 1800 px. Agreements, policies, photocopies, one-colour print.

ethnus-logo-color-whitebg.png300 × 400 px, white ground. Inside a partner's slides or documents.

ethnus-logo-no-tm.png1288 × 1563 px. Source for the browser tab icon.

Placing the logo

• Colour logo on white and light surfaces. White logo on brand blue, periwinkle and dark surfaces. Never put the colour logo on a dark or coloured surface.
• Keep clear space of at least half the logo's height on every side.
• Set both width and height in the markup. The files have different shapes: the 480 px colour file is square, the 250 px white file is 25:18, the HD files are about 4:5. A logo with width left on auto gets squashed in some phone browsers.
• Alt text is always "Ethnus".
• Do not crop, recolour, rotate, stretch, outline, add a shadow to, or animate the logo. Do not separate the line from the ring.

Logo colours

The ring runs through the full spectrum. The wordmark is violet #3e2584 and the line is warm grey #877b77. These colours belong to the logo artwork only. Do not use them, or the ring's spectrum, as interface or document colours.

Browser tab icon and app icons

• Browser tab icon: the logo without the ™, in one colour. Black when the device is in light mode, white in dark mode, in one SVG that switches on prefers-color-scheme. A grey .ico covers browsers that take no SVG icon. Link both: favicon.svg, favicon.ico.
• Phone app icon: the whole colour logo on a white square. Not a letter E, and not on brand blue.
• Phone dark and tinted icons: the white logo on a clear background for iOS dark mode, the same in greyscale for iOS tinted mode, and a monochrome version for Android themed icons.
• Home-screen icon for a web app: the same as the phone app icon, plus a maskable version with the logo inside Android's round safe zone.
• Generate icons from the HD source files with a script. Do not edit them by hand.

Colour

Brand blue #5350ff is the one accent on screens, in email and on the website. Print uses periwinkle #7c82e0 instead (see Print). Never put the two on one page.

Screen and email palette

• Most of every screen is white and --page. Brand blue marks the one main action and where the person is.
• Lavender --sel appears only behind the selected item. It is not a page, card or section colour.
• Never hard-code a hex value on a screen. Use the tokens.
• Do not add a second accent colour, a gradient, a coloured top bar or a black top bar.

Status

Show a state as an 8 px dot and the word, in body type. Never colour alone, never a coloured pill.

Blue is not a status colour beyond information. Do not add an information blue or use blue to code categories.

Charts

Assign series in this order and never skip one. A chart with one series uses brand blue only. A meaning (done, late, failed, no data) takes its status colour, not a series colour. Gridlines and axes use --line, axis labels --muted. Read values in ink, never in the series colour.

Series 1 to 6 pass the contrast check against a card in both modes. Series 7 and 8 are spares: check them before use.

Contrast

Ratios use the WCAG 2.1 formula. Text needs 4.5:1. Text at 24 px, or 18.5 px bold, needs 3:1. Icons, input borders and focus rings need 3:1.

Type

Roboto is the Ethnus typeface for screens, email and print. The website is the one exception (see Website).

Screens

• Roboto 400, 500 and 700, self-hosted inside the build. Never load fonts from a CDN or from Google Fonts at run time.
• Roboto Mono only for record codes, IDs and reference numbers. Numbers and money use Roboto with tabular figures.
• Indian scripts use self-hosted Noto Sans for each script as the fallback.
• Six sizes, nothing smaller than 12 px. Sentence case everywhere. No uppercase labels and no letter-spaced micro-labels.

Do not use weights 300 or 900 on screens. One weight step is enough for hierarchy.

Email

Font stack Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif. Many mail apps ignore web fonts, so design for Arial and treat Roboto as a bonus.

Print

Roboto 400 and 700, with Light 300 only for big stat values. Roboto Mono for the footer tag, codes and fee figures. Sizes are under Print.

Icons

Every Ethnus surface uses one icon set: Tabler Icons 3.49.0 (MIT licence), outline style, 2 px stroke on a 24 × 24 grid. This covers apps, phone apps, internal tools, email, the website, decks, reports and every PDF.

• Icons ship inside each build and load from our own origin. Never from a CDN, never as an icon font, never by ligature name.
• Outline by default. The filled twin only shows an on or selected state, and the state also shows in colour or words.
• Grey (--muted) by default. Ink or brand blue only when the item is active. A delete or remove icon turns red on hover, never blue. In print, icons are periwinkle.
• Scale the whole icon. Never redraw or restroke one. Sizes: 20 px in navigation, 18 px in buttons and messages, 16 px inline with small text, 40 px on an empty page.
• One icon per meaning across every surface.
• A missing icon shows nothing: not a default glyph, an empty box or a word. The build fails on an icon name that is not in the set.
• A decorative icon is hidden from screen readers. An icon-only button carries a label for screen readers.
• No emoji anywhere: screens, email, print or the website.
• Pin the version and move every surface to a new version together.

Screens

These rules apply to every Ethnus app, web app, phone app and internal tool. They are dense, calm, back-office screens: a list, then a record, then one action.

Shell

Spacing, corners and depth

Panels sit straight on the page. One panel per thing: never a card inside a card, a tinted box inside a card, or a bordered group inside a step.

Buttons

Button labels name the action in sentence case: "Download report", "Send code". Focus shows a 2 px brand outline with a 2 px offset.

Forms

• One column, up to 720 px. Labels above the field in 12 px weight 500 --muted. Floating labels only on the sign-in card.
• Inputs 36 px, 1 px --ctl-line border, 6 px corners, 14 px text. Focus turns the border brand blue with a 1 px brand ring.
• A red asterisk marks a required field. Nothing else uses it.
• Errors show twice: a summary bar on top that links to each field, and a message under the field.
• A sticky footer holds Cancel as a text button on the left and the one primary button on the right.
• Use a constrained control wherever one fits: dropdowns for lists, number inputs with limits, date pickers, dependent lists. Free text only for truly open fields such as a name or a note.
• A money or count box echoes the value in Indian grouping under it from 1,000 up: "1,50,000 · 1.5 lakh".
• A multi-pick list starts with "Select all".
• Names and IDs are generated by the system and shown read-only. People do not type them.
• A form with three or more groups becomes a step rail, one group per step.

Lists and tables

• A title row with the page's one filled button.
• A filter bar above the table: Search first, then up to four filters with labels above, the rest behind "More filters". Applied filters show as removable chips with a "Clear" link. A left filter rail only when a list has more than six filters.
• The table sits in a card with its count. Headers are 12 px weight 500, sentence case. Numbers right-aligned in tabular figures.
• Row height: 36 px in dense, all-day staff tools. 44 px in light tools used now and then.
• A row that opens something shows a pointer and the hover tint.
• Row actions: the main actions as small outlined buttons side by side, the rest behind a vertical three-dot button at the row end. How many buttons show depends on the space. No middle dots between buttons.
• Opening a row: a row with its own page opens the page. A row with a few hidden facts expands in place under itself. A drawer is allowed only for dense read-only information on wide screens, and it is not the first choice.
• A record page has its title, its code in Roboto Mono, its status, up to five key facts, then one row of tabs with counts.
• Every list has loading, empty and error states. An empty state says what is empty and what to do: "No bookings yet".

Navigation

• Step rail for work done in order: numbered circles joined by a line, each with a Done, Now or To do label, the step name and one line of description. Every step can be clicked.
• Underline tabs for different views of one record, in no order.
• Choosing the wrong one is an error. A walk-through with a Next button is a rail, not tabs.
• No title inside a step or a tab. The rail or tab already names it.
• A breadcrumb on every page. The page title, the menu label and the breadcrumb use the same words.
• The address holds the page's state: tab, opened row, filters, sort and page number. Reload restores it and Back goes one step. Clean paths without .html. Search words and personal details never go in the address.

Status, counts and dashboards

• Status is an 8 px dot and the word.
• Count badges are grey --badge with an ink number in 12 px, fully round, and hidden at zero. The unread alerts count is the only blue badge.
• A dashboard has one counter strip of at most five numbers. Where a number comes from sits behind an info icon, not in a line under it.

Messages, toasts and modals

• Messages: 8 px corners, a status tint, an 18 px icon, 13 px text.
• Toasts: bottom centre, inverted (ink background), for confirmations that need no action.
• A result the person must act on opens a modal with the next step as buttons, not a toast.
• Create, edit and destructive actions open modals.
• A modal closes only through its own buttons. A click on the backdrop or the Esc key does not close it. The page behind stops scrolling and sits under a translucent backdrop.
• A destructive modal states what will happen: "Every learner moves to the new batch. This cannot be undone."

Sign-in

• Heading "Welcome to" and the app name, then "by Ethnus".
• Buttons by step: Sign in, Verify, Set password, Reset password, Email me a code. Other links: Forgot password?, Back to sign in.
• A wrong password and an account that needs a reset show the same error, so the screen never reveals which usernames exist.
• Code fields open the number pad and accept exactly the code's length. Every field carries the right autocomplete hint.

Accessibility

• Contrast as in Colour, in both modes.
• A visible focus ring on every control. A label on every field.
• Never colour alone for a state.
• Check every screen in light and dark mode and at 390 px wide.

Email

Every Ethnus email uses the screen colours: system mail, alerts, sign-in codes, letters and newsletters alike.

• Inline every style. Do not rely on a <style> block or web fonts.
• Design for phones on a poor connection first. Keep images small and give each one a width.
• Avoid icons. See Icons when one is needed.
• Words in email may be warm: please, thank you and greetings are fine here. Sign off "Regards," then "Team Ethnus".

Print

Decks (16:9) and A4 documents (reports, proposals, program overviews, letters, agreements, policies) use the print look: white pages, one soft periwinkle accent, near-black type, thin hairlines and generous space. No gradients, glow, emoji or dark slides. The values were measured from approved Ethnus reference files and are fixed.

Print palette

Text on periwinkle is always white. Do not use brand blue #5350ff or any generic blue in print.

Charts and diagrams use four pairs, in order: periwinkle #7c82e0 on #f0f1fb, amber #b45309 on #ffeeda, teal #0176a8 on #dcf3fc, rose #9a3e63 on #fdecea. A partner's chip uses the partner's own colour as text on a light tint of it.

Known contrast gaps, kept from the approved files: periwinkle on white is 3.4:1, so periwinkle text must be at least 14 pt bold (use --primary-dark below that). White on periwinkle is 3.4:1, fine for the large cover and divider text only. --ink-faint on white is 2.8:1, so kickers and the footer centre line are decorative, and nothing important may live only there.

Frame

• Ribbon: a periwinkle bar from the left page edge (x = 0) with a 45° chamfer cut from its bottom-right corner. At 1920 × 1080: 723 px bar, 14 px chamfer, 14 px tall, top edge 61 px from the top. On A4: 127.3 mm bar, 2.5 mm chamfer, 2.5 mm tall (61.5 mm for letters and agreements). One ribbon on every content page. Never on title, divider or closing slides, and never drawn as an arrow.
• Logo: top right. At 1920 × 1080: colour logo 91 px tall, 36 px from the top, 72 px from the right on content slides. White logo at the same spot on dividers, and 250 px tall, 91 px from the top, 125 px from the right on title and closing slides. On A4: colour logo 20 mm tall, 12.7 mm from the right edge, centred on the ribbon. Agreements use the black logo at 16 mm.
• Footer: three parts on one baseline. Left, <Codemithra /> in Roboto Mono, ink. Centre, "© Ethnus | www.ethnus.com | www.codemithra.com" in --ink-faint. Right, "Page N" in ink. 13 px on slides, 6.5 pt on A4. Pages are numbered from the first content page. Agreements and policies use "© Ethnus | www.ethnus.com" and the page number only.
• Margins: slides have 125 px side padding at 1920 px, and everything under the headline is indented a further 68 px. A4 has 22 mm side padding, a 32 mm top margin for the running header and a 14 mm bottom margin.
• Left-align everything. Only text inside a diagram shape is centred.

Deck type at 1920 × 1080

Slide types: title, section divider, standard content, two columns with an accent panel, feature cards (three or four), stat cards (two to four), numbered step chain (three to five steps), data table, label and value rows, chart or diagram, screenshot, tinted highlight (once, near the end) and closing ("Thank you" and at most the deck's title). One message per slide, stated in the headline. No agenda or "Questions?" slides unless asked.

A4 type

On A4, headings are periwinkle. On slides, headlines are near-black. That difference is deliberate.

A4 cover: full-bleed #7c82e0, white text, centred. White logo 62 mm tall. Title 34 pt bold in Title Case, a short white rule under it, an optional italic subtitle, then "Submitted to" and "Prepared by", and the date as "15 November 2026". The cover is always a page of its own.

Components: table headers in a solid periwinkle fill with white bold text, zebra rows in #f7f8fe. Accent panels in #eff0fb with a periwinkle left rule. Status badges are ink text on a tinted fill with 4 to 6 px corners. No corner larger than about 8 px. A table of contents in #6c6ff5 with dotted leaders, every entry a link.

Website

The company website shares the brand blue, the logo, the icons and the words, and keeps its own type.

Partner pages

A public page for a program that a partner runs may carry the partner's colours and typeface, because the program is theirs. Everything else stays Ethnus: the layout rules on this page, the words, the Ethnus colour logo on white, and corners of 8 px or less. The staff side of the same program (admin screens, reports, email) follows the Ethnus look in full.

Words

Write plain Indian English that a new reader understands on first read. These rules cover screens, email, documents and the website. They do not cover code, identifiers or commit messages.

No narration

• Screens and documents state facts and actions. No narration ("In this section we will"), no editorial asides, no tips, no comments, no explanatory paragraphs.
• A page gets at most a one-sentence lede. Rules and detail go behind Help.
• No courtesy prose on slides or screens: no "Thank you for partnering with us", no "Prepared by Ethnus on".

Spelling

British forms: colour, behaviour, organise, analyse, authorise, centre, licence (noun), enrol, enrolment, cancelled, travelled, catalogue, dialogue, fulfil, instalment, judgement, grey. One exception: always program, never programme, in both senses.

Names

Terms

One word per concept. Do not vary it for style.

Punctuation and format

• No em dash or en dash anywhere. Use a full stop, comma, colon or pipe.
• No semicolons. Write two sentences.
• Sentence case for headings, tabs, buttons, menu items and email subjects. Title Case only for a deck or document title on its cover.
• No emoji. At most one exclamation mark per message, and only for good news.
• Oxford comma only when a list would otherwise be misread.
• Straight quotes on screens.
• Dates on screen: 13/08/2026. Dates in print and email body: 13 August 2026.
• Money: ₹ with Indian grouping, ₹1,20,000, ₹2.5 lakh, ₹1.2 crore.
• Phone: +91 98765 43210.
• Full names, no honorifics: "Dear Priya Sharma". Sign off "Regards," then "Team Ethnus".
• Expand an acronym on first use.

How screens speak

Screens, errors, toasts, alerts, chat, push messages and SMS are plain and direct. Email may be warm.

• No politeness padding on screens: no please, kindly, sorry, unfortunately or "we apologise".
• Lead with what the person can do. Pair a negative fact with the action, or say no action is needed.
• An error says what is wrong and what to do. No blame.
• Instructions start with the verb: "Select the checkbox to assign a trainer."
• Short sentences, one idea each: what happened, why when it helps, what to do next.
• No sentence starts with "Nothing". Say what is there, or what to do.
• No figures of speech or colour words for a state: say saved, runs, refused, checked, still applies.
• No "never" for a state. Say what the state is now and what happens next.
• Name actions in the person's words: "Email me a code", not "Request OTP".
• Avoid hype (seamless, robust, powerful, cutting-edge, world-class, unlock, empower, leverage), hedging ("It is important to note that") and forced lists of three.

Release checklist

Check these before any screen, email or document goes out.

• Colours come from the tokens on this page. No new accent, no hard-coded hex on a screen.
• The right look for the medium: screen blue on screens and email, periwinkle in print.
• The colour logo on light surfaces, the white logo on dark, each with a set width and height and alt text "Ethnus". The logo is whole, with its line.
• Both browser tab icons are linked.
• Roboto (Poppins on the website) and Tabler Icons are the only fonts and icons, packaged in the build, none from a CDN.
• Nothing on a screen is rounder than 8 px except chips and badges. Cards are flat.
• One filled button per screen. Status is a dot and a word.
• Text passes 4.5:1 in light and dark mode. Selected labels use --sel-ink.
• On a 390 px wide phone the panel collapses and nothing scrolls sideways.
• Words: sentence case, Indian English, program, learner, no em dashes, no semicolons, no emoji, no narration.
• Internal tools carry the legal name and "authorised use only" in the footer.

Decisions and changes

Version 1.0 brings the earlier guides into this one page. These decisions settled the points where they disagreed.