The building blocks of gtabiri.com.

01.01 / Using this guide

Using this guide

Use Identity and color for the artwork, Digital foundations for working examples, and Production for print and physical applications. The master SVG is the source for the logo. Application mockups illustrate intent, and proofing notes identify what still needs verification.

02.01 / The mark

The Gyata Tabiri Mark

A name made visible through geometry.

Gyata means lion in Akan. The frontal gaze expresses composure and courage, while the surrounding shapes reveal the face through negative space.

02.02 / Logo artwork and misuse

The full signature and the standalone mark

Use the full Bloodwood SVG when there is room for the name and tagline to read clearly. Use the standalone lion artwork when space is limited. Check that the entire tagline can be read comfortably at the intended viewing distance, and that the face and both detached circles stay distinct. Enlarge the signature if the tagline is difficult to read. Verify small print placements with an actual-size proof.

One-color black. Use this version for receipts and other black-only output when the tagline remains legible. For narrow receipt printers, test at actual size and use the standalone mark if the lettering breaks up. Download the black SVG.

Typography and color in the master

The Gyata Tabiri wordmark uses Trajan Pro. The tagline, “Inspired. Precise. Purposeful.”, uses Source Sans 3 Regular. Both are outlined in the master SVG, so displaying the logo requires no font installation. The website uses Source Serif 4 for headings and Source Sans 3 for body copy.

Bloodwood is #951716 in the full signature and the interface palette. Use the master SVG for screen artwork. See Print color and proofing for the Pantone Matching System (PMS) candidate and CMYK workflow.

What not to do

• Do not retype the name or tagline. Use the complete signature artwork to preserve their relationship.
• Do not stretch the artwork, crop the outer shapes, or remove either circle. Give the entire silhouette room to breathe.
• Do not add the retired Golden Saffron cross or recolor the lion to match an application. Use a quiet surface that gives Bloodwood enough contrast.
• Do not trace the mark from a mockup. Start from the master and inspect a proof at the intended size.

02.03 / Mark at small sizes

How small can the lion go?

A mark that reads clearly on a letterhead may lose detail in a browser tab or on a woven label. Compare the examples at their displayed sizes and look for the face, the gaps around the outer shapes, and both detached circles.

Check the lion in three places

1. Face. Can you recognize the lion without zooming in? Watch the narrow openings around the eyes and muzzle.
2. Outer shapes. Can you still see the gaps between the outer shapes and the center? Check the mark against the background it will sit on.
3. Two circles. Can you see both circles separately and tell which is larger?

Check the full signature separately

Compare the three widths below at normal browser zoom. Each label measures the SVG frame, including its clear space. Read the entire tagline at the distance someone would normally view the piece. If the available space makes it hard to read, use the standalone lion or give the signature more room.

Record what passes

On screen, test the actual placement, including the background and the smallest supported viewport. For print, set the artwork width in millimeters and print at 100%. For a receipt, use the intended printer and paper. For embroidery or weaving, ask for a sample made with the actual thread and fabric.

Record the artwork version, width, medium, background, viewing distance, and first detail that failed. The smallest size that passes all the checks can become the minimum for that application. The examples above are starting points for comparison. Production minimums are still open.

02.04 / Typography

A serif voice, a readable sans-serif.

<h1>The page title</h1>
<p class="lead">A short introduction to the page.</p>
<h2>A meaningful section heading</h2>
<p>Body copy explaining the subject.</p>
<h3>A supporting idea</h3>
<p class="small">A caption or supporting note.</p>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300..700;1,300..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/core/css/style.css?v=20261106-reading-control">

02.05 / Color palette

Color for screen and print

The palette began with colors associated with Kutztown University and developed into a personal identity. Bloodwood is primary, Golden Saffron is secondary, and the remaining colors are tertiary. The tertiary colors include both reading surfaces and supporting accents. Bloodwood carries the mark and expresses courage and resolve. Golden Saffron serves as a website accent and recalls illumination and achievement. Cloud Veil provides a quiet neutral for cards and borders, Sandstone Mist brings warmth, and Rich Black gives text and navigation depth. Lagoon Blue suggests clarity, Verdant Jade signals growth, and Midnight Indigo adds a quieter accent.

Print values are CMYK percentages in C, M, Y, K order. Reference conversions are pending physical proof.

<!-- Existing token names used in a component stylesheet -->
<style>
  .example-panel {
    background: var(--sandstone-mist);
    color: var(--slate-shadow);
    border-left: 4px solid var(--bloodwood);
  }
</style>
<div class="example-panel">A readable supporting panel.</div>

03.01 / Voice and writing guidance

Write so someone can act on it

GTABIRI sounds like a designer who can sit down with a team, ask a useful question, and explain what happens next. Name the work in plain language. Show the reasoning where it helps the reader decide. Make promises specific enough to keep.

04.01 / Layout and images

Space, proportion, and responsive behavior.

The grid is existing Bootstrap behavior. Use the spacing scale below for new additions; existing styles may use literal values.

Existing container and breakpoint reference

The catalogue uses its own wider workspace. Production content containers are not changed.

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4 mb-4">First component</div>
    <div class="col-md-6 col-lg-4 mb-4">Second component</div>
    <div class="col-md-6 col-lg-4 mb-4">Third component</div>
  </div>
</div>

<!-- Preserve complete artwork or a logo -->
<img src="/core/images/gtabiri-bloodwood.svg" alt="Gyata Tabiri"
     style="display:block;max-width:100%;height:auto;">

04.03 / Buttons and links

Buttons and links.

Hover, tab through the controls, and compare their feedback. Preview buttons below only update a message on this page.

Try a button to see the response.

An ordinary text link · A service-style link

<!-- Navigation: a link, styled as a brand button -->
<a class="btn btn-custom" href="/portfolio.php">See Selected Work</a>

<!-- Action: connect this button to the intended behavior -->
<button class="btn btn-primary" type="button">Open details</button>

<!-- Disabled state -->
<button class="btn btn-custom" type="button" disabled>Unavailable</button>

<!-- Original reading treatment: needs a reveal controller -->
<button class="read-more-btn" type="button"
        aria-expanded="false" aria-controls="article-content">
  Continue reading
</button>
<div id="article-content" hidden>
  <p>The full article. A controller must manage hidden and aria-expanded together.</p>
</div>

04.04 / Highlights

Two existing highlight styles.

<div class="case-highlights">
  <h2 class="h5 highlight-title">Quick highlights</h2>
  <ul class="highlight-list">
    <li><strong>Purpose:</strong> A clearly defined task.</li>
    <li><strong>Contribution:</strong> The work you personally owned.</li>
    <li><strong>Evidence:</strong> A link to the actual example.</li>
  </ul>
</div>

04.05 / Project cards

A project card and a service card.

Supporting a property portfolio

Edgewood Properties · Websites & email

A full-width cover introduces the project. The text identifies the contribution, followed by one action.

View Case Study

Web & User Experience

A text-first card for explaining a service or a focused area of contribution.

Its hierarchy should remain clear even without artwork. Longer text should not change where the action belongs.

Explore Services

Existing .card-custom styling. This is an illustrative cover, not a historical website screenshot.

<div class="row">
  <div class="col-md-6 mb-4">
    <article class="card card-custom h-100">
      <img class="card-img-top" src="/core/images/project-covers/edgewood-web-email-v1.jpg"
           alt="Illustrative Edgewood Properties project cover"
           width="1000" height="1000" loading="lazy"
           style="width:100%;height:auto;">
      <div class="card-body">
        <h2 class="card-title h5">Project title</h2>
        <p class="card-text">A specific description of the contribution.</p>
        <a class="btn btn-custom align-self-start"
           href="/case-studies/edgewood-properties.php">View Case Study</a>
      </div>
    </article>
  </div>
</div>

04.06 / Quotes

The hanging quote treatment.

The oversized quotation mark, rule, and attribution bubble remain. Here the example stays in the page so it can be compared; production case studies use the floating desktop placement.

<div class="quote-styled-block">
  <div class="quote-mark" aria-hidden="true">&ldquo;</div>
  <div class="quote-content">
    <p>Insert the exact, approved quotation.</p>
    <footer>&mdash; Name, verified role and organization</footer>
  </div>
</div>

04.07 / Tables

The existing case-study table.

Use a table when readers need to compare the same information across several items. Give it a caption that says what is being compared. Start each row with the name of the item, then keep the remaining columns in the same order.

Use short column headings and put shared units in the heading. Align text to the left and comparable numbers to the right. Reserve the footer for a useful total or summary. At phone widths, let a wide table scroll within its own area so the rest of the page stays in view. In print, repeat column headings when the table continues on another page.

.table .table-bordered .timeline-table — header, striped body, row headings, caption, and the existing gold footer.

<div class="table-responsive">
  <table class="table table-bordered timeline-table">
    <caption>A short description of the information.</caption>
    <thead>
      <tr><th scope="col">Stage</th><th scope="col">Output</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Understand</th><td>A defined problem</td></tr>
      <tr><th scope="row">Verify</th><td>A checked result</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Overview</th><td>2 stages</td></tr>
    </tfoot>
  </table>
</div>

04.08 / Accordions

FAQ and topic-group accordions.

Compare the existing FAQ treatment with a topic group. These are distinct from the article reveal samples above.

<div id="section-faq">
  <div class="accordion" id="my-faq">
    <div class="card">
      <div class="card-header" id="my-faq-heading">
        <h2 class="h5 mb-0">
          <button class="faq-toggle collapsed" type="button" data-target="#my-faq-answer"
             data-toggle="collapse" aria-expanded="false"
             aria-controls="my-faq-answer">A useful question?</button>
        </h2>
      </div>
      <div id="my-faq-answer" class="collapse"
           aria-labelledby="my-faq-heading" data-parent="#my-faq">
        <div class="card-body"><p>A clear answer.</p></div>
      </div>
    </div>
  </div>
</div>

04.09 / Navigation

The Insights directory links.

<nav class="insights-nav" aria-label="Insights navigation">
  <a class="insights-directory-link insights-directory-link--home" href="/insights/">
    <span>
      <span class="insights-directory-title">All Insights</span>
      <span class="insights-directory-note">Browse the full collection</span>
    </span>
    <span class="insights-directory-arrow" aria-hidden="true">&rarr;</span>
  </a>
</nav>

04.10 / Forms and feedback

A form that stays on this page.

This is a visual and interaction sample. It sends no message and stores no answers.

<div class="form-group">
  <label for="contact-name">Your name (required)</label>
  <input class="form-control" id="contact-name" name="name"
         type="text" autocomplete="name" required>
</div>
<div class="form-group">
  <label for="contact-reason">Reason for writing</label>
  <select class="form-control" id="contact-reason" name="reason">
    <option>Recruiting or hiring</option>
    <option>Agency collaboration</option>
  </select>
</div>
<!-- Error-state example: apply after validation identifies a problem. -->
<div class="form-group">
  <label for="contact-email">Your email (required)</label>
  <input class="form-control is-invalid" id="contact-email" name="email"
         type="email" aria-invalid="true" aria-describedby="contact-email-error" required>
  <p class="invalid-feedback" id="contact-email-error">Enter a complete email address.</p>
</div>

<label for="reason">Reason for writing</label>
<select id="reason" name="reason" class="form-control gt-picker" required>
  <option value="">Choose a reason</option>
  <option value="recruiting">Recruiting or hiring</option>
</select>

Use gt-picker with form-control. Supporting browsers show the branded menu. Other browsers use their own picker. The Date, Time, Date and time, Month, and Week samples use a styled panel. Choose File opens your system file browser.

04.11 / Accessibility and implementation checks

Accessibility and implementation checks

Planned. Document keyboard, focus, responsive layout, and error recovery checks with a worked example.

05.01 / Print color and proofing

Specify color for the stock and press

Bloodwood · Primary

sRGB #951716 · 149, 23, 22. Estimated spot references: Pantone 7627 C for coated stock and 1797 U for uncoated stock.

Golden Saffron · Secondary

sRGB #D5AF37 · 213, 175, 55. Select a solid ink or process proof for the stock. Specify foil separately when the application calls for a metallic finish.

Uncoated stationery

Compare physical uncoated swatches and proof the selected ink on the actual letterhead stock. Record the approved Pantone code with its C or U suffix.

CMYK and measured color

Use the printer’s output ICC profile for the intended press and stock. Record the resulting CMYK percentages, profile, paper and finish with the approved proof. Where measured, record CIELAB and the measurement condition. Use the printer’s requested PDF standard and output intent.

The guide’s Letter and A4 layouts are pagination proofs. Spot ink and process color approval require a physical proof. ICC profile registry

05.02 / Identity in use

From the desk to the driveway

Choose the scale and placement of the mark for the object and how it will be used. Bloodwood leads the identity. Golden Saffron is secondary, and the tertiary colors can carry the surface when a quieter treatment suits the material.

Use the original mark for production. These concept images illustrate placement and materials. Keep the lion’s face, the detached cardinal shapes, and both circles distinct in the finished piece.

Correspondence

Gyata Tabiri Inspired. Precise. Purposeful.

Dear Catherine,

Keep the registration and insurance card together so they are easy to find when needed.

gtabiri.com

Gyata Tabiri
Return street address
City, State ZIP

The letterhead keeps its centered mark, name, and tagline above the message, with a quiet contact footer. On the envelope, the mark, name, and return address sit at the upper left. Leave the center for the recipient and the upper right for postage. This excerpt shows the layout with mailing details omitted.

For an in-person introduction, the phone QR code opens the contact page, where the recipient can download the contact card.

After the meeting

Leave room for a handwritten thank-you and one specific action. The mug uses the Bloodwood mark on Peach Linen ceramic. Check the printed mark on the curved surface before ordering a batch.

Everyday clothing

Let the tee carry the larger print. Use a smaller chest mark on the polo and a Peach Linen patch on the hoodie to keep the Bloodwood mark legible against the fleece.

Tailoring

Keep the jacket and trousers coordinated in Midnight Indigo. Let the Peach Linen shirt and Bloodwood lining reveal the palette at different moments.

On the course

Check a woven sample at actual size. If the lion’s face or either circle closes up, increase the tab size until both read clearly.

On the road

Position the mark where the complete silhouette can be seen. An installer should lay out the original artwork on measured panels and check the placement against handles, seams, and wheel arches.

Inside the XTS

Keep the embroidered marks on the headrests and use the stitching to trace existing upholstery seams. Match materials against physical swatches in daylight.

05.03 / Production files and sign-off

Production files and sign-off

Planned. Record source artwork, stock or material, output requirements, proof, and approval.

06.01 / Decision records, changes, and exceptions

Decision records, changes, and exceptions

Planned. Document how to test a decision, record an exception, and update a shared pattern. The slider focus treatment is a candidate for the first worked example.