Calculate your accurate bra size and generate a custom sister size chart. Use our free, private, and precise tool to find your perfect fit today.
AI Generation Prompt
Bra Size Calculator & Sister Size Chart Generator
Overview
This single-file web application is a professional-grade utility designed to help users determine their correct bra size and explore "sister sizes." The application focuses on privacy, accuracy, and ease of use, delivering a clean, modern interface that functions perfectly in any browser without requiring local storage or external dependencies.
Technical Architecture
- Type: Pure Client-Side JavaScript/HTML5/CSS3 application.
- Storage: No usage of
localStorage,sessionStorage, or cookies. State is managed entirely in-memory using JavaScript variables. - External Dependencies: Tailwind CSS via CDN for styling; Lucide Icons via CDN for iconography.
- Containerization: Designed to run inside a sandboxed iframe. All interactions (modals, alerts) are handled via custom DOM elements, not browser defaults.
Core Features
- Measurement Form: Dual-input fields (Underbust, Full Bust) with unit toggles (inches/cm).
- Instant Calculation: Real-time calculation logic triggering upon user input.
- Sister Size Logic Engine: A grid generator that calculates sister sizes by toggling band/cup pairs (e.g., 34C -> 32D, 36B).
- Instructional Guide: A non-intrusive collapsible section explaining how to measure properly.
- Responsive Design: A mobile-first card layout that centers on the screen and scales gracefully.
UI/UX Specification
- Color Palette:
- Primary Background:
#f8fafc(Cool Slate Gray) - Card Background:
#ffffff - Primary Accent:
#8b5cf6(Soft Violet) - Text Colors:
#1e293b(Primary),#64748b(Secondary) - Borders/Dividers:
#e2e8f0
- Primary Background:
- Layout:
- Header: Clean title with a descriptive tagline.
- Main Input Section: A two-column grid on desktop, single-column on mobile. Clear labels for 'Underbust Measurement' and 'Full Bust Measurement'.
- Results Panel: Displays the primary size clearly. Below this, a grid displays sister sizes categorized by 'Band Fit' and 'Cup Fit'.
- Animations: Subtle fade-in animations for the result display when calculation triggers; hover states on all interactive elements.
Developer Directives
- State Management: Use a simple JavaScript object to store inputs and calculated results. Reset to default on page refresh.
- Modals: Use
display: flexandz-indexmanipulation to create overlays for the measurement guide if requested, avoidingalert()calls. - Accessibility: Ensure all inputs have associated
<label>tags and usearia-liveregions for screen reader compatibility when results are generated. - Performance: Do not include heavy libraries. Keep DOM manipulation minimal and efficient.
- Aesthetics: Use
shadow-lgon the main container for a "floating" premium SaaS feel. Use rounded corners (rounded-2xl) throughout for a modern appearance.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the bra size calculator determine my fit?
The calculator determines your band size by taking your snug underbust measurement and rounding to the nearest even number. This forms the foundational support of the bra, ensuring the band stays horizontal across your back without riding up. Once the band size is established, the cup size is calculated by measuring the fullest part of your bust and finding the difference between that and your underbust measurement. Every inch of difference roughly corresponds to a cup size, providing a standardized starting point for your personal fitting journey.
What is a bra sister size and why is it useful?
A sister size is a bra size that offers the same cup volume but a different band size, allowing for flexibility when a specific brand runs slightly large or small. For example, if you find that a 34C fits well in the cups but the band feels too tight, a 36B might provide the comfort you need while maintaining the same breast capacity. This chart is essential because sizing is not universal across the lingerie industry. By understanding your sister sizes, you gain the ability to navigate varying fit styles between manufacturers, ensuring that you can always find a bra that balances support and comfort effectively regardless of the label.
Should I wear a bra while taking these measurements?
For the most accurate results, it is recommended to measure yourself while either wearing an unlined, non-padded bra or while braless. Measuring over bulky clothing or heavily padded bras can distort your measurements and lead to an inaccurate calculation, which may result in purchasing a bra that does not provide the correct support or comfort. Ensure you are standing straight with your arms at your sides and breathe normally while taking the measurements. Using a flexible measuring tape pulled snug—but not tight—against the skin will provide the best data for the calculator to generate your optimal size range.
Why does my bra size vary between different brands?
Bra sizing varies significantly due to a lack of global standardization and the widespread use of 'vanity sizing' and differing manufacturing blocks. A specific cup shape in one brand may be cut deeper or wider, while another brand might use different elastic tensions for their bands, causing identical sizes to feel drastically different when tried on. Our sister size chart helps you adapt to these inconsistencies by providing a range of potentially compatible sizes. When you know your base size and its equivalents, you are empowered to test different options, allowing you to find the perfect fit that accommodates the unique construction of different lingerie designers.
