Wordnerds — Platform UI Styling Spec

1. Scope

This is the styling reference for the Wordnerds platform UI (the product application) — its SCSS variables, fixed type and spacing scales, layout chrome, and product components (data tables, charts, the rule builder, the login screen).

The shared brand identity, colour values, radii, shadows and design rationale are documented once in the design system (and tokens.css) — the platform and the marketing site both build on them. The marketing site additionally uses fluid type/spacing tokens, also documented there. This document covers only what is specific to the platform; where it restates a colour or value, the design system is the source of truth.

Brand identity (shared): a high-contrast dark chrome (off-black nav/sidebar) punctuated by the signature amber/yellow primary accent, with neutral greys as the content canvas. See the design system for the full rationale.

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.