Links

https://brand.rochester.edu/visual-identity/
The Ultimate Guide to Creating a Design System — Part One, Colors

Notes

NSUHCI-DIAL bridges top-tier academic research and real-world human impact by designing inclusive, accessible technology for underserved communities in South Asia and beyond. Through hands-on field studies and international collaborations, we turn complex human experiences into transformative, human-centered digital solutions.

• im planning on including like previous logo and listing exactly what was wrong with it with like higihging the problems
• then next slide we show the new rebranded logo and show how everything was fixed and point it out and stuff
• then a grid showing mockups
• then we show logo clearance and next slide we show how to pair is with pattern brands
• etcs we show the D part of the logo being used as a favicon and there was a part where the logo shows a boy and girl and detialed icon like bathroom signs geometry we could make a spin off on that
• and then we show colors, cobinations, primary, working combos , etc
• then we show typography , heading size , subheading size , and then we show a mono font cause its a research lab also we can expriement with a bionic font perhaps ask bisshoy bhiaya on this

Tone and Voice Guidelines

How We Sound:

Clear, human, and authoritative. We speak like a passionate research mentor—grounded in evidence, deeply respectful of the communities we serve, and eager to share knowledge without hiding behind academic jargon.

• take the tone voice with a grain of salt as they were ai gened we will need to polish that out
• i wanted to change the typographic choices to something more accessible
• need to make a color palette compatible with WCAG
• Brand Personality - Empathetic,Rigorous,Inclusive,Purposeful
• Empathetic is warm, human, and deeply attentive to community needs, but it is not sentimental, overly emotional, or patronizing
• Rigorous is scholarly, clear, and evidence-backed, but it is not dry, distant, or bogged down in impenetrable jargon
• Inclusive is welcoming, accessible, and open to all backgrounds, but it is not unfocused, chaotic, or lacking clear standards.
• Confident is authoritative about our research impact, but it is not arrogant, corporate, or exclusive.
• we have a rebranded logo which simplifies the previous one by reducing the lines and now that is better for visablity, better more acessiblity works greater in smaller conditions now i need to shocase all that in the presentation

Resources

• i need to add notes on why the new logo is better than the old logo
• include figdifferent file formats
• write down the dos and donts in text like the university of rochester
• include and make a favicon
• great example of color system Color System University of Rochester Brand Center
• including moodboards in the presentation can help sell the redesign even more
• maybe expriment with motion design for one of the
• include a project overview
• include a challenge explaining the challenges of redesigning the file
• have the redesign presentation width and heights ware based on the situation but have the primary design identity file a4 so it is printable
• have a clean bento box page show casing all the different logo variations like this https://www.behance.net/gallery/239934705/Rogtra-SaaS-Branding-Startup-Logo-Brand-Identity?tracking_source=search_projects%7Cbrand+redesign+identity&l=3

Visual Identity

The colors are HEX #062540 CMYK 91, 42, 0, 75 HEX # 144B80 CMYK 84, 41, 0, 50 HEX # F78F28 CMYK 0, 42, 84, 3 the blue is the primary color

Color System (WCAG-checked)

Role	Hex	On white	On black	Use as text?
Primary — Navy	#062540	15.6:1 (AAA)	—	Yes, anywhere
Secondary — Blue	# 144B80	8.95:1 (AAA)	—	Yes, anywhere
Accent — Orange (bright)	# F78F28	2.36:1 (fail)	8.91:1 (AAA)	No — graphics/large fills/icons only, never as text on light bg
Accent — Orange (deep, new)	# B85E1E	4.51:1 (AA)	4.66:1 (AA)	Yes, when orange needs to be text or a small UI element

Notes:

• Orange on Navy = 6.62:1 (passes AA, not AAA) — safe combo for orange text/labels on dark backgrounds.
• Orange on Blue = 3.80:1 — large text/UI only (≥3:1), not body text.
• Bright orange (#F78F28) is decorative-only under WCAG — reserve for logo, illustrations, large color blocks. Use deep orange (#B85E1E) anywhere orange needs to carry text or pass as a functional UI color.

Typography

• Plus Jakarta Sans
  font type - geometric Sans-Serif
  Designer: Gumpita Rahayu from tokotype
  Why is works: it has clean circular geometric design which shows a friendly tech aesthetic such as from google as well it has high legibility with its high x height which makes it easier to read on all screen sizes and plus jaktarta sans feels human as it was designed to represent the city

Brand Guidelines

This is for the presentation or final brand guideliens table of content perhaps i will make but resorting to figma template for the presenation that will just present the rebranded logo and why it is better than the original

• Intro page
  Animated maybe
• Introduction/Project Overview page with contents
• Old Logo Timeline
• Challenge explaining the challenges of the redesign
• before and after with the new logo
  make a few for pages to show in details the changes made and why they were made
  this would only be included in the presentation bento grid box showcasing the new logo
• Mood board for just the logo
• Typography just one font
  • i picked plus Jakarta sans and thinking about including a mono spaced font
  mention why i picked this font
• Colors and the color system with accessibly and if you have time cover color pairings show AA , AAA pass badges

Intro page

Slide 1: Dial Brand guidelines

• need to change the colors to fit the brand colors
  Slide 1.5 - Project overview talk about the brand personality bisshoy bhiaya can edit it later and how it influenced my decisions for every design choice
  Slide 2: Original Logos Lookup
• What was wrong with it: too many lines/detail, breaks down and doesn't work at smaller sizes, unpleasant color combination
• Need to explain what is wrong with it in the next slide using grayed outside grids to show the inconsitentices with red highlighitng inside of text
  
  Slide 3 Redesigned Logo
• show the changes in consistentecy using the same grid pattern
  show mockups in the next slide
  Slide 4 - Scale of the redesigned logo
• showcases how it works in different sizes
• the redesigned logo works in smaller sizes due to its more simple design ands remains recognizible even in smaller conditions the main usecase is for phone interfaces
  Slide 5 partnership logo pairing
• just show it being paired with another google logo
  Slide 6 - Dos and Donts with the logo
  Slide 7 - Extras the D and Logo
• show clear space in the same slide
• slide 7.5 Showcase mockups
  Slide 8 Patternship with the D logo
  Slide 9 - Colors
• show with the 60/30/20 rule
  Slide 10 - Contrast check
  Slide 11 - Typography
  Why is works: it has clean circular geometric design which shows a friendly tech aesthetic such as from google as well it has high legibility with its high x height which makes it easier to read on all screen sizes and plus jaktarta sans feels human as it was designed to represent the city

Aug 13 7:49

The project is current very stagnant but current ideas are

• redesigned pictograms simplified
• using claude to write out the text bits connecting it via the figma and claude api
• need a set px size for the logo or it fails to work in smaller sizes
  Aug 23 5:36
• okay im revistng this again once and for all im gonna set a clear direction and finish in two days or so
  what i personally think is missing from this
• any kind of story however i dont think project really needs a story its more of a rebranding or you can say modernization which really speaks with us making the logo simplier however this is affecting me because like its a real acessiblity brand so it should be better but this thought is leading me outside of my skill sets so i think we should keep the visuals high while keeping the true meaning low and just focusing on the true high impact points such as.
  • typography
  • color
  • logo
  • clear brand story
  • clear brand values
  • how the new logo is better than the old one
    after all these are literally set in stone and extremely clear and actually functional we can move on to other stuff such as
• clearspace , patternship
• new symbols and modernized symbol system by that i just mean by type of symbols or icons to use i dunno i just came up with that idea because its a lab
• some extra touching points are i have the freedom to tweak the logo or colors from the current style for the better if i can back up with solid reasonings which is something i want to do specifically to the color because