White #FFFFFF Page background and card surfaces
Design Standards
Nabbi uses a disciplined two-font system, compact typography sizes, and neutral surfaces with Nabbi blue accents. Structure is created through padding, spacing, and surface contrast rather than borders or decorative styling.
Brand Icon
Official raster asset in blue squircle format.
Nabbi Icon Raster PNG asset at /nabbi-icon.png No SVG recreation or decorative alterations
Icons
Self-hosted Phosphor webfont glyphs, rendered as text characters. No SVG.
arrow-right
check-circle
shield-check
eye
lock-simple
export
graduation-cap
list-checks
x-circle
clock
files
user-circle
Color Tokens
A neutral base with focused blue for interactive states.
Soft gray #F4F4F2 Module containers and quiet sections
Ink #111310 Headings and primary text
Body ink #555A56 Paragraphs and supporting copy
Nabbi blue #1672EC Primary buttons and key links
Blue soft #EAF2FD Highlighted modules and active states
Amber #B7791F Deadlines and attention tags
Red #A33A32 Errors and validation notices
Typography Scale
Restrained sizes to avoid oversized display text and maintain clear hierarchy.
Hero Title (H1) Fredoka Bold, 38px to 56px
Never type your life twice.
Section Heading (H2) Fredoka Bold, 28px / 34px
Scholarship applications are built for repetition.
Item Title (H3) Fredoka Bold, 18px / 22px
Verified student answers only
Body Text Public Sans, 16px
Store your academic history, extracurriculars, and essays in one verified student profile. Nabbi finds scholarships you qualify for and handles repetitive application fields.
Metadata & Captions Public Sans, 13px to 15px
Last updated August 2026. Profile verified by student.
Spacing Scale
Four-pixel increment tokens controlling margins, padding, and gaps.
Space 1 4px
Space 2 8px
Space 3 12px
Space 4 16px
Space 5 20px
Space 6 24px
Space 8 32px
Space 10 40px
Space 12 48px
Space 16 64px
Space 20 80px
Space 24 96px
Control Padding px-4 py-2 (compact) or px-5 py-3 (standard)
Card Padding p-5 to p-8 (20px to 32px)
Section Spacing py-12 to py-16 (48px to 64px)
Component Patterns
Controls rely on solid fills and clear states without border strokes.
Buttons
Form Input
Accessible focus outline without permanent border Due October 18 Eligible
Community Leadership Scholarship
Two of four application sections complete from your student vault.
Prohibited Patterns
Patterns that violate Nabbi visual standards.
- Em dashes used as punctuation decoration
- Oversized hero typography and inflated display sizes
- Border strokes, divider lines, and outlined boxes
- Gradients, glows, bloom, and blurred backdrops
- Any SVG, inline or as a file, decorative or icon
- All-caps eyebrow text above headings
- Monospace or typewriter-style font treatments
- Fake statistics, unsupported metrics, and marketing filler