AcctoFi Style Guide
Text Styles:
HERO: Open Sans Bold / -2% Kerning
From Accounting to Finance
use class="fs-hero"
use element <h1> , or use class="h1" or "fs-1"
use element <h2>, or use class="h2" or "fs-2"
use element <h3>, or use class="h3" or "fs-3"
use element <h4>, or use class="h4" or "fs-4"
use element <h5>, or use class="h5" or "fs-5"
Body/Strong: Open Sans Regular/Bold / 18PX
Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.
Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.
Color Styles:
primary
secondary
accent
muted
muted-alt
dividers
dark
Background color
You can use background utility classes to apply background colors to elements.
Use .bg-* and then append any color name above.
Text color
Note that these background classes don’t change the text color, so you may also need to apply a .text-* class to ensure good contrast and readability.
class value: btn btn-primary
Button Primaryclass value: btn btn-secondary
Button Secondaryclass value: btn btn-accent
Button AccentSpacing & Layout:
Spacing Utilities
Use .m-* / .p-* for margin and padding in Bootstrap (0-5, auto).
.p-3.p-5.mb-3 (margin bottom).mt-5 (margin top)Grid System
Each row in Bootstrap's grid system is divided into 12 equal columns. You can combine columns in various ways to control the layout of your content. The column classes (e.g., col-4) specify how many of the 12 columns an element should span. These widths are based on percentages, ensuring consistent relative sizing across different screen sizes.
.col-4.col-4.col-4.col-md-6.col-md-6Flex Utilities
Use .d-flex and related classes for flexbox layouts.
Position Utilities
Use .position-relative and .position-absolute for layout control.
position-relative Relative Box.position-absolute
Display Utilities
Control element visibility with display classes.
.d-block (Visible).d-none (Hidden)no background image, no video embed
no background image, no video embed
Board Member
Blake Rodgers, Deloitte Audit & Assurance Partner, brings 19+ years of experience in government and public sector audits. He leads crucial engagements and ensures transparent, compliant reporting—reflecting AcctoFi’s core values of trust and precision.
Board Member
Tram is a SALT expert and partner at TaxOps. She advises on multistate tax strategy, teaches at UT Arlington, and writes for Tax Notes. A TXCPA leader, she brings deep government audit, policy, and education experience to every engagement.
Secretary
Dr. Tracie Miller, PhD, CPA, is an educator, author, and leader shaping the future of accounting. With experience at Deloitte and top universities, she brings academic depth, industry insight and a passion for innovation to every learning experience.
Vice Chair
Mark D. Lee, JD, CPA, is former Deputy General Counsel at AIG Life & Retirement and a past chair of TXCPA. With deep expertise in tax law and accounting, Mark brings legal insight and leadership to the profession. He holds a JD and a BBA in Accounting.
Board Member
Brandon is a San Antonio‐based small‑business CPA and adjunct instructor. He earned his MS from UTSA, began at ATKG, served as Assistant Controller at MOOD Texas, and now runs BLH Accounting—where he combines tax strategy, teaching and community focus.