Menu
Typography system with font families, sizes, and token classes. Use for consistent text styling across the application.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
| name | mint-css-typography |
| description | Typography system with font families, sizes, and token classes. Use for consistent text styling across the application. |
/* Full import */
import '@groww-tech/mint-css/dist/index.css';
/* Typography only */
@import '@groww-tech/mint-css/dist/typography/index.css';
/* Font faces */
@import '@groww-tech/mint-css/dist/fragments/fonts.css';
/* Typography tokens */
@import '@groww-tech/mint-css/dist/typography/tokens/body-tokens.css';
@import '@groww-tech/mint-css/dist/typography/tokens/heading-tokens.css';
@import '@groww-tech/mint-css/dist/typography/tokens/display-tokens.css';
@import '@groww-tech/mint-css/dist/typography/tokens/button-tokens.css';
| Font | Type | Usage |
|---|---|---|
GrowwSans | Variable | Primary font (supports weights via font-variation-settings) |
NotoSans | Multiple weights | Primary sans-serif |
Soehne | Regular | Secondary font |
| Weight | Name | Value |
|---|---|---|
| Regular | Normal | 400 |
| Medium | Medium | 500 |
| SemiBold | SemiBold | 600 |
U+0900-097FUse these classes for body text:
| Class | Description | Font Size | Weight |
|---|---|---|---|
.bodySmall | Small body text | 12pts | Regular |
.bodySmallHeavy | Small body bold | 12pts | Bold |
.bodyBase | Base body text | 14pts | Regular |
.bodyBaseHeavy | Base body bold | 14pts | Bold |
.bodyLarge | Large body text | 16pts | Regular |
.bodyLargeHeavy | Large body bold | 16pts | Bold |
.bodyXLarge | Extra large body | 18pts | Regular |
.bodyXLargeHeavy | Extra large bold | 18pts | Bold |
Use these classes for headings:
| Class | Description |
|---|---|
.headingXSmall | Extra small heading |
.headingSmall | Small heading |
.headingBase | Base heading |
.headingLarge | Large heading |
.headingEyebrow | Eyebrow/overline text |
Use these for large display text:
| Class |
|---|
.displaySmall |
.displayBase |
.displayLarge |
.displayXLarge |
| Class | Description |
|---|---|
.buttonSentenceCase14 | Button text, sentence case, 14px |
.buttonUpperCase16 | Button text, uppercase, 16px |
<p class="bodyBase">Regular body text</p>
<p class="bodyBaseHeavy">Bold body text</p>
<p class="bodySmall">Small caption text</p>
<p class="bodyLarge">Large body text</p>
<h1 class="headingLarge">Large Heading</h1>
<h2 class="headingBase">Base Heading</h2>
<h3 class="headingSmall">Small Heading</h3>
<span class="headingEyebrow">Eyebrow Text</span>
<span class="displayXLarge">Display XL</span>
<span class="displayLarge">Display Large</span>
<span class="displayBase">Display Base</span>
<span class="displaySmall">Display Small</span>
<button class="buttonSentenceCase14">Click Me</button>
<button class="buttonUpperCase16">SUBMIT</button>
The typography system uses CSS variables for customization:
:root {
/* Font families */
--font-family-primary: 'NotoSans', sans-serif;
--font-family-secondary: 'Soehne', sans-serif;
/* Font sizes */
--font-size-xs: ...;
--font-size-sm: ...;
--font-size-base: ...;
--font-size-lg: ...;
--font-size-xl: ...;
/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
}
.bodyBase over custom font-size: 14pt.headingLarge for everything