--- name: viget-brand-guidelines description: >- Defines Viget's brand identity including visual design, colors, typography, voice, tone, and copywriting rules. Use when creating designs, writing copy, building UI, generating presentations, or producing any visual or written content that should align with the Viget brand. Handles branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, and visual formatting. --- ## Brand Guidelines ### Colors **Logo Mark Colors:** - Teal: `#1395BA` - The larger dot in the Viget logo mark - Orange: `#F16C20` - The smaller dot in the Viget logo mark **Primary Blues:** - Blue (Primary CTA): `#135C92` - Buttons, primary call-to-action elements, links - Dark Blue: `#054C81` - Footer CTA backgrounds, secondary blue surfaces - Deep Blue: `#00365E` - Dark accent, icon fills - Navy (Logo Text): `#092F40` - Viget wordmark color, deepest blue **Neutrals:** - Dark (Primary Text): `#282828` - Body text, headings, primary content - Medium Gray: `#535353` - Secondary body text, descriptions - Gray (Meta Text): `#757575` - Meta labels, captions, timestamps - Light Gray (Borders): `#D4D4D4` - Borders, dividers, subtle outlines - Off-White (Light BG): `#F9F9F9` - Alternating section backgrounds - White: `#FFFFFF` - Primary backgrounds, text on dark surfaces **Dark Surface Colors:** - Slate: `#35454F` - Article hero backgrounds, pull-quote/lede text color - Teal-Dark: `#2A4D57` - Featured content section backgrounds **Usage Rules:** - Use primary blue `#135C92` for interactive elements (buttons, links, CTAs) - Use neutrals `#282828` through `#757575` for text hierarchy - Reserve logo mark colors (teal and orange) for the logo only — not as general UI accents. Exception: in presentations, teal may accent dates and timeline markers. - Dark surfaces use the slate/teal palette (`#35454F`, `#2A4D57`, `#054C81`) — never pure black - Body text is always `#282828`, never `#000000` ### Typography - **Font Family**: Geomanist is our official typeface. [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans) is our fallback when Geomanist isn't available, with system sans-serif as a last resort. For best results, install Geomanist locally. - **One font family for all text** — headings, body, navigation, buttons, labels. No serif or secondary fonts (code blocks may use system monospace). **Type Scale:** | Style | Size | Weight | Line Height | Notes | | ------------------ | ---- | ------------- | ----------- | ---------------------------------- | | Display / Hero | 80px | 300 (Light) | 1.0 | Page titles, hero headings | | Page Title | 72px | 300 (Light) | 1.2 | Large section intros | | Section Heading | 48px | 300 (Light) | 1.2 | Service headings, feature titles | | Article Lede | 36px | 300 (Light) | 1.6 | Opening paragraph, color `#35454F` | | Card Title | 24px | 400 (Regular) | 1.4 | Work cards, article cards | | Body (Article) | 20px | 400 (Regular) | 1.8 | Long-form article content | | Body (Page) | 18px | 400 (Regular) | 1.6 | Page descriptions, intro text | | Base / Nav | 16px | 400 (Regular) | 1.5 | Navigation, default text | | CTA Button (Large) | 18px | 400 (Regular) | — | Primary page CTAs | | CTA Button (Small) | 14px | 400 (Regular) | — | Header nav CTA | | Meta Label | 12px | 400 (Regular) | 1.2 | Uppercase, letter-spacing 1.2px | | Section Label | 16px | 400 (Regular) | 1.2 | Uppercase, letter-spacing 3.2px | **Key typographic rules:** - Large headings (48px+) always use font-weight 300 (light). This creates Viget's signature elegant, airy heading style. - Body text and smaller headings use font-weight 400 (regular). - Bold (700) is used sparingly, primarily for newsletter signup headings and emphasis. - Meta labels and section headers are uppercase with generous letter-spacing. - Category tags use a `#` prefix (e.g., `#Code`, `#Strategy`, `#News & Culture`). ### Buttons and CTAs - **Primary Button**: `#135C92` background, white text, `border-radius: 36px` (pill shape), 1px solid border matching background - **Outline Button**: Transparent background, `#135C92` text and border, `border-radius: 36px` - **Reversed Button** (on dark backgrounds): White background, `#054C81` text, `border-radius: 36px` - **Button padding**: `10px 16px` (small) / `16px 24px` (large) - Buttons never use font-weight bold. They are always weight 400. ### Links - **Navigation links**: No underline, dark text (`#282828`) - **Body content links**: Underlined, same color as surrounding body text - **Category/tag links**: 12px uppercase with `#` prefix, no underline by default, underline on hover ### Layout and Spacing - **Max container width**: ~1280px (screen-xl) - **Content padding**: 24px (mobile) / 40px (tablet and up) - **Section vertical padding**: 64px (mobile) / 80px (tablet) / 128px (desktop) - **Design philosophy**: Generous whitespace, clean and minimal, content-forward - **Grid layouts**: Used for work showcases, article cards, and service sections - **Border style**: 1px solid `#D4D4D4` for dividers between content items ### Dark Sections Viget uses dark-background sections for visual contrast: - **Article featured area**: `#35454F` slate with white text - **Content highlight sections**: `#2A4D57` teal-dark with white text - **Footer CTA**: `#054C81` dark blue with white text - On dark backgrounds, buttons become white with dark blue text (reversed) - The logo and navigation text turn white on dark backgrounds ### Logo The Viget logo consists of two elements: 1. **Logo mark**: Two overlapping circles — a larger teal (`#1395BA`) dot and a smaller orange (`#F16C20`) dot, positioned to the upper-left of the wordmark 2. **Wordmark**: "viget" set in Geomanist, colored `#092F40` (navy) on light backgrounds and white on dark backgrounds The logo mark and wordmark always appear together. The mark sits to the left of the text. All lowercase for the wordmark. If you are in a context where an SVG image can be used, here is the markup of the logo. ``` ``` ## Voice and Tone ### Core Voice Attributes - **Professional but approachable** — expert without being stuffy - **Confident without boasting** — let the work speak, not superlatives - **Concise and direct** — say it plainly, then stop - **Action-oriented** — bias toward doing ("Let's get to work") - **Proudly independent** — Viget has been independent since 1999 and values that identity - **Craft-focused** — quality, thoughtfulness, and attention to detail matter ### Writing Style Rules 1. **Use active voice.** "We build products" not "Products are built by us." 2. **Be concise.** Short sentences. No filler words. Say what you mean. 3. **Lead with value.** Start with what matters to the reader, not the company. 4. **Avoid jargon and buzzwords.** Say "we build websites" not "we deliver digital transformation solutions." 5. **Use sentence case for headings.** Not Title Case. Exception: proper nouns and acronyms. 6. **Address the reader directly.** "You" and "your" over "users" and "clients" where appropriate. 7. **Contractions are fine.** "We're" over "We are." Keeps it human. 8. **No exclamation marks in headlines.** Reserve them for genuinely exciting moments, used sparingly. 9. **One idea per paragraph.** Let copy breathe. Whitespace is good. ### Headline Examples (Viget style) - "Building a better digital world." - "Building since 1999." - "Have an unsolvable problem or audacious idea? Let's get to work" - "What we're thinking about" ### Tone by Context - **Marketing / Homepage**: Confident, warm, aspirational but grounded - **Case Studies**: Results-focused, specific, let the work and outcomes lead - **Blog Articles**: Knowledgeable, conversational, generous with insight - **CTAs**: Direct and inviting — "Contact Us", "More Work", "Our Clients" - **Meta / Labels**: Functional and minimal — uppercase, terse ## Technical Details ### Presentation and Document Styling **Presentation typography differs from web.** Cover slides use a bold title + light subtitle pairing: - **Cover slide titles**: font-weight 700 (bold), creating a strong visual anchor - **Cover slide subtitles**: font-weight 300 (light), providing elegant contrast - **Section divider headings**: font-weight 300 (light), white text on blue backgrounds - **Content slide subheadings**: font-weight 400, colored in primary blue `#135C92` (not dark text) This bold/light pairing is specific to presentations and differs from the website where all large headings use weight 300. **Presentation surface colors:** - **Section divider backgrounds**: Primary blue (`#135C92` or similar muted steel-blue) - **Testimonial/quote backgrounds**: Pale teal tint (~`#E8F4F8`), a very light cool blue derived from the brand teal family - **Data panel backgrounds**: Light blue-gray (~`#E8EEF2`), used behind tables and structured data - **Image placeholder fallback**: Dark teal (~`#1E3A42` to `#243E47`), used when image areas have no photo **Slide layout system (fractional grid):** Viget presentations use a modular layout system based on fractional widths: - **Cover slides**: Split Vertical (left text / right color block), Split Horizontal (top image / bottom text), Full Width Image, Full Width White - **Section dividers**: Solid blue background, centered white text, circled numeral for section number - **Content layouts**: 1/2 + 1/2, 1/3 + 2/3, 2/3 + 1/3 splits for text and image combinations - **Multi-column**: 2-column, 3-column, and 4-column centered text or stats layouts - **Device mockups**: Realistic device frames (desktop, laptop, tablet, phone) with drop shadows, arranged in overlapping cascading compositions **Presentation footer pattern** (cover slides): - Date line (small, regular weight) - "Copyright Viget Labs, LLC" (very small, bold) - Confidentiality notice (very small, regular weight, gray) - Viget logo (bottom-center or bottom-right) **Table design:** - No visible cell borders or grid lines - Row separation via alternating background tints (zebra striping) using light blue-gray bands - Table headers: uppercase, bold, dark navy, with generous letter-spacing - Generous cell padding for readability ### Photography and Imagery - **Style**: Warm, natural lighting; no harsh flash. Candid and human-centered. - **Subject matter**: Modern creative workspaces, architectural elements, people in professional settings - **Motion blur**: Used as a stylistic device in hero imagery to convey dynamism - **Client logos**: Always rendered in monochrome grayscale on logo grids to maintain visual consistency and prevent any single client's brand colors from dominating ### Data Visualization When creating charts, graphs, or timelines: - Use a **monochromatic blue-teal spectrum** — stay within the cool blue-teal family - Suggested chart palette (light to dark): light sky blue (~`#A5DCE8`), bright cyan (~`#1CC7D0`), primary blue (`#135C92`), deep blue (`#00365E`) - **No warm colors** (orange, red, yellow) in data visualizations - Use the brand teal `#1395BA` for accent markers (e.g., "today" indicators on timelines) - Timeline/Gantt bars use layered, overlapping color-coded segments - Dotted lines to distinguish dynamic markers (like "today") from solid structural lines