Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
Primer Primitives</a>. </p> </div> <!-- Options Section --> <div class="component-section"> <h2 class="f2-light mb-3">Options</h2> <h3 class="f3-light mb-2">Color</h3> <p class="f4 mb-3">Text can be colored using any of the functional color tokens. Only foreground colors should be used.</p> <div class="color-demo"> <div class="color-sample"> <span class="color-fg-default">Default text color</span> <div class="f6 color-fg-muted mt-1">color-fg-default</div> </div> <div class="color-sample"> <span class="color-fg-muted">Muted text color</span> <div class="f6 color-fg-muted mt-1">color-fg-muted</div> </div> <div class="color-sample"> <span class="color-fg-subtle">Subtle text color</span> <div class="f6 color-fg-muted mt-1">color-fg-subtle</div> </div> <div class="color-sample"> <span class="color-fg-accent">Accent text color</span> <div class="f6 color-fg-muted mt-1">color-fg-accent</div> </div> <div class="color-sample"> <span class="color-fg-success">Success text color</span> <div class="f6 color-fg-muted mt-1">color-fg-success</div> </div> <div class="color-sample"> <span class="color-fg-attention">Attention text color</span> <div class="f6 color-fg-muted mt-1">color-fg-attention</div> </div> <div class="color-sample"> <span class="color-fg-severe">Severe text color</span> <div class="f6 color-fg-muted mt-1">color-fg-severe</div> </div> <div class="color-sample"> <span class="color-fg-danger">Danger text color</span> <div class="f6 color-fg-muted mt-1">color-fg-danger</div> </div> </div> <h3 class="f3-light mb-2 mt-4">Other typographic styles</h3> <p class="f4 mb-3">See Primer Primitives <a href="#" class="Link--primary">typography</a> for more details about Primer''s typography system.</p> <div class="typography-demo"> <div class="typography-sample"> <div class="f00-light">f00-light - Hero heading</div> <code class="f6 color-fg-muted">f00-light</code> </div> <div class="typography-sample"> <div class="f1-light">f1-light - Large heading</div> <code class="f6 color-fg-muted">f1-light</code> </div> <div class="typography-sample"> <div class="f2-light">f2-light - Medium heading</div> <code class="f6 color-fg-muted">f2-light</code> </div> <div class="typography-sample"> <div class="f3-light">f3-light - Small heading</div> <code class="f6 color-fg-muted">f3-light</code> </div> <div class="typography-sample"> <div class="f4">f4 - Body text</div> <code class="f6 color-fg-muted">f4</code> </div> <div class="typography-sample"> <div class="f5">f5 - Small body text</div> <code class="f6 color-fg-muted">f5</code> </div> <div class="typography-sample"> <div class="f6">f6 - Caption text</div> <code class="f6 color-fg-muted">f6</code> </div> </div> </div> <!-- Accessibility Section --> <div class="component-section"> <h2 class="f2-light mb-3">Accessibility and usability expectations</h2> <div class="accessibility-section mb-4"> <h3 class="f3-light mb-2">⚠️ Important</h3> <p class="f4 mb-0"> The component provides no semantic information. It''s only function is to provide access to color tokens for styling text content. </p> </div> <p class="f4 mb-4"> It is up to the designer / implementer to select the appropriate color token for the text content to ensure that it has sufficient contrast against the background color. </p> <h3 class="f3-light mb-2">Built-in accessibility features</h3> <p class="f4 mb-4 color-fg-muted">None.</p> <h3 class="f3-light mb-2">Implementation requirements</h3> <p class="f4 mb-4">When using the component, ensure that the color token used for the text content has sufficient contrast against the background color.</p> <h3 class="f3-light mb-2">How to test the component</h3> <h4 class="f4 mb-2 text-bold">Integration tests</h4> <p class="f4 mb-3 color-fg-muted">None</p> <h4 class="f4 mb-2 text-bold">Component tests</h4> <ul class="test-checklist"> <li>The text output has sufficient contrast against the background color.</li> </ul> <h3 class="f3-light mb-2 mt-4">Known accessibility issues (GitHub staff only)</h3> <a href="#" class="btn btn-outline">View accessibility issues</a> </div> <!-- Related Links Section --> <div class="component-section"> <h2 class="f2-light mb-3">Related links</h2> <ul class="list-style-none"> <li class="mb-2"> <a href="#" class="Link--primary f4">Primer Primitives</a> </li> </ul> </div> <!-- Interactive Demo --> <div class="component-section"> <h2 class="f2-light mb-3">Interactive Demo</h2> <div class="border rounded-2 p-3"> <div class="form-group"> <label class="form-label" for="text-input">Text content:</label> <input class="form-control" type="text" id="text-input" value="Sample text content" onchange="updateDemo()"> </div> <div class="form-group"> <label class="form-label" for="color-select">Text color:</label> <select class="form-select" id="color-select" onchange="updateDemo()"> <option value="color-fg-default">Default</option> <option value="color-fg-muted">Muted</option> <option value="color-fg-subtle">Subtle</option> <option value="color-fg-accent">Accent</option> <option value="color-fg-success">Success</option> <option value="color-fg-attention">Attention</option> <option value="color-fg-severe">Severe</option> <option value="color-fg-danger">Danger</option> </select> </div> <div class="form-group"> <label class="form-label" for="size-select">Text size:</label> <select class="form-select" id="size-select" onchange="updateDemo()"> <option value="f00-light">f00-light (Hero)</option> <option value="f1-light">f1-light (Large heading)</option> <option value="f2-light">f2-light (Medium heading)</option> <option value="f3-light">f3-light (Small heading)</option> <option value="f4" selected>f4 (Body text)</option> <option value="f5">f5 (Small body)</option> <option value="f6">f6 (Caption)</option> </select> </div> <div class="mt-3"> <strong>Preview:</strong> <div class="border rounded-1 p-3 mt-2 bg-canvas-subtle"> <span id="demo-text" class="f4 color-fg-default">Sample text content</span> </div> </div> </div> </div> <script> function updateDemo() { const textInput = document.getElementById("text-input"); const colorSelect = document.getElementById("color-select"); const sizeSelect = document.getElementById("size-select"); const demoText = document.getElementById("demo-text"); // Update text content demoText.textContent = textInput.value; // Reset classes demoText.className = ""; // Apply selected classes demoText.classList.add(sizeSelect.value); demoText.classList.add(colorSelect.value); } </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">