STYLE GUIDE
A system with room for your identity.
TERVUNE v1.0 — initial commercial release — the final visual foundations and reusable building blocks. Created by Printically. Support: info@printically.com.
01 / Brand
GLOBAL · The wordmark, compact mark and adaptive header share one identity.
TERVUNE
T
TERVUNE
T
WORDMARK / SHARED
Uppercase Unbounded. Use black on ivory and ivory on black. Preserve the compact T and its link to Home. Follow the existing header clear space: 20px on Phone, 32px or more in larger layouts. The floating wordmark adapts to the surface beneath it.
STATUS KEY
GLOBAL affects the shared site shell. SHARED instances inherit their component. CMS content populates a connected list or detail template. CODE COMPONENT exposes editable controls in the right panel; additional behavior lives in its component file.
02 / Color
Use the core palette for structure and feedback. Text/Orange Accessible (#B23400) is reserved for small text on light surfaces: 5.54:1 on ivory and 6.21:1 on white. Keep #FA4601 for brand fills, accents and large display text; use black labels on orange fills.
Ivory / #F3F2EE
Canvas, light surfaces and text on dark backgrounds.
Black / #000000
Primary text, dark headers, footer and arrow circle.
Orange / #FA4601
Accent, active states, CTA hover fill and routing lines.
Secondary text / #60655E
Body copy on light surfaces.
Subtle surface / #ECE9E1
Quiet supporting surfaces.
Default border / #D7D9D0
Neutral component boundaries. Structural rules also use black at low opacity.
ATMOSPHERE / EXISTING VISUALS
Layered product scenes also contain Wine #351F2A, Coral #F47B54, Rose #E6C1B5 and Amber #F4B059. Keep these within their existing lighting compositions; they are not replacement UI accents.
03 / Type
Unbounded display · Fraunces italic · Manrope body and interface. These live specimens use the existing text styles.
H1 / Step inside the workspace.
H2 / A clear next step.
H3 / Every decision has context.
Body large / Give the work room to breathe.
UI / LABEL / EYEBROW
Metadata / September 2026
RESPONSIVE TYPE SCALE
Display: 64 / 48 / 32px. Statement: 88 / 64 / 36px. Display/Section: 44 / 36 / 28px. Heading 3: 24px. Body: 18px Desktop, 16px below. Interface: 14px. Product labels: 12px. Some page-specific statements override these sizes; edit their breakpoints together.
Clear direction.
Light: luminous sweep, no stripes.
Clear direction.
Dark: texture + luminous sweep.
HEADLINE ENTRANCE / SHARED
Existing mixed headlines reveal through a mask in about 1 second; italic words enter about 220ms later over 1.1 seconds. Character assembly and the specular sweep are part of the global display treatment. Keep phrases short; use one expressive accent rather than italicizing a whole paragraph.
04 / Layout
Connected editorial sections, deliberate whitespace and one structural line per boundary.
SPACING
Use the existing rhythm: 8, 12, 16, 24, 32, 48, 64, 80 and 96px. Main sections commonly cap at 1200px. Gutters: 64px Desktop / 32px Tablet / 20px Phone. Section padding varies by content; common vertical values are 80 / 64 / 48px. Do not apply a universal card radius.
REPRESENTATIVE COMPOSITIONS
Waitlist uses copy + form. Careers uses a 2+1 job grid. Benefits use connected three-column rows. Product combines a local anchor with scrolling sections. Pricing connects Starter ($24/member/month), Team ($49/member/month) and Enterprise (Custom) with native plan and comparison structures. Enterprise uses connected value cells, the existing Workspace, a Team/Enterprise comparison and phased rollout. Discuss your rollout opens the shared demo modal. Resources gives a large image priority alongside editorial text.
COPY / LEFT
A two-column split keeps the purpose beside the detail.
DETAIL / RIGHT
On Phone, preserve reading order and stack the same content.
DIVIDERS
Standard: 1px neutral rule. Active: 1px orange rule. The shared divider draws from left to right over 900ms, then stays visible for the page visit. One divider owns each boundary: do not add an extra border, progress line or looping duplicate.
05 / Components
Live shared controls. Hover, focus and activate the specimens; their destinations remain real template pages.
BUTTON STATES / SHARED
Light and dark-context capsules begin ivory with an orange outline, black label and a black arrow circle on the right. Hover expands the orange fill, rolls the label and rotates / shifts / scales the arrow. Labels remain black for contrast; the ivory arrow stays on black. Press adds feedback without changing layout. No disabled marketing-link style is in use.
LINKS
Editorial lists use their current rolling-label, underline and directional-arrow behavior. The specimens above use the shared rolling-link treatment; inspect each linked list for its row-specific interaction. Small active and hover text uses the accessible orange on light surfaces and brand orange on dark surfaces. Keep destination labels meaningful.
The connected surface expands, the icon rotates, and the answer remains in the normal reading flow.
ACCORDION / SHARED
Closed, hover and open states share thin boundaries. Hover and open states introduce an active surface; the plus rotates toward an X. Keep answers concise and avoid nesting rounded FAQ cards.
TABS / SHARED
Intake → Route → Review uses a connected active indicator and directional panel changes. Moving backward reverses the content direction. The Phone variant preserves touch-sized controls and a stacked workspace.
NAVIGATION / GLOBAL
Desktop has a permanent left rail, vertical MENU, vertical Book a demo and scroll progress. The TERVUNE header wordmark responds to the underlying surface. Phone moves MENU to the top-right. Use the live menu trigger on this page to inspect the actual system.
OPEN MENU / GLOBAL
Lowercase links use an orange slash, rolling hover and active-route feedback. Separator lines and the context-connected footer block belong to the same panel. The large orange close X rotates. The page reacts in depth during opening; Escape closes and keyboard focus stays within the open menu.
FOOTER / GLOBAL
The actual footer at the end of this guide is the specimen: black surface, large TERVUNE wordmark, CTA and current-route links. Scroll reveals it from beneath the content; the wordmark responds on hover and returns Home on activation. Compact screens use a restrained reveal.
06 / Motion & imagery
Use the finished interactions in context. Motion should explain structure, state or product behavior.
SECTION ENTRANCE
Directional grids use left / right entrances and a below entrance for the middle or full-width content, around 1 second with 85ms staggering. Section reveal uses a masked upward entrance, synchronized after a divider begins. Reduced motion keeps content visible without the travel.
A / Top–bottom strips
B / Left–right strips
IMAGE ENTRY & HOVER / SHARED
Six strips assemble with 780ms movement and 70ms stagger, replaying after the image leaves and re-enters the viewport. Hover moves the whole frame up to 16px with subtle perspective and 1.04 scale; the inner image retains a small counter-movement and 1.08 scale. Pointer leave restores both smoothly. Touch and reduced motion remove cursor travel.
C / Large masks are used in product and cinema sections. The existing Image Sweep override currently shares the horizontal-strip implementation; it is not a third unique image effect.
LIGHT LOGO FIELD / CODE COMPONENT
Replace Particle Image with a transparent logo. Large Logo Badges enables the approved 32–44 / 52–72 / 80–110px hierarchy before responsive scaling. The available space controls the final count: title-safe placement may omit badges. Organic peripheral placement, repulsion, cursor-near opacity and gentle spring return stay intact. Tablet scales to 85%, Phone to 65%; reduced motion is static.
Dark headers. Clear contrast.
BLACK / IVORY / ORANGE · NO PARTICLES
DARK HEADER / SHARED
Integrations and Pricing use black, ivory and orange without particles. Dark italic accents retain texture and sweep. A clean boundary joins the normal body; no bottom gradient haze is part of the header system.
HOME CAROUSEL / PAGE SYSTEM
The first Home showcase is independent of vertical scrolling: fixed central device, moving screens, centered snap, arrows, drag and Phone swipe. Autoplay waits 5.2 seconds and pauses for hover, focus, drag, offscreen, hidden tabs and reduced motion.
WORKSPACE STORY / PAGE SYSTEM
The sequence below the video is separate: persistent software, moving stage cards, docking and four scroll stages. Desktop uses a bounded sticky scene that releases; reverse scroll walks the same stages backward. Narrow layouts, short viewports and reduced motion switch to a normal-flow stack. Do not replace this with carousel logic.
PAGE TRANSITION / GLOBAL
Internal routes use a black-led grid/slice assembly with ivory and orange accents: nine panels on larger screens, six on Phone. History direction reverses the assembly bias. Reduced motion uses a brief fade. Anchors, tabs, modal controls, downloads, external links and carousel controls bypass route assembly. Navigation waits for the destination; timing varies with page readiness.
07 / Forms & overlays
CODE COMPONENT · One live embedded contact example, plus the existing global modal. All forms shown here are demonstrations.
/CONTACT
Let’s make the next step clear.
Try the shared field language with sample details. Nothing is sent or stored.
FIELDS / VALIDATION
Text, email and textarea use labels, minimal rules and orange focus feedback. Required and email validation remain accessible. Success appears inline; there is no backend, account creation or storage. Contact adds its page-specific composition; the mini contact form shares this visual family.
BOOK A DEMO / GLOBAL
Open the live modal above. Send a request includes the form and attachments; Book a meeting shows selectable dates, times and a demo confirmation. The large orange X floats over the composition. Backdrop, Escape, focus trap and return focus preserve the shared overlay behavior.
ATTACHMENTS / DEMO
Add files opens a picker. Selected rows show file names and removal controls; the limit is three files, 10MB each, PDF / DOCX / PNG / JPG. Selection remains local and is not uploaded. Connect a storage provider before accepting real attachments; never paste credentials into the template.
SCHEDULER / CODE COMPONENT
The current Demo mode does not reserve a meeting. Set Booking Provider to Cal.com and supply your own Cal.com Booking Link for the existing handoff. This opens the configured calendar; it is not an embedded booking service. Replace the demo area with the official provider component if inline booking is needed.
TEAM PROFILE / SHARED LANGUAGE
About’s Profile details opens a portrait-and-content overlay with a mini contact form. It shares the large orange X, restrained backdrop, focus handling and demo-only confirmation. Use the live About profiles to inspect the complete interaction.
Mira Vale
Product & strategy
A fictional product leader focused on making complex work easier to understand.
08 / CMS & editorial
Seven collections. Edit content in CMS; preserve the connected lists and detail templates.
Resources / CMS
Articles and resource cards → /resources and its article detail template.
CaseStudies / CMS
Customer stories → Customers list and case-study detail pages.
Integrations / CMS
Connection catalog → Integrations index and individual connection pages.
Careers / CMS
Roles → Careers listing and job detail pages.
Changelog / CMS
Releases → Changelog journal and release detail pages.
Capabilities / CMS
Feature copy for connected capability lists; not a separate detail-page system.
Questions / CMS
FAQ question-and-answer content shown in shared accordion lists.
ARTICLE TEMPLATE / CMS
Resources articles use an editorial header, hero image, local TOC, rich-text body, pull quotes, key takeaways, next article and related items. Update the item fields and body; the shared detail template supplies the composition. Check headings and imagery after adding content so the TOC and reading flow remain useful.
SUPPORTING CONTENT / SHARED
Plans, comparison rows, team cards, testimonials and demo requests are native page/component content. Extended team biographies and focus areas are in profileDetails within TervuneAboutPortrait. Keep the seven-collection architecture. Empty editorial collections leave their list area empty; add your own empty-state copy if your launch requires it.
09 / Responsive & access
Test behavior, not only widths. Preserve reading order and clear controls at every size.
DESKTOP / 1200px+
Permanent left rail. Multi-column editorial layouts, cursor effects, carousel drag and full Workspace story where the viewport has enough height.
TABLET / 834–1199px
32px common gutters. Reduce columns where needed and keep navigation stable. Cursor effects depend on a fine pointer; short viewports simplify the Workspace story.
PHONE / BELOW 834px
Top-right MENU, 20px common gutters and stacked content. Swipe replaces carousel hover; workspace stages stay in natural flow. Controls remain touch-sized. Page-specific compact thresholds may also use 700px.
REDUCED MOTION
Logo fields remain visible and static. Home keeps a simplified brand intro. Image strips and cursor travel stop; dividers stay drawn. Sections are visible without large entrances. Route transitions fade. Carousel autoplay stops and Workspace stages stack. Motion preferences do not remove content.
ACCESSIBILITY
Use visible focus, meaningful link text and labeled semantic fields. Keyboard users can open navigation, tabs and accordions. Overlays trap focus, close with Escape and return focus to the trigger. Preserve readable contrast and roughly 44px-or-larger interactive hit areas. Test your own content and external integrations before launch.
10 / Customize Tervune
Start with the shared identity, then replace the fictional content and connect your production services.
01 / Replace TERVUNE
Edit wordmarks in the shared shell and the Home intro; keep both full and compact marks consistent.
02 / Set Accent Color
Start with Brand/Accent. Also review exposed Accent controls and page-specific motion colors: a token change alone does not replace every hardcoded orange.
03 / Replace the particle asset
Select a light header’s Particle Image and use your transparent logo. Preserve the approved size hierarchy and title-safe layout.
04 / Replace software visuals
Edit native Workspace components or replace image/video assets in their existing frames. Keep the first carousel separate from the below-video story.
05 / Update CMS content
Replace all fictional articles, customers, connections, jobs, releases, capabilities and questions. Verify their detail pages.
06 / Connect forms
Replace demo handlers with your chosen form service. Verify validation, success, privacy messaging and consent requirements for your actual use.
07 / Connect Cal.com
Set your booking URL and provider. Test the calendar destination; add the official inline provider component only if needed.
08 / Connect attachments
Configure a file-storage/upload provider before accepting real files. Update limits and the demo disclaimer only after the connection works.
Final check: review 1440, 1200, 1024, 834, 430, 390 and 360 px; keyboard, reduced motion, links, forms, attachments and CMS details. Search and cookie/consent UI are not included. Configure real integrations, appropriate policies and verified content before your own launch. See Getting Started for setup and the creator-side TERVUNE v1.0 notes.