Logo Variations

Color Palette

Semantic Colors

Gray Scale

Primary Blue Scale

Typography

Typography Scale

A consistent type scale creates visual hierarchy and improves readability across all interfaces.

Icon Construction

Clear Space

Minimum clear space = height of the logo icon (1x)

Business Card

Letterhead

Website

Mobile Application

9:41 100%

cite.codes

iPhone 17 Pro Max bezel

Brand Pattern

Vehicle Wrap

Button Styles

App Icon

Favicon

Social Media

Email Signature

Form Elements

Badges & Status

Notifications

Cards

Document Cover

Logo Usage Guidelines

Gradient System

Icon Library

Loading States

Data Visualization

Data Tables

Navigation

Search

Modal Dialog

Avatars

Sidebar Navigation

Progress Steps

Pricing Cards

Stats & Metrics

Testimonials

Keyboard Shortcuts

Code Blocks

const getStormReport = async (zip: string) => {
  const response = await fetch(
    `/api/storm-reports?zip=${zip}`
  );
  return response.json();
};

Breadcrumbs

Pagination

Tags & Chips

File Upload

Empty State

Skeleton Loaders

Tooltips

Dropdown Menu

Timeline

Spacing Scale

Border Radius

Shadow Scale

Responsive Breakpoints

12-Column Grid

Link Styles

Consistent link styling helps users identify interactive elements. Use underlines for inline links.

Focus States

Visible focus indicators are essential for keyboard navigation. Use a 3px blue outline with 2px offset.

.focus-ring:focus {
    outline: 3px solid var(--color-primary-blue);
    outline-offset: 2px;
}

.focus-ring--dark:focus {
    outline-color: white;
}

Minimum Sizes

Minimum sizes ensure legibility and usability across all contexts.

Z-Index Scale

A consistent z-index scale prevents stacking conflicts and ensures predictable layering.

Print Specifications

CMYK color values and print guidelines for physical materials.

Dark Mode Color Mapping

Complete token mapping from light mode to dark mode values.

CSS Variable Reference

Complete list of CSS custom properties for consistent implementation.

Motion & Animation

Motion should feel natural and purposeful. Our animations are quick, subtle, and never distracting. Hover over each demo to see the effect.

Icon Library

Core icons used throughout the cite.codes interface. All icons use Feather Icons style with stroke-based design.

Page Transitions

Smooth transitions between pages and views create a polished user experience.

/* Page transition classes */
.page-enter { opacity: 0; transform: translateY(10px); }
.page-enter-active { opacity: 1; transform: translateY(0); transition: all 300ms ease-out; }
.page-exit { opacity: 1; }
.page-exit-active { opacity: 0; transition: opacity 200ms ease-in; }

Data Entry Patterns

Standard patterns for common data entry scenarios in the cite.codes interface.

Internationalization

Guidelines for preparing the interface for potential localization.

Dark Mode Component Showcase

All components styled for dark mode with appropriate color adjustments.

Light & Dark Mode Comparison

Side-by-side comparison of key components in both color modes.

Accessibility Guidelines

cite.codes is committed to WCAG 2.1 AA compliance. Every design decision considers users with disabilities.

Brand Story & Mission

Toast / Snackbar

Brief, non-blocking notifications that appear temporarily to provide feedback on user actions.

Selection & Highlight Colors

Text selection and highlight colors maintain brand consistency across the interface.

Scrollbar Styling

Custom scrollbar styles for a polished, branded experience on WebKit browsers.

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

Responsive Typography

Typography scales adapt to different viewport sizes for optimal readability.

/* Responsive Typography with CSS clamp() */
.display { font-size: clamp(32px, 5vw, 48px); }
.h1 { font-size: clamp(28px, 4vw, 36px); }
.h2 { font-size: clamp(22px, 3vw, 28px); }
.body { font-size: clamp(15px, 1.5vw, 16px); }

Icon Guidelines

Consistent icon sizing, stroke widths, and styles across the interface.

Motion Timing Tokens

Standardized duration and easing values for consistent animation feel.

:root {
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --duration-emphasis: 500ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Naming Conventions

Consistent naming patterns for components, files, and CSS classes.

/* Block */
.card { }

/* Element (double underscore) */
.card__header { }
.card__title { }
.card__body { }

/* Modifier (double hyphen) */
.card--featured { }
.card--compact { }
.card__title--large { }

Voice & Tone

Our voice is professional yet approachable. We communicate complex building codes clearly without being condescending.

Photography Guidelines

Guidelines for imagery used in marketing, documentation, and the product.

Co-branding Rules

Guidelines for partner logos and co-branded materials.

Popover

Contextual overlays for displaying additional information or actions.

Aspect Ratio Utilities

Standard aspect ratios for images, cards, and media containers.

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-ultrawide { aspect-ratio: 21 / 9; }

Success & Confirmation States

Positive feedback patterns for completed actions and successful operations.

Version History

Document revision history for tracking brand guideline changes.

Contact & Support

Questions about brand usage or need custom assets? Reach out to our team.

Logo Do's & Don'ts

Proper usage ensures brand consistency. Follow these guidelines when using the cite.codes logo.

Button States & Variants

Buttons include states for disabled, loading, and various sizes. Use semantic variants for different actions.

Form States & Components

Complete form component library with all states and variants for consistent form design.

Alerts & Banners

Contextual feedback messages for user actions and system states.

Dividers & Separators

Visual separators for content sections and list items.

Chips & Tags

Compact elements for displaying labels, filters, and selections.

Accordion / Collapsible

Expandable content sections for organizing information hierarchically.

Tabs

Organize content into switchable panels for better information architecture.

Dark Mode Preview

Brand Assets

Download official cite.codes brand assets for use in marketing materials, presentations, and partner collateral.