Wordnerds
— Styling & Brand Guidelines

1. Brand Identity

Wordnerds is a professional text-analysis platform. The visual language is bold but clean: a high-contrast dark chrome (near-black nav/sidebar) punctuated by a signature amber/yellow primary accent, with neutral greys forming the content canvas.

2. Colour Palette

Primary Brand

Name	Variable	Hex	Usage
Brand Yellow	`$brand-yellow`	`#FAB316`	Primary action colour, active states, CTAs, highlights, scrollbars, icons
Off Black	`$off-black`	`#222222`	Navbar, sidebar, dark footers, keyword submit bars

Sentiment Scale

Name	Variable	Hex	Usage
Very Happy Green	`$very-happy-green`	`#6BB32D`	Positive sentiment, success states
Happy Green	`$happy-green`	`#95C11F`	Mildly positive sentiment
Neutral Grey	`$neutral-grey`	`#CFD9DF`	Neutral sentiment, rule rows, volume bars
Sad Orange	`$sad-orange`	`#EA752B`	Mildly negative sentiment
Angry Red	`$angry-red`	`#E94C1E`	Negative sentiment, errors, danger states

Grey Scale

Name	Variable	Hex	Usage
Dark Grey	`$dark-grey`	`#444444`	Body text, icons, hover states
Mid Grey	`$mid-grey`	`#707070`	Secondary text
Light Mid Grey	`$light-mid-grey`	`#7A7A7A`	Muted labels, placeholder text
Menu Grey	`$menu-grey`	`#555555`	Sidebar separators
Border Grey	`$border-grey`	`#b9b9b9`	Borders, dividers
Off Black Muted	`$off-black-muted`	`#bfbfbf`	Dividers on dark backgrounds
Background Grey	`$background-grey`	`#EEEEEE`	Page background
Light Grey	`$light-grey`	`#EAF0F4`	Card footers, form backgrounds
Lighter Grey	`$lighter-grey`	`#f8f8f8`	Card backgrounds
Lightest Grey	`$lightest-grey`	`#fafafa`	Elevated surfaces, modals

Social / Functional

Name	Variable	Hex
Facebook Blue	`$facebook-blue`	`#3b5998`
Twitter Blue	`$twitter-blue`	`#1DA1F2`
Automated Cluster Blue	`$automated-cluster-blue`	`#39B8E1`

Semantic Mappings

Role	Resolves to
`$primary`	`$brand-yellow` (#FAB316)
`$link`	`$brand-yellow` (#FAB316)
`$grey-dark`	`$dark-grey` (#444444)
`$grey-light`	`$light-grey` (#EAF0F4)

3. Typography

Typefaces

Role	Font Stack	Variable
Primary sans-serif	`museo-sans, sans-serif`	`$family-sans-serif`
Rounded / display	`museo-sans-rounded, sans-serif`	`$family-sans-serif-rounded`

Museo Sans Rounded is reserved for display use: headings, sidebar labels, login screen hero text, error pages, card headers.

Type Scale

Token	Size	Usage
`$size-1`	`2.35rem`	Large display headings (sidebar h1)
`$size-3`	`2rem`	Card header titles
`$size-4`	`1.31rem`	Sidebar section labels
`$size-5`	`1.125rem`	Body copy, topic text, league table rows
`$size-6`	`1rem`	Base body size, main content
`$size-7`	`0.85rem`	Fine print, card footers, metadata

Base font size: 16px at widescreen+, scales to 14px at widescreen-only, 12px below widescreen.

4. Spacing System

A utility spacing scale ($spacers) maps to CSS margin/padding helpers (m-{n}, p-{n}, mt-{n}, etc.):

Token	Value
0	`0`
1	`0.125rem`
2	`0.25rem`
3	`0.5rem`
4	`1rem`
5	`1.5rem`
6	`2rem`
7	`2.5rem`
8	`3rem`
9	`3.5rem`
10	`4rem`

The global content gap is $gap: 30px, used for sidebar margins and content wrapper padding.

5. Layout

Navigation

Navbar: fixed, full-width, $off-black background, z-index 100
Height: mobile 60px → tablet 70px → desktop 80px
Logo max-height: 2.8rem

Sidebar

Fixed left, 19.5rem wide (collapses to 48px when retracted)
Background: $off-black; text: white
Active link indicator: 5px solid #fab316 right border + $dark-grey background
Section labels: museo-sans-rounded, $size-4, medium weight
Smooth transitions on expand/collapse: 0.5s ease-in-out

Main Content

margin-left: 48px (sidebar retracted width)
Background: $background-grey (#EEEEEE)
Content wrapper: max-width 1280px, padded with $gap (30px), centred

6. Component Patterns

Cards

Standard shadow card (.card-shadow): box-shadow: 0 2px 20px 0 rgba(0,0,0,0.1), $lightest-grey background
Post card (.post-card): border-radius: 1.5rem, white body, $light-grey footer
Project card (.projects-card): $off-black base, white header, #EAF0F4 footer, border-radius: 1.5rem, scales on hover
Card headers use museo-sans-rounded, normal weight, $size-3

Buttons

Class	Style
`.button.callout`	`$brand-yellow` background, white text, `border-radius: 1.5rem`, uppercase, `padding: 1.3rem 2rem`
`.button.secondary-callout`	White background, `$brand-yellow` border + text, `border-radius: 1.5rem`, uppercase
`.button.is-primary`	`$brand-yellow` background, white text
`.explore-button`	`$off-black` background, `#fab316` border; inverts on hover

Rounded buttons use min-width: 80px. Input radii typically 2rem–3rem for pill style.

Scrollbars

Custom scrollbars via addScrollBar mixin — consistent pattern across modals and panels:

Track: matches container background
Thumb: $brand-yellow, border-radius: 4px, 8px wide
Hover thumb: #8e8e8e

Sentiment Indicators

Colours map directly to the sentiment scale:

State	Colour
Very Happy	`$very-happy-green` #6BB32D
Happy	`$happy-green` #95C11F
Neutral	`$neutral-grey` #CFD9DF
Sad	`$sad-orange` #EA752B
Angry	`$angry-red` #E94C1E

Used in satisfaction bars, sentiment faces (SVG icons), graph keys, and mention counts.

Data Visualisation Colours

16-colour sequential palette for graphs (toggle switches, series):

#e6194B · #3cb44b · #ffe119 · #4363d8 · #f58231 · #42d4f4 · #f032e6 · #fabebe · #469990 · #e6beff · #9A6324 · #b5ae6d · #800000 · #aaffc3 · #000075 · #a9a9a9

Rule Builder

Light grey background ($light-grey), dashed $brand-yellow border, border-radius: 6px
Rule rows: $neutral-grey, border-radius: 1rem

Logic Pills

Black background, $brand-yellow text, small bold font, border-radius: 1rem

Beta Badge

$automated-cluster-blue (#39B8E1) background, #fafafa text

Help Button

Circular, $brand-yellow background, black text

7. Form Elements

Input borders: border-radius: 2rem–3rem (pill style throughout)
Placeholder text: $light-mid-grey
Danger state: $angry-red border
Validation password strength meter maps: 1→$angry-red, 2→$brand-yellow, 3→$sad-orange, 4→$very-happy-green

8. Login Screen

Left panel: $brand-yellow background (or custom image), white uppercase display text in museo-sans-rounded at 5rem / 900 weight; last word in $off-black
Right panel: $dark-grey (#444444) background, white labels, $light-grey instructional text
Logo max-width: 12rem

9. Motion

Use	Value
Sidebar expand/collapse	`0.5s ease-in-out`
Sidebar link transitions	`0.4s ease-in-out`
Explore card hover lift	`transform: translateY(-10px)`, `0.3s`
Project card hover scale	`transform: scale(1.1)`, `0.3s ease-in-out`
Loading blink	`opacity` animation, 1s linear infinite, 50% → `0.25`
Disclosure chevron rotate	`0.5s ease-in-out`, 0° → -180°

10. Design Principles Summary

Dark chrome, amber accent — navigation and structural chrome are near-black; the brand yellow (#FAB316) provides all interactive affordance and active-state signalling.
Sentiment is colour-coded consistently — the green→grey→red scale is used everywhere sentiment appears; never repurpose these colours for other meanings.
Rounded everything — pill inputs, rounded cards, circular badges; hard corners are rare and deliberate.
Typography hierarchy via family — body copy in Museo Sans; display/brand moments in Museo Sans Rounded.
Subtle elevation — shadows are soft and low-opacity (rgba(0,0,0,0.1)); depth is indicated by shadow, not hard borders.

Wordnerds— Styling & Brand Guidelines