/* ========================================================================= Raju Tadigiri, REALTOR® — design tokens The single source of truth for colour. Every stylesheet in this folder reads from this list, so changing a value here moves the whole site at once. THE PALETTE IS HOMESMART'S. Raju is a REALTOR® under HomeSmart, and the client asked for the brokerage's colours. Every value below is taken from HomeSmart_Brand_Guidelines.pdf, which carries the global design tokens from homesmart.com. The token NAMES are unchanged from the previous palette, deliberately: nothing else in the project had to be touched. The values that were here before — a brighter red, a bright yellow-gold and a set of warm greys — are recorded at the foot of this file. Loaded first, before any stylesheet that uses it. ========================================================================= */ :root{ /* ---- Primary: HomeSmart Red ----------------------------------------- */ --tr-red: #CD1935; /* logo mark, CTAs, headlines 5.55:1 on white — AA */ --tr-red-rgb: 205, 25, 53; /* the same red as components, for translucent overlays — mirrors --tr-black-rgb */ --tr-red-dark: #A70A23; /* hover / pressed 7.76:1 on white — AAA */ /* ---- Secondary: Ink Black -------------------------------------------- */ --tr-black: #161612; /* HomeSmart Ink Black. Every dark band, the footer, headings on light, and the base of every scrim and shadow below. 18.14:1 against white — AAA The brand PDF labels Deep Navy (#031F30) for "dark sections, footer" and this one for "body text, logo wordmark" — so the bands were built in navy first. The client then inspected homesmart.com directly and confirmed the live site uses #161612. The site wins over the sheet. Both are HomeSmart values, so either is on brand; this is the one they actually ship. Deep Navy is kept in the unused list below in case a section ever wants it. */ --tr-black-rgb: 22, 22, 18;/* the same value as components, so every translucent overlay derives from the one dark instead of inventing its own */ /* ---- Accent: Warm Gold, and its on-white substitute ----------------- */ --tr-gold: #CC8D4F; /* eyebrow labels, star ratings. ON DARK OR PHOTOGRAPHY ONLY. 6.47:1 on the Ink Black — AA 2.80:1 on white — fails, never use it */ --tr-gold-bright: #F5BD02; /* Star gold. The rating stars only. --tr-gold above is HomeSmart's tan and is right for eyebrow labels, but as a star it reads as bronze rather than a rating. This is the bright gold the palette used before the rebrand, and it is within a few steps of the gold inside the Google Reviews badge artwork (#FBB803 sampled), so the two sets of stars on the page agree. */ --tr-gold-deep: #AC6009; /* HomeSmart Rust: the same accent when it must sit on white. 4.74:1 — AA */ /* ---- Text neutrals, on light ---------------------------------------- */ --tr-text: #161612; /* Ink Black — body copy. 17.9:1 — AAA */ --tr-text-muted: #7A7376; /* Grey 500 — meta, captions. 5.5:1 — AA */ /* ---- Text neutrals, on dark ----------------------------------------- */ --tr-ondark-text: #DCDBDA; /* Grey 200 — body on dark. 13.12:1 — AAA */ --tr-ondark-muted: #B8B7B7; /* Grey 300 — meta on dark. 9.07:1 — AAA */ --tr-ondark-bright: #F6F4F2; /* Off-White — utility bar. 16.54:1 — AAA */ /* ---- Surfaces -------------------------------------------------------- */ --tr-white: #FFFFFF; /* cards, header */ --tr-page: #F6F4F2; /* Off-White — light section background */ --tr-band: #F4EDE5; /* Cream — warm section background */ --tr-canvas: #F4EDE5; /* Cream — behind the page */ --tr-strip: #F5F2EB; /* Warm off-white — the top utility strip. Sampled from the swatch the client sent. NOTE: it sits between two colours already in this list — Off-White #F6F4F2 and Cream #F4EDE5 — within 1-7 steps per channel of each, which is below the threshold anyone will see unless the three are laid side by side. Kept exact because it was specified exactly; collapse it into Cream if the palette should stay at fifteen. */ --tr-hairline: #DCDBDA; /* Grey 200 — borders and dividers */ /* ---- Layout ---------------------------------------------------------- */ --tr-radius-control: 4px; /* inputs, buttons, badges */ --tr-radius-card: 6px; /* cards, panels */ --tr-radius-pill: 999px; /* filter pills */ --tr-shadow-sm: 0 1px 0 rgba(var(--tr-black-rgb), .10); --tr-shadow-md: 0 12px 30px rgba(var(--tr-black-rgb), .12); --tr-shadow-lg: 0 18px 44px rgba(var(--tr-black-rgb), .17); } /* ========================================================================= HomeSmart values NOT yet used here, kept so the next person does not have to reopen the PDF: Deep Navy #031F30 the sheet's "dark sections, footer" — not used; the live site uses Ink Black (see above) Maroon #700505 deep red tint Oxblood #48010D darkest red tint Alert Red #CD1919 error state Sky Blue #2C90B7 info / links Green #03953F success Forest #004921 success dark Orange #EB922B warning Rust #AC6009 warning dark Sand #EFDAC5 warm tint Grey 100 #ECEAE9 dividers Grey 600 #61595D captions Grey 700 #453F42 dark UI Grey 800 #2E292C dark UI TYPOGRAPHY: HomeSmart uses Manrope for every role (Google Fonts, SIL Open Font License). This site still ships Newsreader and Plus Jakarta Sans. That is an open decision — colour was asked for, type was not. ========================================================================= Retired in this hand-over from the Team Raju palette to HomeSmart's: #C1121F -> --tr-red (brighter, slightly cooler red) #9E0E19 -> --tr-red-dark #001722 -> --tr-black (already within a whisker of Deep Navy) #F5BD02 -> --tr-gold THE BIG ONE: a bright yellow-gold, which the client called out. HomeSmart's gold is a warm tan. #8A6F10 -> --tr-gold-deep #3F3B35 -> --tr-text warm grey -> Ink Black #6B6660 -> --tr-text-muted warm grey -> neutral Grey 500 #B5AE9F -> --tr-ondark-text warm tan -> neutral Grey 200 #8F887B -> --tr-ondark-muted warm tan -> neutral Grey 300 #E8E2D6 -> --tr-ondark-bright #FCFBF9 -> --tr-page -> Off-White #E3E3E3 -> --tr-band -> Cream #E8E4DD -> --tr-canvas -> Cream #E1DBD0 -> --tr-hairline -> Grey 200 And before that, from the original design comp: #1A1714, #000000, #0E0C0A, #080604, #8E0C16, #D9B441, #E3C25F, #FFD700, #2A2622, #4A4640, #57534C, #C9C0AE, #BDB6A8, #EADFCB. Not tokenised: the translucent whites used for hairlines on dark, and the Google brand colours inside the review mark, which must stay exact. IN PRINT, HomeSmart publishes CMYK for every value above — see the brand PDF. Deep Navy is C94 M35 Y0 K81; HomeSmart Red is C0 M88 Y74 K20. Use those rather than converting the hex. Ink Black is C0 M0 Y18 K91. ========================================================================= */